Sync with Kendo UI Professional

Author: kendo-bot

docs-aspnet/html-helpers/data-management/grid/toolbar.md

@@ -117,10 +117,10 @@ When you use a Toolbar Template, and you also want to use a built-in command, th
 ```HtmlHelper
     <script id="GridToolbarTemplate" type="text/x-kendo-template">
         <div class="refreshBtnContainer">
-            <a href="\\#" class="k-pager-refresh k-link k-button k-button-solid-base k-button-solid k-button-rectangle k-button-md k-rounded-md k-button-icon" title="Refresh"><span class="k-icon k-i-reload"></span></a>
+            <a href="\\#" class="k-pager-refresh k-link k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-icon" title="Refresh"><span class="k-icon k-i-reload"></span></a>
         </div>
         
-        <a role="button" class="k-button k-button-solid-base k-button-solid k-button-rectangle k-button-md k-rounded-md k-button-icontext k-grid-pdf" href="\\#"><span class="k-icon k-i-file-pdf"></span>Export to PDF</a>
+        <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-icontext k-grid-pdf" href="\\#"><span class="k-icon k-i-file-pdf"></span>Export to PDF</a>
         
         <div class="toolbar">
             <label class="category-label" for="category">Show products by category:</label>
@@ -153,7 +153,7 @@ When you use a Toolbar Template, and you also want to use a built-in command, th
             <a href="\\#" class="k-pager-refresh k-link k-button k-button-solid-base k-button-solid k-button-rectangle k-button-md k-rounded-md k-button-icon" title="Refresh"><span class="k-icon k-i-reload"></span></a>
         </div>
         
-        <a role="button" class="k-button k-button-solid-base k-button-solid k-button-rectangle k-button-md k-rounded-md k-button-icontext k-grid-pdf" href="\\#"><span class="k-icon k-i-file-pdf"></span>Export to PDF</a>
+        <a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-icontext k-grid-pdf" href="\\#"><span class="k-icon k-i-file-pdf"></span>Export to PDF</a>
         
         <div class="toolbar">
             <label class="category-label" for="category">Show products by category:</label>

docs-aspnet/html-helpers/scheduling/scheduler/pdf-export.md

@@ -232,9 +232,9 @@ The following example demonstrates how to handle custom fonts.
 
         /* Hide toolbar, navigation and footer during export */
         .k-pdf-export .k-scheduler-toolbar,
-        .k-pdf-export .k-scheduler-navigation .k-nav-today,
-        .k-pdf-export .k-scheduler-navigation .k-nav-prev,
-        .k-pdf-export .k-scheduler-navigation .k-nav-next,
+        .k-pdf-export .k-scheduler-navigation [ref-nav-today],
+        .k-pdf-export .k-scheduler-navigation [ref-nav-prev],
+        .k-pdf-export .k-scheduler-navigation [ref-nav-next],
         .k-pdf-export .k-scheduler-footer {
             display: none;
         }

docs-aspnet/knowledge-base/scheduler-preserve-buttongroup-view-in-adaptive-rendering.md

@@ -179,22 +179,22 @@ Follow the steps below to achieve the desired scenario:
 ```Script.js
     <script>
          var buttonGroup = `<span data-role='buttongroup' class='k-widget   k-button-group k-toolbar-button-group' role='group'   data-uid='f01bcb47-94d9-4c40-8e55-53a28b45134d'>
-             <button class='k-view-day k-button k-button-md k-rounded-md k-button-solid     k-button-solid-base k-toggle-button k-toolbar-tool k-group-start    k-button-rectangle' data-name='day'    data-uid='dda9916c-3486-4407-9a69-4d5acca5ab52'    data-parentuid='f01bcb47-94d9-4c40-8e55-53a28b45134d'  data-role='togglebutton' type='button' role='button' aria-disabled='false'   tabindex='-1' aria-pressed='false' data-group='views'>
+             <button class='k-button k-button-md k-rounded-md k-button-solid     k-button-solid-base k-toggle-button k-group-start    ' ref-view-day data-name='day'    data-uid='dda9916c-3486-4407-9a69-4d5acca5ab52'    data-parentuid='f01bcb47-94d9-4c40-8e55-53a28b45134d'  data-role='togglebutton' type='button' role='button' aria-disabled='false'   tabindex='-1' aria-pressed='false' data-group='views' ref-toolbar-tool>
                  <span class='k-button-text'>Day</span>
              </button>
-             <button class='k-view-week k-button k-button-md k-rounded-md   k-button-solid k-button-solid-base k-toggle-button k-toolbar-tool     k-button-rectangle' data-name='week'    data-uid='faac8830-48a5-4b51-9574-9a6c39166b45'    data-parentuid='f01bcb47-94d9-4c40-8e55-53a28b45134d'  data-role='togglebutton' type='button' role='button' aria-disabled='false'   tabindex='-1' aria-pressed='false' data-group='views'>
+             <button class='k-button k-button-md k-rounded-md   k-button-solid k-button-solid-base k-toggle-button      ' data-name='week' ref-view-week  data-uid='faac8830-48a5-4b51-9574-9a6c39166b45'    data-parentuid='f01bcb47-94d9-4c40-8e55-53a28b45134d'  data-role='togglebutton' type='button' role='button' aria-disabled='false'   tabindex='-1' aria-pressed='false' data-group='views' ref-toolbar-tool>
                  <span class='k-button-text'>Week</span>
              </button>
-             <button class='k-view-month k-button k-button-md k-rounded-md  k-button-solid k-button-solid-base k-toggle-button k-toolbar-tool    k-button-rectangle k-selected' data-name='month'   data-uid='be7bd46b-e9db-49ee-9d1f-aaee385d1884'   data-parentuid='f01bcb47-94d9-4c40-8e55-53a28b45134d'     data-role='togglebutton' type='button' role='button' aria-disabled='false'  tabindex='-1' aria-pressed='true' data-group='views'>
+             <button class='k-button k-button-md k-rounded-md  k-button-solid k-button-solid-base k-toggle-button       k-selected' ref-view-month data-name='month'   data-uid='be7bd46b-e9db-49ee-9d1f-aaee385d1884'   data-parentuid='f01bcb47-94d9-4c40-8e55-53a28b45134d'     data-role='togglebutton' type='button' role='button' aria-disabled='false'  tabindex='-1' aria-pressed='true' data-group='views' ref-toolbar-tool>
                  <span class='k-button-text'>Month</span>
              </button>
-             <button class='k-view-year k-button k-button-md k-rounded-md   k-button-solid k-button-solid-base k-toggle-button k-toolbar-tool     k-button-rectangle' data-name='year'    data-uid='d5aa93e5-ea56-48b7-a878-5f427722fb18'    data-parentuid='f01bcb47-94d9-4c40-8e55-53a28b45134d'  data-role='togglebutton' type='button' role='button' aria-disabled='false'   tabindex='-1' aria-pressed='false' data-group='views'>
+             <button class='k-view-year k-button k-button-md k-rounded-md   k-button-solid k-button-solid-base k-toggle-button     ' data-name='year'    data-uid='d5aa93e5-ea56-48b7-a878-5f427722fb18'    data-parentuid='f01bcb47-94d9-4c40-8e55-53a28b45134d'  data-role='togglebutton' type='button' role='button' aria-disabled='false'   tabindex='-1' aria-pressed='false' data-group='views' ref-toolbar-tool>
                  <span class='k-button-text'>Year</span>
              </button>
-             <button class='k-view-agenda k-button k-button-md k-rounded-md     k-button-solid k-button-solid-base k-toggle-button k-toolbar-tool   k-button-rectangle' data-name='agenda'    data-uid='bb93961e-ebe4-4e7a-bbaa-8fc4b8d69a90'    data-parentuid='f01bcb47-94d9-4c40-8e55-53a28b45134d'  data-role='togglebutton' type='button' role='button' aria-disabled='false'   tabindex='-1' aria-pressed='false' data-group='views'>
+             <button class='k-button k-button-md k-rounded-md     k-button-solid k-button-solid-base k-toggle-button    ' data-name='agenda' ref-view-agenda   data-uid='bb93961e-ebe4-4e7a-bbaa-8fc4b8d69a90'    data-parentuid='f01bcb47-94d9-4c40-8e55-53a28b45134d'  data-role='togglebutton' type='button' role='button' aria-disabled='false'   tabindex='-1' aria-pressed='false' data-group='views' ref-toolbar-tool>
                  <span class='k-button-text'>Agenda</span>
              </button>
-             <button class='k-view-timeline k-button k-button-md k-rounded-md   k-button-solid k-button-solid-base k-toggle-button k-toolbar-tool     k-group-end k-button-rectangle' data-name='timeline'    data-uid='f137d9d3-02be-47a9-8b3c-9f13513f8090'    data-parentuid='f01bcb47-94d9-4c40-8e55-53a28b45134d'  data-role='togglebutton' type='button' role='button' aria-disabled='false'   tabindex='-1' aria-pressed='false' data-group='views'>
+             <button class='k-button k-button-md k-rounded-md   k-button-solid k-button-solid-base k-toggle-button      k-group-end ' ref-view-timeline data-name='timeline'    data-uid='f137d9d3-02be-47a9-8b3c-9f13513f8090'    data-parentuid='f01bcb47-94d9-4c40-8e55-53a28b45134d'  data-role='togglebutton' type='button' role='button' aria-disabled='false'   tabindex='-1' aria-pressed='false' data-group='views' ref-toolbar-tool>
                  <span class='k-button-text'>Timeline</span>
              </button>
        </span>`;

