Sync with Kendo UI Professional

Author: kendo-bot

docs-aspnet/ai/mcp-server.md

@@ -82,7 +82,7 @@ To enable the Telerik MCP Servers in a specific {{ site.framework }} app, add a
         "command": "npx",
         "args": [ "-y", "@progress/telerik-aspnetcore-tag-mcp@latest" ],
         "env": {
-          "TELERIK_LICENSE_PATH": "C:\\Users\\lukanova\\AppData\\Roaming\\Telerik\\telerik-license.txt"
+          "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
         }
       }
     }
@@ -138,7 +138,7 @@ To enable the Telerik MCP Servers in a specific [workspace](https://code.visuals
         "command": "npx",
         "args": [ "-y", "@progress/telerik-aspnetcore-tag-mcp@latest" ],
         "env": {
-          "TELERIK_LICENSE_PATH": "C:\\Users\\lukanova\\AppData\\Roaming\\Telerik\\telerik-license.txt"
+          "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
         }
       }
     }
@@ -203,7 +203,7 @@ To enable the Telerik MCP servers in [a specific workspace](https://docs.cursor.
         "command": "npx",
         "args": [ "-y", "@progress/telerik-aspnetcore-tag-mcp@latest" ],
         "env": {
-          "TELERIK_LICENSE_PATH": "C:\\Users\\lukanova\\AppData\\Roaming\\Telerik\\telerik-license.txt"
+          "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
         }
       }
     }

docs-aspnet/html-helpers/conversational-ui/chat/accessibility/overview.md

@@ -105,8 +105,10 @@ To test the Chat component, refer to the [Chat Accessibility Demo](https://demos
 
 ## Keyboard Navigation
 
-For details on how the Chat keyboard navigation works, refer to the [Accessibility Overview]({%slug overview_accessibility%}#keyboard-navigation) article.
+For details on how the Chat keyboard navigation works, refer to the [Chat Keyboard Navigation]({%slug keynav_aspnetcore_chat%}) article.
 
 ## See Also
 
+* [Keyboard Navigation by the Chat for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/chat/keyboard-navigation)
+* [Keyboard Navigation by the Chat for {{ site.framework }}]({% slug keynav_aspnetcore_chat %})
 * [Accessibility in {{ site.product }}]({%slug overview_accessibility%})

docs-aspnet/html-helpers/conversational-ui/chat/ai-integration.md

@@ -10,8 +10,6 @@ position: 3
 
 Integrating AI services with the {{ site.product }} Chat component transforms a simple messaging interface into an intelligent conversational experience. Such integration allows you to create applications that can understand natural language, provide contextual responses, and deliver real-time AI-powered assistance to users.
 
-By leveraging streaming responses, the available client-side Chat events and methods, and its built-in UI components, such as [SpeechToTextButton](slug:htmlhelpers_overview_speechtotextbutton), message actions, and tools, you can implement robust AI integrations with minimal custom infrastructure.
-
 In this article, you will build a practical, end-to-end example that demonstrates how to wire the Chat component to a lightweight AI chat client. This implementation covers opening a chat session, sending messages or quick replies, and streaming the AI model's response into the chat conversation.
 
 ## Getting Started

docs-aspnet/html-helpers/conversational-ui/chat/binding/razor-page.md

@@ -35,7 +35,7 @@ To connect the Chat to a data set retrieved from a remote endpoint in a Razor Pa
         .FilesField("Files")
         .AuthorIdField("AuthorId")
         .AuthorImageUrlField("AuthorImageUrl")
-        .AuthorImageAltTextField("AuthorImageAltTextField")
+        .AuthorImageAltTextField("AuthorImageAltText")
         .TimestampField("TimeStamp")
         .IdField("Id")
         .IsPinnedField("IsPinned")
@@ -47,6 +47,7 @@ To connect the Chat to a data set retrieved from a remote endpoint in a Razor Pa
             .Create(r => r.Url("/Index?handler=CreateMessage").Data("forgeryToken"))
             .Update(r => r.Url("/Index?handler=UpdateMessage").Data("forgeryToken"))
         )
+        .Events(events => events.SendMessage("onSendMessage"))
     )
     ```
     ```TagHelper
@@ -62,7 +63,7 @@ To connect the Chat to a data set retrieved from a remote endpoint in a Razor Pa
         files-field="Files"
         author-id-field="AuthorId"
         author-image-url-field="AuthorImageUrl"
-        author-image-alt-text-field="AuthorImageAltTextField"
+        author-image-alt-text-field="AuthorImageAltText"
         timestamp-field="TimeStamp"
         id-field="Id"
         is-pinned-field="IsPinned"
