Sync with Kendo UI Professional

Kendo Bot · Kendo Bot · commit 79612061646e · 2022-04-20T04:54:38.000+03:00
diff --git a/docs-aspnet/_config.yml b/docs-aspnet/_config.yml
@@ -544,9 +544,9 @@ navigation:
      "*/orgchart":
         isNew: true
         title: "OrgChart"
-     "*progressbar":
+     "html-helpers/interactivity/progressbar":
         title: "ProgressBar"
-     "*circularprogressbar":
+     "html-helpers/interactivity/circularprogressbar":
         title: "CircularProgressBar"
      "*qrcode":
         title: "QRCode"
diff --git a/docs-aspnet/html-helpers/data-management/grid/editing/overview.md b/docs-aspnet/html-helpers/data-management/grid/editing/overview.md
@@ -18,11 +18,65 @@ The Grid provides the following edit modes:
 * [Custom editors and validation]({% slug customediting_grid_aspnetcore %})
 * [WebAPI editing]({% slug webapi_editing_grid_aspnetmvc %})
 
+
+    
+## Getting Started
+
+To enable editing:
+
+1. Set the `editable` option: 
+    ```
+    @(Html.Kendo().Grid<ProductViewModel>()
+    .Name("Grid")
+    ...
+    .Editable(e => e.Enabled(true))
+    ```
+
+    The default edit mode is [Inline](http://127.0.0.1:4000/{{ site.platform }}/html-helpers/data-management/grid/editing/inline). To use a different edit mode, specify it: 
+        
+        .Editable(e => e.Mode(GridEditMode.PopUp))
+    
+    >For more information, refer to the [API options on the possible configurations](https://docs.telerik.com/{{ site.platform }}/api/Kendo.Mvc.UI.Fluent/GridBuilder#editablesystemactionkendomvcuifluentgrideditingsettingsbuildert).
+
+2. Declare the endpoint to which the updated records will be sent: 
+    ```
+    .DataSource(dataSource => dataSource
+        .Ajax()
+        .PageSize(20)
+        ...
+        .Update("Editing_Update", "Grid")
+    ```
+3. Specify the `Id` of the `Model` within the `DataSource` declaration: 
+
+    ```
+    .Model(model => model.Id(p => p.ProductID))
+    ```
+
+    >The `Model` method configures the model of the data source. For more information, refer to the article about the [`Model` definition](https://docs.telerik.com/{{ site.platform }}/html-helpers/datasource/model).
+
+4. On the server, the expected parameters must be the DataSource request and the same model as the edited one: 
+    
+    ```
+        [AcceptVerbs("Post")]
+        public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, ProductViewModel product)
+        {
+            if (product != null && ModelState.IsValid)
+            {
+                productService.Update(product);
+            }
+
+            return Json(new[] { product }.ToDataSourceResult(request, ModelState));
+        }
+    ```
+
+    >For runnable examples, refer to [the demos on implementing the editing approaches in the Grid](https://demos.telerik.com/{{ site.platform }}/grid/editing-inline).
+
 ## See Also
 
 * [Incell Editing by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/editing)
 * [Inline Editing by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/editing-inline)
 * [Popup Editing by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/editing-popup)
 * [Custom Editor by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/editing-custom)
 * [Custom Validation Editing by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/editing-custom-validation)
+* [Find Out More in the Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)
 * [Server-Side API](/api/grid)
diff --git a/docs-aspnet/html-helpers/data-management/grid/export/excel-export.md b/docs-aspnet/html-helpers/data-management/grid/export/excel-export.md
@@ -17,15 +17,15 @@ For a runnable example, refer to the [demo on Excel export by the Grid](https://
 
 To enable the Excel export option of the Grid:
 
-1. Include the corresponding toolbar command and set the export settings.
-    * [Toolbar configuration](/api/Kendo.Mvc.UI.Fluent/GridToolBarCommandFactory#excel)
-    * [Excel export configuration](/api/Kendo.Mvc.UI.Fluent/GridExcel{% if site.core %}Settings{% endif %}Builder)
+1. Include the [toolbar configuration](/api/Kendo.Mvc.UI.Fluent/GridToolBarCommandFactory#excel).
+1. Set the [export options](/api/Kendo.Mvc.UI.Fluent/GridExcel{% if site.core %}Settings{% endif %}Builder).
 1. To take full advantage of the Excel export feature, download the JSZip library and include the file before the Kendo UI JavaScript files in the `Layout.cshtml`. For more information, refer to the article with the [requirements]({% if site.core %}{% slug exportsupport_core %}{% else %}{% slug exportsupport_aspnetmvc %}{% endif %}#jszip-library).
     
     ```HtmlHelper
         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
         <script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.js"></script>
         <script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/kendo.all.min.js"></script>
+
         @(Html.Kendo().Grid<ProductViewModel>()
             .Name("grid")
             .ToolBar(tools => tools.Excel())
@@ -42,6 +42,7 @@ To enable the Excel export option of the Grid:
         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
         <script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.js"></script>
         <script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/kendo.all.min.js"></script>
+
         <kendo-grid name="grid">
             <toolbar>
                 <toolbar-button name="excel"></toolbar-button>
@@ -59,7 +60,7 @@ To enable the Excel export option of the Grid:
 
 To initiate the Excel export, press the **Toolbar** button or use the [Grid client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid) and call the [`saveAsExcel`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/saveasexcel) method.
 
-> Browser versions, such as Internet Explorer 9 and earlier and Safari, require the implementation of a server proxy.
+> Browser versions, such as Internet Explorer 9 and earlier, and Safari, require the implementation of a server proxy.
 
         [HttpPost]
         public ActionResult Pdf_Export_Save(string contentType, string base64, string fileName)
@@ -71,13 +72,13 @@ To initiate the Excel export, press the **Toolbar** button or use the [Grid clie
 
 ## Outputting the Result
 
-Through its default configuration, the Telerik UI Grid for {{ site.framework }} exports the current page of the data with sorting, filtering, grouping, and aggregates applied. To export all pages, refer to [this section](#exporting-all-data).
+Through its default configuration, the Telerik UI Grid for {{ site.framework }} exports the current page of the data with sorting, filtering, grouping, and aggregates applied. To export all pages, refer to the section on [exporting all data](#exporting-all-data).
 
-The Grid uses the current column order, visibility, and dimensions to generate the Excel file. It does not export the current CSS theme in the Excel file. For more information on changing the visual appearance of the Excel document, refer to [this section](#customizing-excel-documents).
+The Grid uses the current column order, visibility, and dimensions to generate the Excel file. It does not export the current CSS theme in the Excel file. For more information on changing the visual appearance of the Excel document, refer to the section about [customizing the Excel documents](#customizing-excel-documents).
 
 > * The Grid exports only data-bound columns. Template and command columns are ignored.
-> * The `Format` option is not used during export. For more information on this, refer to [this section](#defining-the-column-format).
-> * The `ClientTemplate` option is not used during export. For more information on this, refer to [this section](#setting-the-column-templates).
+> * The `Format` option is not used during export. For more information, refer to the section about [defining the column format](#defining-the-column-format).
+> * The `ClientTemplate` option is not used during export. For more information, refer to the section on [setting the column templates](#setting-the-column-templates).
 
 ## Exporting All Data
 
@@ -116,7 +117,7 @@ By default, the Telerik UI Grid for {{ site.framework }} exports only the curren
 
 ## Customizing Excel Documents
 
-The [`ExcelExport()`](/api/Kendo.Mvc.UI.Fluent/GridEventBuilder#excelexportsystemstring) event allows the customization of the generated Excel document. The `workbook` event argument exposes the generated Excel workbook configuration. For more information on how the Excel documents work, refer to the article on [Excel export in Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/framework/excel/introduction).
+The [`ExcelExport()`](/api/Kendo.Mvc.UI.Fluent/GridEventBuilder#excelexportsystemstring) event allows the customization of the generated Excel document. The `workbook` event argument exposes the generated Excel workbook configuration. For more information on how the Excel documents work, refer to the article on [Excel export in Kendo UI for jQuery]({% slug introduction_excelexport_kendoui %}).
 
 1. Attach an excel export handler.
 
@@ -129,7 +130,7 @@ The [`ExcelExport()`](/api/Kendo.Mvc.UI.Fluent/GridEventBuilder#excelexportsyste
         )
     ```
 
-1. In the handler, manipulate the generated workbook. The example alternates the [background color of the rows cells](https://docs.telerik.com/kendo-ui/api/javascript/ooxml/workbook/configuration/sheets.rows.cells.background).
+1. In the handler, manipulate the generated workbook. The example alternates the [background color of the row cells](https://docs.telerik.com/kendo-ui/api/javascript/ooxml/workbook/configuration/sheets.rows.cells.background).
 
         <script>
             function excelExport(e) {
@@ -225,11 +226,12 @@ The [page on creating a custom number format](https://support.office.com/en-us/a
         </script>
 
 {% if site.mvc %}
-## Use the Detail Template
+
+## Using the Detail Template
 
 The Kendo UI Grid does not export its `DetailTemplate` for the same reason it does not export the column templates. If the detail template contains another Grid, follow [this runnable how-to example]({% slug howto_detailgridexcelexport_aspnetmvcgrid %}).
 
-## Export Multiple Grids
+## Exporting Multiple Grids
 
 For more information on how to export multiple Grids to a separate Excel sheet in a single Excel document, refer to [this runnable how-to example]({% slug howto_multiplegridexport_aspnetmvcgrid %}).
 {% endif %}
@@ -238,25 +240,25 @@ For more information on how to export multiple Grids to a separate Excel sheet i
 
 To export huge datasets to Excel, use the [RadSpreadStreamProcessing library](https://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/overview) which is part of [Telerik Document Processing (TDP) by Progress](https://docs.telerik.com/devtools/document-processing/introduction).
 
-> The {{ site.framework }} version is in development. For updates, check [this](https://feedback.telerik.com/document-processing/1356226-document-processing-provide-version-for-net-core) feature request.
+> The {{ site.framework }} version is in development. For updates, refer to [this feature request](https://feedback.telerik.com/document-processing/1356226-document-processing-provide-version-for-net-core).
 
-## Exclude Column From Exporting
+## Excluding Columns from Exporting
 
-In some scenarios, you might want to hide given column or multiple columns from being exported. This can be achieved using the [Exportable](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.exportable) setting.
+In some scenarios, you might want to hide given column or multiple columns from being exported. This can be achieved using the [`Exportable`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.exportable) setting.
 
 ```HtmlHelper
 columns.Bound(p => p.ProductName).Exportable(false);
 ```
 
-It can also be set in a detailed fashion containing different values for Excel and PDF exporting modes, providing separate options for each:
+You can also set `Exportable` in a detailed fashion to include different values for Excel and PDF exporting modes, providing separate options for each:
 
 ```HtmlHelper
 columns.Bound(p => p.ProductName).Exportable(x=> x.Pdf(true).Excel(false));
 ```
 
-In some scenarios, you want to include columns instead of excluding them. You may have columns defined in the grid which are not displayed in View mode, but you'd like to show them in the exported file. In this case, setting `.Exportable(true)` will not work automatically. You can rather try using `.Exportable(x=> x.Pdf(false).Excel(true));` specifically.
+In some scenarios, you may want to include instead of exclude columns. You can have defined Grid columns which are not displayed in the View mode and show them in the exported file. In this case, setting `.Exportable(true)` will not work automatically and you'll need to specifically use `.Exportable(x=> x.Pdf(false).Excel(true));`.
 
-It is also important to understand the difference between .Hidden() and .Visible() properties of a grid column. The first one will hide the column only visually using CSS. The second one will cause the column not to be rendered at all.
+It is also important to note the difference between the `.Hidden()` and `.Visible()` properties of a Grid column. `.Hidden()` will hide the column only visually by using CSS. `.Visible()` will prevent the column from rendering at all.
 
 
 ## Known Limitations
diff --git a/docs-aspnet/html-helpers/data-management/grid/how-to/editing/custom-popup-editor.md b/docs-aspnet/html-helpers/data-management/grid/how-to/editing/custom-popup-editor.md
@@ -6,11 +6,36 @@ previous_url: /helpers/data-management/grid/how-to/editing/custom-popup-editor
 slug: howto_usecustompopupeditors_gridaspnetmvc
 ---
 
-# Use Custom Popup Editors
+# Customize the Popup Editors in the Grid
 
-To see the example, refer to the project on how to [customize the popup editor of the Kendo UI Grid when the mode is configured to `popup`](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/custom-popup-editor).
+The Grid provides an option for editing its data in a popup. You can modify the popup window by using templates. 
+
+To customize it the popup editor:
+
+1. Declare the name of the file that will render the content of the popup window by using the [`TemplateName`](https://docs.telerik.com/{{ site.platform }}/api/Kendo.Mvc.UI.Fluent/GridEditingSettingsBuilder#templatenamesystemstring) extension method.
+
+    ```
+    @(Html.Kendo().Grid<TelerikProject.Models.Customer>()
+        .Name("grid")
+        .Editable(e=>e.Mode(GridEditMode.PopUp).TemplateName("CustomPopUp"))
+        ...
+    ```
+
+2. Create the editor template file. Its name must match the one declared in the `TemplateName()` configuration. By default, the editor templates that the Grid is using are located in the `~/Views/Shared/EditorTemplates` directory. Save the new template in this directory too.
+
+3. Implement the new editor template.
+
+    ```CustomPopUp.cshtml
+        @model TelerikProject.Models.Customer
+
+        @Html.Kendo().TextBoxFor(m => m.ContactName)
+        @Html.Kendo().NumericTextBoxFor(m => m.Age)
+        @Html.Kendo().TextBoxFor(m => m.Country)
+    ```
+
+For a full example, refer to the project on how to [customize the popup editor of the Kendo UI Grid when the mode is configured to `popup`](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/custom-popup-editor).
 
 ## See Also
 
 * [Overview of the Grid HtmlHelper]({% slug htmlhelpers_grid_aspnetcore_overview %})
-* [GridBuilder API Reference](https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridBuilder)
+* [GridBuilder API Reference](https://docs.telerik.com/{{ site.platform }}/api/Kendo.Mvc.UI.Fluent/GridBuilder)
diff --git a/docs-aspnet/html-helpers/data-management/grid/overview.md b/docs-aspnet/html-helpers/data-management/grid/overview.md
@@ -52,47 +52,46 @@ The following example demonstrates how to define the Grid.
 ```
 {% if site.core %}
 ```TagHelper
-    <kendo-grid name="grid"></kendo-grid>
+    <kendo-grid name="grid">
+        <columns>
+            <column field="ContactName" width="140"></column>
+            <column field="ContactTitle" width="190"></column>
+            <column field="CompanyName"></column>
+            <column field="Country" width="110"></column>
+        </columns>
+        <datasource type="DataSourceTagHelperType.Ajax">
+            <transport>
+                <read url="@Url.Action("Customers_Read","Grid")"/>
+            </transport>
+        </datasource>
+    </kendo-grid>
 ```
 {% endif %}
 ```Controller
-    namespace Kendo.Mvc.Examples.Controllers
+    public class GridController : Controller
     {
-	    public partial class GridController : BaseController
+        public ActionResult Customers_Read([DataSourceRequest] DataSourceRequest request)
         {
-            [Demo]
-            public IActionResult Index()
+            var result = Enumerable.Range(0, 50).Select(i => new Customer
             {
-                return View();
-            }
-
-		    public IActionResult Customers_Read([DataSourceRequest] DataSourceRequest request)
-		    {
-		    	return Json(GetCustomers().ToDataSourceResult(request));
-		    }
+                CompanyName = "Company Name " + i,
+                ContactName = "Contact Name " + i,
+                ContactTitle = "Contact Title " + i,
+                Country = "Coutry " + i
+            });
 
-		    private static IEnumerable<CustomerViewModel> GetCustomers()
-		    {
-                using (var northwind = new SampleEntitiesDataContext())
-                {
-                    return northwind.Customers.Select(customer => new CustomerViewModel
-                    {
-                        CustomerID = customer.CustomerID,
-                        CompanyName = customer.CompanyName,
-                        ContactName = customer.ContactName,
-                        ContactTitle = customer.ContactTitle,
-                        Address = customer.Address,
-                        City = customer.City,
-                        Region = customer.Region,
-                        PostalCode = customer.PostalCode,
-                        Country = customer.Country,
-                        Phone = customer.Phone,
-                        Fax = customer.Fax,
-                        Bool = customer.Bool
-                    }).ToList();
-                }
-		    }
-        }    
+            var dsResult = result.ToDataSourceResult(request);
+            return Json(dsResult);
+        }
+    }
+```
+```Customer.cs
+    public class Customer
+    {
+        public string ContactName { get; set; }
+        public string CompanyName { get; set; }
+        public string Country { get; set; }
+        public string ContactTitle { get; set; }
     }
 ```
 
@@ -192,7 +191,6 @@ The Grid configuration options are passed as attributes of the helper. The Grid
     * [Globalization]({% slug globalization_grid_aspnetcore %})
     * [Accessibility]({% slug accessibility_aspnetcore_grid %})
 
-For more information on implementing specific scenarios, refer to the [**Knowledge Base**](/knowledge-base) section.
 
 ## Events
 
@@ -267,13 +265,28 @@ You can subscribe to all Grid events and then use them to further customize the
 ## Referencing Existing Instances
 
 To refer to an existing Grid instance, use the [`jQuery.data()`](https://api.jquery.com/jQuery.data/) method. Once a reference is established, use the [Grid client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods) to control its behavior.
-
+```
         <script>
         $(function() {
             // The Name() of the Grid is used to get its client-side instance.
             var grid = $("#grid").data("kendoGrid");
         });
         </script>
+```
+
+## Learning Resources
+
+* [Knowledge Base](/knowledge-base)
+{% if site.core %}
+* [Forum Discussions](https://www.telerik.com/forums/aspnet-core-ui?tagId=753) 
+* [Demos](https://demos.telerik.com/aspnet-core/grid)
+{% endif %}
+{% if site.mvc %}
+* [Forum Discussions](https://www.telerik.com/forums/aspnet-mvc?tagId=754) 
+* [Demos](https://demos.telerik.com/aspnet-mvc/grid)
+{% endif %}
+* [How-To Examples](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid)
+
 
 ## See Also
 
diff --git a/docs-aspnet/html-helpers/editors/colorpalette/overview.md b/docs-aspnet/html-helpers/editors/colorpalette/overview.md