docs/controls/mediaplayer/accessibility/keyboard-navigation.md

@@ -20,6 +20,12 @@ The MediaPlayer supports the following keyboard shortcuts:
 |`Esc`    |Exits the full-screen mode.
 |`Space`  |Toggles the play and pause state.
 |`M`      |Toggles the mute and unmute state.
+| `RightArrow` | Seek forward.
+| `LeftArrow` | Seek backward.
+| `UpArrow` | Increase the volume.
+| `DownArrow` | Decrease the volume.
+| `Control + 1` | Decrease the video quality.
+| `Control + 2` | Increase the video quality.
 
 ## See Also
 

docs/knowledge-base/add-control-to-customeditor.md

@@ -122,7 +122,7 @@ The following example demonstrates how to achieve the desired scenario.
                 var container = e.container;
 
                 /* ACTION: Ading a custom button. */
-                var newButton = $('<a class="k-button k-button-md k-button-rectangle k-rounded-md k-button-solid k-button-solid-base" href="#">New button</a>');
+                var newButton = $('<a class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" href="#">New button</a>');
 
                 // Wire its click event.
                 newButton.click(function(e) { alert("Clicked"); });

docs/knowledge-base/add-icon-custom-tool.md

@@ -80,12 +80,12 @@ The following example demonstrates how to decorate your own custom tool with a F
         </script>
 
         <style>