@@ -78,6 +79,27 @@ To connect the Chat to a data set retrieved from a remote endpoint in a Razor Pa
         </datasource>
     </kendo-chat>
     ```
+    ```JS Scripts
+    <script>
+        function onSendMessage(e) {
+            const currentUser = {
+                id: 1,
+                name: "John Doe",
+                iconUrl: "https://demos.telerik.com/aspnet-core/shared/web/Customers/RICSU.jpg",
+                iconAltText: "John's profile picture"
+            };
+
+            e.message.authorId = currentUser.id;
+            e.message.authorName = currentUser.name;
+            e.message.authorImageUrl = currentUser.iconUrl;
+            e.message.authorImageAltText = currentUser.iconAltText;
+
+            setTimeout(() => {
+                e.sender.scrollToBottom();
+            }, 30);
+        }
+    </script>
+    ```
     
 1. Add an `AntiForgeryToken` at the top of the page.
 
@@ -159,13 +181,51 @@ To connect the Chat to a data set retrieved from a remote endpoint in a Razor Pa
         {
             message.Id = Guid.NewGuid().ToString();
             // Set the Message ID explicitly and perform a custom create operation to the database.
-            return new JsonResult(new[] { message }.ToDataSourceResult(request));
+            var messageObject = new {
+                Id = message.Id,
+                AuthorId = message.AuthorId,
+                AuthorName = message.AuthorName,
+                AuthorImageUrl = message.AuthorImageUrl,
+                AuthorImageAltText = message.AuthorImageAltText,
+                Text = message.Text,
+                TimeStamp = message.TimeStamp,
+                IsDeleted = message.IsDeleted,
+                IsPinned = message.IsPinned,
+                IsTyping = message.IsTyping,
+                Files = message.Files?.Select(file => new
+                {
+                    extension = file.Extension,
+                    size = file.Size,
+                    type = file.Type,
+                    name = file.Name
+                }).ToList() ?? []
+            };
+            return new JsonResult(new[] { messageObject }.ToDataSourceResult(request));
         }
 
         public JsonResult OnPostUpdateMessage([DataSourceRequest] DataSourceRequest request, ChatMessage message)
         {
             // Perform a custom update operation to the existing database.
-            return new JsonResult(new[] { message }.ToDataSourceResult(request));
+            var messageObject = new {
+                Id = message.Id,
+                AuthorId = message.AuthorId,
+                AuthorName = message.AuthorName,
+                AuthorImageUrl = message.AuthorImageUrl,
+                AuthorImageAltText = message.AuthorImageAltText,
+                Text = message.Text,
+                TimeStamp = message.TimeStamp,
+                IsDeleted = message.IsDeleted,
+                IsPinned = message.IsPinned,
+                IsTyping = message.IsTyping,
+                Files = message.Files?.Select(file => new
+                {
+                    extension = file.Extension,
+                    size = file.Size,
+                    type = file.Type,
+                    name = file.Name
+                }).ToList() ?? []
+            };
+            return new JsonResult(new[] { messageObject }.ToDataSourceResult(request));
         }
 
         private static List<ChatMessage> GetData()

docs-aspnet/html-helpers/conversational-ui/chat/suggestions.md

@@ -118,6 +118,8 @@ You can customize the appearance of the defined suggestions by using the `Sugges
 
 The option has various overloads like `SuggestionsTemplateHandler()`, `SuggestionsTemplateId()`, and `SuggestionsTemplate()` that accepts a [Template component](slug:htmlhelpers_overview_template).
 
+> The `k-suggestions` class must be applied to the individual suggestion element. The wrapping element must have the `ref-chat-suggestion-group` attribute.
+
 The following example demonstrates how to customize the default appearance of the suggestion messages.
 
 ```HtmlHelper
@@ -246,10 +248,12 @@ Suggested actions automatically trigger the `SendMessage` client-side event when
 
 ### Customizing Suggested Actions
 
-You can customize the appearance of suggested actions using the `SuggestedActionsTemplate()` option that accepts a [Template component](slug:htmlhelpers_overview_template). The `k-suggestions` class must be applied to the individual suggestion element. The wrapping element must have the `ref-chat-suggestion-group` attribute.
+You can customize the appearance of suggested actions using the `SuggestedActionsTemplate()` option that accepts a [Template component](slug:htmlhelpers_overview_template). 
 
 The template option provides overloads like `SuggestedActionsTemplateHandler()` and `SuggestedActionsTemplateId()`.
 
+> The `k-suggestions` class must be applied to the individual suggestion element. The wrapping element must have the `ref-chat-suggestion-group` attribute.
+
 The following example demonstrates how to customize the default appearance of the suggested actions.
 
 ```HtmlHelper

docs-aspnet/html-helpers/data-management/grid/binding/razor-page.md

@@ -44,6 +44,7 @@ To configure the CRUD operations of the Grid DataSource within a Razor Pages app
                     column.Destroy();
                 }).Width(230);
             })
