add november KB articles

Author: filipKovachev

knowledge-base/conversational-ui-scroll-to-bottom.md

@@ -0,0 +1,38 @@
+---
+title: Scroll KendoReact Conversational UI to the bottom automatically
+description: An example on how to make the Conversational UI scroll to the bottom automatically
+type: how-to
+page_title: Scroll to the bottom of each message automatically - KendoReact Conversational UI
+slug: conversational-ui-scroll-to-bottom-automatically
+tags: conversational-ui, scroll, scroll to bottom, automatically, scroll automatically
+ticketid: 1615928
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+
+<table>
+	<tbody>
+		<tr>
+			<td>Product Version</td>
+			<td>6.1.0</td>
+		</tr>
+		<tr>
+			<td>Product</td>
+			<td>Progress® KendoReact</td>
+		</tr>
+	</tbody>
+</table>
+
+## Description
+
+When the user sends the first message, the Conversational UI scrolls to the bottom automatically, however in the next messages it does not.
+
+## Solution
+
+This can be achieved by adjusting the scrollTop of the `.k-message-list` container on the [onMessageSend](https://www.telerik.com/kendo-react-ui/components/conversationalui/api/ChatProps/#toc-onmessagesend) event:
+
+{% meta id:index height:900 %}
+{% embed_file conversational-ui/conversational-ui-scroll-to-bottom/main.jsx preview %}
+{% endmeta %}

knowledge-base/examples/conversational-ui/conversational-ui-scroll-to-bottom/main.jsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Chat } from "@progress/kendo-react-conversational-ui";
+const user = {
+  id: 1,
+  avatarUrl:
+    "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
+  avatarAltText: "KendoReact Conversational UI RICSU",
+};
+const bot = {
+  id: 0,
+};
+const initialMessages = [
+  {
+    author: bot,
+    suggestedActions: [
+      {
+        type: "reply",
+        value: "Neat!",
+      },
+    ],
+    timestamp: new Date(),
+    text: "Hello, this is a demo bot. I don't do much, but I can count symbols!",
+  },
+];
+const App = () => {
+  const [messages, setMessages] = React.useState(initialMessages);
+  const addNewMessage = (event) => {
+    let botResponse = Object.assign({}, event.message);
+    botResponse.text = countReplayLength(event.message.text);
+    botResponse.author = bot;
+    setMessages([...messages, event.message]);
+    setTimeout(() => {
+      setMessages((oldMessages) => [...oldMessages, botResponse]);
+      const messageList = document.querySelector(".k-message-list");
+      if (messageList) {
+        messageList.scrollTop = messageList.scrollHeight;
+      }
+    }, 1000);
+  };
+  const countReplayLength = (question) => {
+    let length = question.length;
+    let answer = question + " contains exactly " + length + " symbols.";
+    return answer;
+  };
+  return (
+    <div>
+      <Chat
+        user={user}
+        messages={messages}
+        onMessageSend={addNewMessage}
+        placeholder={"Type a message..."}
+        width={400}
+      />
+    </div>
+  );
+};
+ReactDOM.render(<App />, document.querySelector("my-app"));

knowledge-base/examples/multiselect/multiselect-limit-input/main.jsx

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { MultiSelect } from "@progress/kendo-react-dropdowns";
+import { filterBy } from "@progress/kendo-data-query";
+import countries from "./countries";
+
+const App = () => {
+  const [data, setData] = useState(countries.slice());
+  const [value, setValue] = useState("");
+
+  const onFilterChange = (event) => {
+    setData(filterBy(countries.slice(), event.filter));
+    setValue(event.filter.value);
+  };
+
+  useEffect(() => {
+    const input = document.getElementsByClassName("k-input-inner");
+    input[0].setAttribute("maxlength", 2);
+  }, []);
+
+  return (
+    <div>
+      <div>Select country:</div>
+      <MultiSelect
+        data={data}
+        filterable={true}
+        onFilterChange={onFilterChange}
+        style={{
+          width: "300px",
+        }}
+        placeholder="e.g. Austria"
+      />
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.querySelector("my-app"));

knowledge-base/multiselect-color-tags-conditionally.md

@@ -0,0 +1,38 @@
+---
+title: Color the MultiSelect tags conditionally
+description: An example on how to color the tags conditionally
+type: how-to
+page_title: Color the MultiSelect tags based on a condition - KendoReact MultiSelect
+slug: multi-select-color-tags-conditionally
+tags: multi-select, multi-select, color, tags,
+ticketid: 1599602
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+
+<table>
+	<tbody>
+		<tr>
+			<td>Product Version</td>
+			<td>6.1.0</td>
+		</tr>
+		<tr>
+			<td>Product</td>
+			<td>Progress® KendoReact</td>
+		</tr>
+	</tbody>
+</table>
+
+## Description
+
+How to color all the selected tags based on a condition?
+
+## Solution
+
+This can be achieved by customizing the tags via the [tagRender](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/MultiSelectProps/#toc-tagrender/):
+
+{% meta id:index height:900 %}
+{% embed_file multiselect/multiselect-color-tags/main.jsx preview %}
+{% endmeta %}

knowledge-base/multiselect-limit-input.md

@@ -0,0 +1,38 @@
+---
+title: Limit the MultiSelect input to two characters
+description: An example on how to restrict the user to enter only two characters
+type: how-to
+page_title: Limit MultiSelect to accept only two characters - KendoReact MultiSelect
+slug: multi-select-limit-input
+tags: multi-select, limit input, maxLength
+ticketid: 1599602
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+
+<table>
+	<tbody>
+		<tr>
+			<td>Product Version</td>
+			<td>6.1.0</td>
+		</tr>
+		<tr>
+			<td>Product</td>
+			<td>Progress® KendoReact</td>
+		</tr>
+	</tbody>
+</table>
+
+## Description
+
+How to Limit the user to be able to enter only two characters in the MultiSelect?
+
+## Solution
+
+This can be achieved by limiting the input on the [onFilterChange](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/MultiSelectProps/#toc-onfilterchange) event:
+
+{% meta id:index height:900 %}
+{% embed_file multiselect/multiselect-limit-input/main.jsx preview %}
+{% endmeta %}