-          .k-editor .k-toolbar-tool[title="Custom tool 1"] .k-icon:before {
+          .k-editor [ref-toolbar-tool][title="Custom tool 1"] .k-icon:before {
             font-family: FontAwesome;
             content: "\f09e";
           }
 
-          .k-editor .k-toolbar-tool[title="Custom tool 2"] .k-icon:before {
+          .k-editor [ref-toolbar-tool][title="Custom tool 2"] .k-icon:before {
             font-family: FontAwesome;
             content: "\f061";
           }

docs/knowledge-base/agenda-view-pdf-export-with-paging.md

@@ -44,7 +44,7 @@ To achieve the desired scenario, use the [drawing API]({% slug multipagecontent_
     <!-- Load Pako ZLIB library to enable PDF compression -->
     <script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
     <div id="example">
-      <button id="export" class="k-button k-button-md k-button-rectangle k-rounded-md k-button-solid k-button-solid-base">Export to PDF</button>
+      <button id="export" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">Export to PDF</button>
       <div id="scheduler"></div>
     </div>
     <script>

docs/knowledge-base/how-to-programmatically-change-grid-column-width-kendo-ui.md

@@ -0,0 +1,182 @@
+---
+title: Programmatically Changing the Width of a Grid Column
+description: Learn how to programmatically adjust the width of columns in a Kendo UI Grid.
+type: how-to
+page_title: How to Adjust Column Widths Programmatically in Kendo UI Grid
+slug: how-to-programmatically-change-grid-column-width-kendo-ui
+tags: grid, kendo ui, column width, setoptions, javascript
+res_type: kb
+ticketid: 1666957
+---
+
+## Description
+
+When working with the [Grid](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid) for Progress® Kendo UI®, you might need to programmatically change the width of one or more columns. This article demonstrates how to adjust column widths dynamically. This KB article also answers the following questions:
+- How to set column widths dynamically in a Kendo UI Grid?
+- Can I update Grid column settings after initialization?
+- How to use `setOptions()` method to modify Grid properties?
+
+## Environment
+
+<table>
+<tbody>
+<tr>
+<td>Product</td>
+<td>Grid for Progress® Kendo UI®</td>
+</tr>
+<tr>
+<td>Version</td>
+<td>2024.3.1015</td>
+</tr>
+</tbody>
+</table>
+
+## Solution
+
+To programmatically change the width of Grid columns, use the [`setOptions()`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions) method. This approach allows you to update the Grid's column widths after it has been initialized. Follow these steps:
+
+1. Define a list with the desired widths for each column.
+
+```javascript
+const list_of_columns_width = [500, 110, 120, 130, 50, 60];
+```
+
+2. Obtain a reference to the Grid instance.
+
+```javascript
+let grid = $("#grid").data("kendoGrid");
+```
+
+3. Iterate over the Grid columns and apply the widths from `list_of_columns_width`.
+
+```javascript
+let gridColumns = grid.columns;
+
+for (var i = 0; i < grid.columns.length; i++) {
+  if (i < list_of_columns_width.length) {
+    const any_column_width = list_of_columns_width[i];
+    gridColumns[i].width = any_column_width;
+  }
+}
+```
+
+4. Update the Grid's options with the modified columns.
+
+```javascript
+grid.setOptions({
+  columns: gridColumns
+});
+```
+
+Note: Use the `setOptions()` method with caution and avoid calling it inside event handlers like [`dataBound`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound) to prevent endless loops.
+
+When updating the Grid's columns using `setOptions()`, all other Grid options remain as initially defined. Only the specified options (in this case, column widths) are updated.
+
+Explore a live example in the following Dojo demo: 
+
+```dojo
+<div id="example">
+      <div id="grid"></div>
+
+      <script>
+        $(document).ready(function() {
+          const list_of_columns_width = [500, 110, 120, 130 ,50, 60];
+          $("#grid").kendoGrid({
+            dataSource: {
+              type: "odata",
+              transport: {
+                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
+              },
+              schema: {
+                model: {
+                  fields: {
+                    OrderID: {
+                      type: "number"
+                    },
+                    ShipCountry: {
+                      type: "string"
+                    },
+                    ShipCity: {
+                      type: "string"
+                    },
+                    ShipName: {
+                      type: "string"
+                    },
+                    OrderDate: {
+                      type: "date"
+                    },
+                    ShippedDate: {
+                      type: "date"
+                    }
+                  }
+                }
+              },
+              pageSize: 15
+            },
+            height: 550,
+            sortable: true,
+            resizable: true,
+            pageable: true,
+            dataBound: function() {
+              for (var i = 0; i < this.columns.length; i++) {
+                if (i < list_of_columns_width.length) {
+                  const any_column = this.columns[i];
+                  const any_column_width = list_of_columns_width[i];
+                  any_column.width = any_column_width
+                }
+              }
+            },
+            columns: [
+              {
+                field: "OrderDate",
+                title: "Order Date",
+                format: "{0:MM/dd/yyyy}"
+              },
+              {
+                field: "ShipCountry",
+                title: "Ship Country"
+              },
+              {
+                field: "ShipCity",
+                title: "Ship City"
+              },
+              {
+                field: "ShipName",
+                title: "Ship Name"
+              },
+              {
+                field: "ShippedDate",
+                title: "Shipped Date",
+                format: "{0:MM/dd/yyyy}"
+              },
+              {
+                field: "OrderID",
+                title: "ID"
+              }
+
+            ]
+          });
+
+          let grid = $("#grid").data("kendoGrid");
+          let gridColumns = grid.columns;
+
+          for (var i = 0; i < grid.columns.length; i++) {
+            if (i < list_of_columns_width.length) {
+
+              const any_column_width = list_of_columns_width[i];
+              gridColumns[i].width = any_column_width;
+            }
+          }
+          grid.setOptions({
+            columns: gridColumns
+          });
+        });
+      </script>
+    </div>
+```
+
+## See Also
+
+- [Grid Overview](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)
+- [Grid setOptions() Method](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions)
+- [Grid DataBound Event](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound)

docs/knowledge-base/timeline-with-dynamic-length.md

@@ -90,7 +90,7 @@ The following example demonstrates how to achieve the desired scenario.
           views: [{
             type: "MyCustomTimelistView",
             selected: true,
-            dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, ' dd/M ddd')#</span>"
+            dateHeaderTemplate: "<span class='k-link' ref-view-day >#=kendo.toString(date, ' dd/M ddd')#</span>"
           }],
           timezone: "Etc/UTC",
           dataSource: {