+            .HtmlAttributes(new { style = "height:430px;" })
             .DataSource(ds => ds
                 .Ajax()
                 .Read(r => r.Url("/Index?handler=Read").Data("forgeryToken"))
@@ -60,7 +61,7 @@ To configure the CRUD operations of the Grid DataSource within a Razor Pages app
         @model IndexModel
         @using Kendo.Mvc.UI
 
-        <kendo-grid name="grid">
+        <kendo-grid name="grid" height="430">
             <datasource type="DataSourceTagHelperType.Ajax" page-size="10">
                 <schema data="Data" errors="Errors" total="Total">
                     <model id="OrderID">
@@ -226,29 +227,53 @@ To bind the Grid to a property from the `PageModel`, follow the next steps:
 1. Bind the Grid to the collection property and disable the server data operations (`ServerOperations(false)`).
 
     ```HtmlHelper
-        @page
-        @model IndexModel
-        @using Kendo.Mvc.UI
-
-        @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
-        @Html.AntiForgeryToken()
-
-        @(Html.Kendo().Grid<OrderViewModel>(Model.orders)
-            .Name("grid")
-            .Scrollable()
-            .Pageable()
-            .Columns(columns =>
-            {
-                columns.Bound(column => column.Freight);
-                columns.Bound(column => column.ShipName);
-                columns.Bound(column => column.ShipCity);
-            })
-            .DataSource(ds => ds
-                .Ajax()
-                .PageSize(20)
-                .ServerOperation(false)
-            )
+    @page
+    @model IndexModel
+    @using Kendo.Mvc.UI
+
+    @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
+    @Html.AntiForgeryToken()
+
+    @(Html.Kendo().Grid<OrderViewModel>(Model.orders)
+        .Name("grid")
+        .Scrollable()
+        .Pageable()
+        .Columns(columns =>
+        {
+            columns.Bound(column => column.Freight);
+            columns.Bound(column => column.ShipName);
+            columns.Bound(column => column.ShipCity);
+        })
+        .HtmlAttributes(new { style = "height:430px;" })
+        .DataSource(ds => ds
+            .Ajax()
+            .PageSize(20)
+            .ServerOperation(false)
         )
+    )
+    ```
+    ```TagHelper
+    @page
+    @model IndexModel
+    @using Kendo.Mvc.UI
+
+    @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
+    @Html.AntiForgeryToken()
+
+    <kendo-grid name="grid" height="430">
+        <datasource type="DataSourceTagHelperType.Ajax" 
+            page-size="20" 
+            server-operation="false" 
+            data="@Model.orders">
+        </datasource>
+        <columns>
+            <column field="Freight"/>
+            <column field="ShipName"/>
+            <column field="ShipCity"/>
+        </columns>
+        <pageable enabled="true"/>
+        <scrollable enabled="true"/>
+    </kendo-grid>
     ```
 
 ## See Also

docs/knowledge-base/reverse-numbers-kendo-ui-jquery-slider.md

@@ -0,0 +1,81 @@
+---
+title: Reversing Numbers on a Vertical Slider in Kendo UI for jQuery
+description: Learn how to reverse the direction of numbers on a vertical slider using Kendo UI for jQuery.
+type: how-to
+page_title: How to Reverse Numbers on a Kendo UI for jQuery Vertical Slider
+meta_title: How to Reverse Numbers on a Kendo UI for jQuery Vertical Slider
+slug: reverse-numbers-kendo-ui-jquery-slider
+tags: kendo-ui-for-jquery, slider, vertical-slider, value-mapping
+res_type: kb
+ticketid: 1695653
+---
+
+## Environment
+<table>
+<tbody>
+<tr>
+<td> Product </td>
+<td> Kendo UI for jQuery Slider </td>
+</tr>
+<tr>
+<td> Version </td>
+<td> 2025.2.720 </td>
+</tr>
+</tbody>
+</table>
+
+## Description
+
+I need to reverse the direction of numbers on a vertical slider in Kendo UI for jQuery. By default, the minimum value is at the bottom and the maximum is at the top. I want 0 at the top and 20 at the bottom.
+
+This knowledge base article also answers the following questions:
+- How can I invert the values on a vertical slider?
+- How to customize the value direction of a vertical slider in Kendo UI for jQuery?
+- How do I set 0 at the top and 20 at the bottom in a vertical slider?
+
+## Solution
+
+To reverse the direction of numbers on a vertical slider, map the slider's values in your code. Follow these steps:
+
+1. Set the slider's `min` to 0 and `max` to 20 as usual.
+2. Invert the value in the slider event handlers (`slide` and `change`) so that moving the handle up results in a lower value.
+
+### Code Example
+
+```html
+<div id="slider"></div>
+<span id="sliderValue"></span>
+
+<script>
+  $(document).ready(function() {
+    var min = 0;
+    var max = 20;
+
+    $("#slider").kendoSlider({
+      orientation: "vertical",
+      min: min,
+      max: max,
+      value: max, // Start at the "bottom" (which will show as the top)
+      slide: function(e) {
+        // Invert the value
+        var invertedValue = max - (e.value - min);
+        $("#sliderValue").text(invertedValue);
+      },
+      change: function(e) {
+        var invertedValue = max - (e.value - min);
+        $("#sliderValue").text(invertedValue);
+      }
+    });
+  });
+</script>
+```
+
+### Key Notes
+
+- This approach inverts the value displayed to users, ensuring 0 appears at the top and 20 at the bottom.
+- Customize tooltips or labels for consistency in the user interface.
+- Tick marks and labels will still show the default progression unless custom rendering is implemented.
+
+## See Also
+
+- [Kendo UI for jQuery Slider](https://docs.telerik.com/kendo-ui/controls/editors/slider/overview)