Sync with Kendo UI Professional

Author: kendo-bot

docs-aspnet/knowledge-base/grid-custom-sorting-icons.md

@@ -0,0 +1,139 @@
+---
+title: Customizing the Grid Column Sorting Icons
+description: An example on how to change the default column sorting icons when using the Telerik UI for {{ site.framework }} Grid.
+type: how-to
+page_title: Customizing the Grid Column Sorting Icons
+slug: grid-custom-sorting-icons
+tags: grid, sorting, icons, columns, header, template
+res_type: kb
+---
+
+## Environment
+
+<table>
+ <tr>
+  <td>Product</td>
+  <td>{{ site.product }} Grid</td>
+ </tr>
+ <tr>
+  <td>Progress {{ site.product }} version</td>
+  <td>Created with the 2023.3.1010 version</td>
+ </tr>
+</table>
+
+## Description
+How can I change the default sorting icons of the Grid columns?
+
+## Solution
+To set custom ascending and descending sorting icons when a specified Grid column is sorted and display a double arrow icon when the column is not sorted, follow these steps:
+
+1. Add the following CSS style to hide the default sorting icons:
+```css
+#grid .k-grid-header .k-cell-inner .k-link .k-sort-icon {
+    display: none;
+}
+```
+
+2. Handle the `DataBound` event of the Grid that triggers each time a specified column is sorted (the sorting data operation is performed on the server (`ServerOperation(true)`).
+```HtmlHelper
+@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
+    .Name("grid")
+    .Sortable(sortable => sortable
+        .AllowUnsort(true)
+        .SortMode(GridSortMode.Mixed)
+        .ShowIndexes(true))
+    .Events(ev => ev.DataBound("onDataBound"))
+    // other grid configuration
+)
+```
+{% if site.core %}
+```TagHelper
+  @addTagHelper *, Kendo.Mvc
+
+    <kendo-grid name="grid" on-data-bound="onDataBound">
+            <sortable enabled="true" allow-unsort="true" mode="mixed" show-indexes="true" />
+            <!-- Other configuration -->
+    </kendo-grid>
+ ```
+{% endif %}
+
+3. Within the `DataBound` event handler, define the desired SVG icons as explained in the [SVG Icons section in the documentation](https://docs.telerik.com/{{ site.platform }}/styles-and-layout/sass-themes/svg-icons#setting-svg-icons-from-client). Then, access the currently sorted fields through the [`sort()`](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/sort) method of the DataSource and append the respective icon (ascending or descending).
+
+```javascript
+<script>
+function onDataBound(e) {
+    let grid = this;
+    let sorts = grid.dataSource.sort(); // Get the currently sorted fields.
+
+    var nonSortableIcon = kendo.ui.icon({ icon: 'caret-alt-expand', type: 'svg' }); // Specify the desired SVG icon for the non-sorted columns.
+    var descSortIcon = kendo.ui.icon({ icon: 'caret-alt-down', type: 'svg' }); // Specify the desired SVG icon for descending order.
+    var ascSortIcon = kendo.ui.icon({ icon: 'caret-alt-up', type: 'svg' }); // Specify the desired SVG icon for ascending order.
+
+    if(sorts == undefined) { // Check if the Grid is sorted initially.
+        grid.thead.find("th .k-cell-inner .k-link").each(function(){  // Loop through the Grid column headers.
+            $(this).append(nonSortableIcon); // Add the "nonSortableIcon " icon on all column headers.
+        });
+    } else {
+        // Reset the sort icons.
+        grid.thead.find("th .k-cell-inner .k-link").each(function(){ 
+            if($(this).find("span.k-svg-i-caret-alt-expand").length == 0) {
+                $(this).find("span.k-icon").remove(); // Remove the "descSortIcon"/"ascSortIcon" icon.
+                $(this).append(nonSortableIcon); // Add the default icon.
+            }
+        });
+
+        $.each(sorts, function(i,value) { // Loop through the sorted fields.
+            let colHeader = grid.thead.find(`th[data-field='${value.field}']`); // Get the column header of the sorted column.
+            if(colHeader) {
+                colHeader.find(".k-link span.k-icon").remove(); // Remove the default icon.
+                if(value.dir == "asc") {
+                    colHeader.find(".k-link").append(ascSortIcon); //Append the custom "ascSortIcon".
+                }
+                if(value.dir == "desc") {
+                    colHeader.find(".k-link").append(descSortIcon); //Append the custom "descSortIcon".
+                }
+            }
+        });
+    }
+}
+</script>
+```
+{% if site.core %}
+For a runnable example based on the code above, refer to the following REPL samples:
+
+* [Sample code with the Grid HtmlHelper](https://netcorerepl.telerik.com/cyYvlVFq13LOju7R01)
+* [Sample code with the Grid TagHelper](https://netcorerepl.telerik.com/QSaPFLPq2056hwO401)
+{% else %}
+For a runnable example based on the code above, refer to the [REPL example on customizing the default sorting icons of the Grid columns](https://netcorerepl.telerik.com/cyYvlVFq13LOju7R01).
+{% endif %}
+
+## More {{ site.framework }} Grid Resources
+
+* [{{ site.framework }} Grid Documentation]({%slug htmlhelpers_grid_aspnetcore_overview%})
+
+* [{{ site.framework }} Grid Demos](https://demos.telerik.com/{{ site.platform }}/grid/index)
+
+{% if site.core %}
+* [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-core-ui/grid)
+
+* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
+
+* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
+
+{% else %}
+* [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-mvc/grid)
+
+* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
+
+* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
+{% endif %}
+
+## See Also
+
+* [Client-Side API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)
+* [Server-Side API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/grid)
+{% if site.core %}
+* [Server-Side TagHelper API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/grid)
+{% endif %}
+* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
+* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

src/kendo.core.js

@@ -1882,7 +1882,7 @@ function pad(number, digits, end) {
         };
     }
 
-    function wrap(element, autosize, resize, shouldCorrectWidth = true) {
+    function wrap(element, autosize, resize, shouldCorrectWidth = true, autowidth) {
         var percentage,
             outerWidth = kendo._outerWidth,
             outerHeight = kendo._outerHeight,
@@ -1908,7 +1908,7 @@ function pad(number, digits, end) {
                 $("<div/>")
                 .addClass("k-child-animation-container")
                 .css({
-                    width: width,
+                    width: autowidth ? "auto" : width,
                     height: height
                 }));
             parent = element.parent();

src/kendo.data.js

@@ -3927,7 +3927,7 @@ var __meta__ = {
                 options.aggregate = convertDescriptorsField(options.aggregate, that.reader.model);
             }
 
-            if (!that.options.groupPaging) {
+            if (!that.options.groupPaging || !(that.options.serverPaging && that.options.serverGrouping)) {
                 delete options.groupPaging;
             }
 
@@ -4527,6 +4527,7 @@ var __meta__ = {
             }
 
             data.groupPaging = true;
+
             clearTimeout(that._timeout);
             that._timeout = setTimeout(function() {
                 that._queueRequest(data, function() {

src/kendo.list.js

@@ -1235,6 +1235,7 @@ var __meta__ = {
                 animation: list.options.animation,
                 isRtl: support.isRtl(list.wrapper),
                 autosize: list.options.autoWidth,
+                autowidth: list.options.autoWidth,
                 activate: () => {
                     this._refreshFloatingLabel();
                 },

src/kendo.pager.js

@@ -288,8 +288,11 @@ var __meta__ = {
                 } else {
                     if (width <= 600) {
                         info.hide();
-                    }
-                    if (options.numeric) {
+                        if (options.numeric) {
+                            that._numericSelect.show();
+                            that.list.hide();
+                        }
+                    } else if (options.numeric) {
                         that._numericSelect.hide();
                     }
                 }

src/kendo.popup.js

@@ -166,6 +166,7 @@ var __meta__ = {
             viewport: window,
             copyAnchorStyles: true,
             autosize: false,
+            autowidth: false,
             modal: false,
             adjustSize: {
                 width: 0,
@@ -270,7 +271,7 @@ var __meta__ = {
                     that._toggleResize(true);
                 }
 
-                that.wrapper = wrapper = kendo.wrap(element, options.autosize, options._resizeOnWrap, shouldCorrectWidth)
+                that.wrapper = wrapper = kendo.wrap(element, options.autosize, options._resizeOnWrap, shouldCorrectWidth, options.autowidth)
                     .css({
                         overflow: HIDDEN,
                         display: "block",

tests/core/wrap.js

@@ -54,6 +54,13 @@ it("container with percent width produces wrapper with percent width", function(
     assert.isOk(wrap.children()[0].style.width == "50%");
 });
 
+it("k-child-animation-container has auto width when autowidth is set to true", function() {
+    span.width("100px");
+
+    kendo.wrap(span, true, undefined, undefined, true);
+    assert.isOk(span.parent().attr("style") === "width: auto;");
+});
+
     });
 }());
 

tests/data/datasource/group-paging.js

@@ -342,10 +342,11 @@
             assert.equal(updateOuterRangesLengthStub.calls("_updateOuterRangesLength"), 1);
         });
 
-        it("_params includes a groupPaging parameter if groupPaging is enabled", function() {
+        it("_params does not include groupPaging parameter if groupPaging is enabled but server operations are false", function() {
             var dataSource = remoteDataSource(null, {
                 total: 100,
                 serverPaging: false,
+                serverGrouping: false,
                 group: {
                     field: 'ShipAddress'
                 },
@@ -354,7 +355,7 @@
 
             var params = dataSource._params();
 
-            assert.isOk(typeof params.groupPaging != "undefined");
+            assert.isOk(typeof params.groupPaging == "undefined");
         });
 
         it("_params does not include a groupPaging parameter if groupPaging is not enabled", function() {