Sync with Kendo UI Professional

kendo-bot · kendo-bot · commit bcadc1840e67 · 2024-12-17T04:20:02.000Z
diff --git a/docs-aspnet/html-helpers/data-management/grid/binding/server-binding.md b/docs-aspnet/html-helpers/data-management/grid/binding/server-binding.md
@@ -164,13 +164,13 @@ The action method which renders the view that contains the Grid may need additio
 
     ![{{ site.product_short }} A new entity data model](../images/grid-entity-data-model.png)
 
-1.  Pick the **Generate from database** option and click **Next**. Configure a connection to the Northwind database. Click **Next**.
+1.  Pick the **EF Designer from database** option and click **Next**. Configure a connection to the Northwind database. Click **Next**.
 
-    ![{{ site.product_short }} Choosing the connection](../images/grid-entity-data-model.png)
+    ![{{ site.product_short }} Choosing the connection](../images/grid-binding-choose-data-connection.png)
 
 1. Choose the **Products** table from the `Which database objects do you want to include in your model?`. Leave all other options as they are set by default. Click **Finish**.
 
-    ![{{ site.product_short }} Choosing the Products table in the database objects](../images/grid-database-objects.png)
+    ![{{ site.product_short }} Choosing the Products table in the database objects](../images/grid-binding-choose-database-objects.png)
 
 1. Open **HomeController.cs** and modify the `Index` action method.
 
@@ -183,22 +183,91 @@ The action method which renders the view that contains the Grid may need additio
             return View();
         }
 
+1. Modify the `Create` method as demonstrated in the following example.
+
+        [AcceptVerbs(HttpVerbs.Post)]
+        public ActionResult Create(Product product)
+        {
+            if (ModelState.IsValid)
+            {
+                productService.Create(product);
+
+                RouteValueDictionary routeValues = this.GridRouteValues();
+
+                return RedirectToAction("Index", routeValues);
+            }
+
+            return View("Index", productService.GetAll());
+        }
+
+1. Modify the `Update` method as demonstrated in the following example.
+
+        [AcceptVerbs(HttpVerbs.Post)]
+        public ActionResult Update(Product product)
+        {
+            if (ModelState.IsValid)
+            {
+                productService.Update(product);
+
+                RouteValueDictionary routeValues = this.GridRouteValues();
+
+                return RedirectToAction("Index", routeValues);
+            }
+
+            return View("Index", productService.GetAll());
+        }
+
+1. Modify the `Destroy` method as demonstrated in the following example.
+
+        [AcceptVerbs(HttpVerbs.Post)]
+        public ActionResult Destroy(int productID)
+        {
+            Product product = productService.GetAll().FirstOrDefault(p => p.ProductID == productID);
+
+            RouteValueDictionary routeValues;
+
+            if (product == null)
+            {
+                routeValues = this.GridRouteValues();
+
+                return RedirectToAction("Index", routeValues);
+            }
+
+            productService.Destroy(product);
+
+            routeValues = this.GridRouteValues();
+
+            return RedirectToAction("Index", routeValues);
+        }
+
 1. Add a Kendo UI Grid to the `Index` view.
 
     ```Razor
         @(Html.Kendo().Grid((IEnumerable<KendoGridServerBinding.Models.Product>)ViewBag.Products) //Bind the grid to ViewBag.Products
             .Name("grid")
             .Columns(columns =>
             {
-                // Create a column bound to the ProductID property.
                 columns.Bound(product => product.ProductID);
-                // Create a column bound to the ProductName property.
                 columns.Bound(product => product.ProductName);
-                // Create a column bound to the UnitsInStock property.
                 columns.Bound(product => product.UnitsInStock);
+                columns.Bound(product => product.Discontinued);
+                columns.Command(commands =>
+                {
+                    commands.Edit(); // The "edit" command will edit and update data items.
+                    commands.Destroy(); // The "destroy" command removes data items.
+                }).Title("Commands").Width(300);
             })
+            .ToolBar(commands => commands.Create())
             .Pageable() //Enable the paging.
             .Sortable() //Enable the sorting.
+            .DataSource(dataSource => dataSource
+                .Server()
+                // Specify that the ProductID property is the unique identifier of the model.
+                .Model(model => model.Id(p => p.ProductID))
+                .Create(create => create.Action("Create", "Home"))
+                .Update(update => update.Action("Update", "Home"))
+                .Destroy(destroy => destroy.Action("Destroy", "Home"))
+            )
         )
     ```
 
diff --git a/docs-aspnet/html-helpers/data-management/grid/images/grid-bound-data.png b/docs-aspnet/html-helpers/data-management/grid/images/grid-bound-data.png
diff --git a/docs-aspnet/html-helpers/editors/slider/accessibility/keyboard-navigation.md b/docs-aspnet/html-helpers/editors/slider/accessibility/keyboard-navigation.md
@@ -0,0 +1,34 @@
+---
+title: Keyboard Navigation
+page_title: Keyboard Navigation
+description: "Get started with the {{ site.product }} Slider and learn about the accessibility support it provides through its keyboard navigation functionality."
+slug: keynav_aspnetcore_slider
+position: 2
+---
+
+# Keyboard Navigation
+
+The keyboard navigation of the {{ site.product }} Slider is always available.
+
+For a complete example, refer to the [demo on keyboard navigation of the Slider](https://demos.telerik.com/{{ site.platform }}/slider/keyboard-navigation).
+
+The Slider supports the following shortcuts:
+
+| SHORTCUT						| DESCRIPTION				                                               |
+|:---                 |:---                                                                                |
+| `Alt + W`           | Focuses the component.                                                             |
+| `Alt + Q`           | Focuses the range slider.                                                           |
+| `Up Arrow`        | Increments the value by a small step.                                        |
+| `Down Arrow`        | Decrements the value by a small step.                                        |
+| `Left Arrow`        | Decrements the value by a small step (equivalent to `Down Arrow`).                                        |
+| `Right Arrow`       | Increments the value by a small step (equivalent to `Up Arrow`).                                                                                                       |
+| `Page Up`           | Increments the value by a large step.                                              |
+| `Page Down`         | Decrements the value by a large step.                                              |
+| `Home`              | Moves the drag handle to the minimum value.                                          |
+| `End`               | Moves the drag handle to the maximum value.                                          |
+| `Shift + Tab`       | Tabs to first range slider draghandle or previous focusable page element.                                                                                                   |
+
+## See Also
+
+* [Keyboard Navigation in the Slider HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/slider/keyboard-navigation)
+* [Accessibility in the Slider HtmlHelper for {{ site.framework }}]({% slug accessibility_aspnetcore_slider %})
diff --git a/docs-aspnet/html-helpers/editors/slider/accessibility/overview.md b/docs-aspnet/html-helpers/editors/slider/accessibility/overview.md
@@ -0,0 +1,33 @@
+---
+title: Overview
+page_title: Slider Accessibility
+description: "Get started with the {{ site.product }} Slider and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
+slug: accessibility_aspnetcore_slider
+position: 1
+---
+
+# Slider Accessibility
+
+The Slider is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
+
+For more information, refer to:
+* [Keyboard navigation by the Telerik UI Slider]({% slug keynav_aspnetcore_slider %})
+* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
+
+## WAI-ARIA
+
+The component follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers. For more information, refer to the article on [WAI-ARIA support in {{ site.product }}]({% slug overview_accessibility %}#wai-aria).
+
+## Section 508
+
+The Slider is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in {{ site.product }}]({% slug overview_accessibility %}#section-508).
+
+## WCAG 2.2
+
+The Slider supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/). For more information, refer to the article on [WCAG 2.2 compliance in {{ site.product_short }} ]({% slug overview_accessibility %}#wcag-21)
+
+## See Also
+
+* [Keyboard Navigation by the Slider HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/slider/keyboard-navigation)
+* [Keyboard Navigation by the Slider HtmlHelper for {{ site.framework }}]({% slug keynav_aspnetcore_slider %})
+* [Accessibility in {{ site.product }}]({% slug compliance_accessibility %})
diff --git a/docs-aspnet/html-helpers/editors/slider/overview.md b/docs-aspnet/html-helpers/editors/slider/overview.md
@@ -93,7 +93,7 @@ The Slider configuration options are passed as attributes. The following example
 
 * [Appearance]({% slug slider_appearance %})&mdash;Use different configuration settings that control the styling of the component.
 * [Events]({% slug events_slider %})&mdash;Handle the component events and implement any custom functionality.
-* [Accessibility](https://demos.telerik.com/{{ site.platform }}/slider/keyboard-navigation)&mdash;The Slider is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
+* [Accessibility]({% slug accessibility_aspnetcore_slider %})&mdash;The Slider is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
 
 ## Next Steps
 
diff --git a/docs-aspnet/knowledge-base/images/repl-result.png b/docs-aspnet/knowledge-base/images/repl-result.png
diff --git a/docs-aspnet/knowledge-base/repl-isolate-sample.md b/docs-aspnet/knowledge-base/repl-isolate-sample.md
@@ -23,10 +23,10 @@ https://netcorerepl.telerik.com/
 
 Using this tool, you can demonstrate the issue in a live sample with several simple steps. Here is a sample process with a Grid and its Data Binding functionality.
 
-1. Open the tool's web site:
+* Open the tool's web site:
 https://netcorerepl.telerik.com/
 
-2. Add a Model class definition:
+* Add a Model class definition:
 ```C#
 @using System.ComponentModel.DataAnnotations;
 
@@ -44,7 +44,7 @@ https://netcorerepl.telerik.com/
 }
 ```
 
-3. Add the logic from your controller action :
+* Add the logic from your controller action :
 ```C#
 @{
         // this part simulates Controller Read Action 
@@ -60,7 +60,7 @@ https://netcorerepl.telerik.com/
 }
 ```
 
-4. Add the Grid definition, but instead of Read, use the BindTo property:
+* Add the Grid definition, but instead of Read, use the BindTo property:
 ```Razor
 @(Html.Kendo().Grid<OrderViewModel>()
     .Name("Grid")
@@ -70,7 +70,6 @@ https://netcorerepl.telerik.com/
             columns.Bound(p => p.Freight);
             columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
             columns.Bound(p => p.ShipName);
-            columns.Bound(p => p.ShipName);
             columns.Bound(p => p.Active);
     })
     .Pageable()
@@ -89,18 +88,18 @@ https://netcorerepl.telerik.com/
 )
 ```
 
-5. Click Run and ensure the sample is working as expected:
+* Click Run and ensure the sample is working as expected:
 
 ![REPL Result](images/repl-result.png)
 
-6. Modify the sample to reproduce the issue you are facing.
+* Modify the sample to reproduce the issue you are facing.
 
-7. Click the "Share Snippet" button to generate a new URL of the REPL sample and send it in the ongoing thread:
+* Click the "Share Snippet" button to generate a new URL of the REPL sample and send it in the ongoing thread:
 
 ![REPL Share](images/repl-share.png)
 
 Here is a link with the REPL of the entire sample:
-https://netcorerepl.telerik.com/mIPckNvk57VISrJ323
+https://netcorerepl.telerik.com/mSPclqOs53C10jIx47 
 
 ## See Also
 
diff --git a/docs-aspnet/vs-integration/troubleshooting.md b/docs-aspnet/vs-integration/troubleshooting.md
@@ -53,6 +53,24 @@ If the target **Framework** dropdown doesn't allow you to select the desired fra
 1. Go to **Tools** > **Get Tools and Features**. 
 1. In Visual Studio Installer, select the **Individual components** tab and check the .NET Framework 4.6.2 targeting pack and .NET Framework 4.6.2 SDK
 
+{% if site.mvc %}
+
+## Created project could not load file or assembly 'Telerik.SvgIcons'
+
+When creating a new project using an older version of the components, there might be mismatch between the version of the installed VS Extentions and the older Telerik Icon assemblies required to build the specific old version of the toolset.
+
+The error will show a message similar to this:
+
+*Could not load file or assembly 'Telerik.SvgIcons, Version=4.0.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)*
+
+You can fix the issue by opening the `.csproj` file of the project and updating the version of the Icon packages:
+```XML
+    <PackageReference Include="Telerik.FontIcons" Version="4.0.0" />
+    <PackageReference Include="Telerik.SvgIcons" Version="4.0.0" />
+```
+
+{% endif %}
+
 ## See Also
 
 * [Integrating Visual Studio in Your .Net Project (Overview)]({% slug overview_visualstudio_aspnetcore %})
diff --git a/docs/knowledge-base/how-to-check-expansionpanel-state-kendo-ui.md b/docs/knowledge-base/how-to-check-expansionpanel-state-kendo-ui.md
@@ -0,0 +1,69 @@
+---
+title: Checking If a Kendo UI ExpansionPanel Is Open
+description: Learn how to determine the expanded state of a Kendo UI ExpansionPanel for jQuery.
+type: how-to
+page_title: How to Check the Expansion State of a Kendo UI ExpansionPanel
+slug: how-to-check-expansionpanel-state-kendo-ui
+tags: kendo-ui, expansionpanel, jquery, state, expanded, collapsed
+res_type: kb
+ticketid: 1671321
+---
+
+## Environment
+
+<table>
+<tbody>
+<tr>
+<td>Product</td>
+<td>Kendo UI ExpansionPanel for Progress® Kendo UI®</td>
+</tr>
+<tr>
+<td>Version</td>
+<td>2024.4.1112</td>
+</tr>
+</tbody>
+</table>
+
+## Description
+
+I need to check if an ExpansionPanel is expanded or collapsed within my application. How can I achieve this?
+
+This knowledge base article also answers the following questions:
+- How to determine if a Kendo UI ExpansionPanel is open?
+- How to programmatically check the state of a Kendo UI ExpansionPanel?
+
+## Solution
+
+To check the expanded or collapsed state of a Kendo UI ExpansionPanel, you can use custom logic. This approach involves checking for a specific class that indicates the panel's state. Although the Kendo UI ExpansionPanel does not provide a direct method to get its expanded state, the following steps allow you to determine it:
+
+- Use jQuery to check if the panel has the class `.k-expanded`. This class is present when the panel is in its expanded state. 
+
+Here is an example of how you can implement this logic:
+
+```dojo
+<button onclick="expandedState()">Get expanded state</button>
+    </br>
+    </br>  
+    <div id="expansionPanel">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+    <script>
+      $("#expansionPanel").kendoExpansionPanel({
+        subTitle: "Lorem ipsum"
+      });
+
+      function expandedState() {
+        let expanded;
+        if ($(".k-expander").hasClass("k-expanded")) {
+          expanded = true;
+        } else expanded = false;
+        console.log("Exanded:", expanded)
+      }
+    </script>
+```
+
+To programmatically toggle the state of the ExpansionPanel, use the `toggle()` method. For more information, refer to the [toggle() method documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/expansionpanel/methods/toggle).
+
+## See Also
+
+- [Kendo UI ExpansionPanel Toggle Method Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/expansionpanel/methods/toggle)
+- [Kendo UI ExpansionPanel Overview](https://docs.telerik.com/kendo-ui/controls/navigation/expansionpanel/overview)
diff --git a/docs/knowledge-base/how-to-lock-taskboard-items-kendo-ui.md b/docs/knowledge-base/how-to-lock-taskboard-items-kendo-ui.md
