kendo grid initial sort visual

[miki]

I am trying to define an initial sort.

as far as the request, the sort is working and the data comes sorted.

the problem is that in the header, the visual arrow of sort column and direction is not shown.

only after physical click on the column it shows.
please help, this is the used code:

$scope.mainGridOptions = {
            dataSource: {
                sort: { field: "email", dir: "desc"},
                serverPaging: true,
                serverSorting: true,

                pageSize: 50,
                transport: {
                    read: {
                        type: "GET",
                        dataType: "json",
                        url: "/p/enduser/licenses/allocation/listWithDevices",
                        headers: {
                            "X-AUTH-TOKEN": authService.getToken()
                        }
                    },
                    parameterMap: function(data, type) {
                        if (type == "read") {
                            console.log(data);
                            return {
                                pageSize: data.take,
                                page: (data.skip/data.take),
                                sortBy: data.sort?data.sort[0].field:null,
                                sortDir: data.sort?data.sort[0].dir:null
                            }
                        }
                    }
                },

                schema: { data: "items", total: "itemsCount" }
            },
            height: $scope.resize(),
            scrollable: {
                virtual: true
            },
            sortable: {
                allowUnsort: false,
                mode:'single'
            }
        };

[miki]

Here is a demo i made in dojo:

http://dojo.telerik.com/esuQI/2

(Even though the web-server doesnt support sorting, the request is going as sort request, but the visual doesnt represent it.)

after physical sort on column the arrow appears.

[Dimiter Topalov]

Hello Miki,

If the server is properly configured, the initial sorting is also visualized in the column header cell:

http://dojo.telerik.com/axOga

The visual indication works as expected for client side sorting via the dataSource.sort option as well:

http://dojo.telerik.com/EYiwE

You can find out more about server data operations in the following sections of our documentation:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverSorting

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/web-api-server-operations

I hope this helps, but do not hesitate to contact us if you need further assistance.

Regards,
Dimiter Topalov
Telerik by Progress

[Samad]

Hi Dimiter,

I have a sorting issue with names containing multiple inner spaces. I've rerun the above DOJO with the folowing product list:

var products = [
                {ProductName:"Chai  A10", UnitPrice:18, UnitsInStock:39, Disccontinued:false},
                              {ProductName:"Chai  A30", UnitPrice:19, UnitsInStock:17, Disccontinued:false},
                              {ProductName:"Chai A20", UnitPrice:10, UnitsInStock:13, Disccontinued:false}
                             ].

"Chai  A10" and "Chai  A30" contain 2 spaces while "Chai A20" contains 1 space and they are all displayed the same though. However, the sorting is not done well. Can you retest and suggest a solution pls?

[Samad]

Sorry the dojo I m talking about is: http://dojo.telerik.com/iLIDuKEj

[Alex Hajigeorgieva]

Hello, Samad,

The Kendo UI Grid cells has a white-space:normal; CSS rule applied. Therefore, it is expected that the white spaces are collapsed:

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

The string comparison containing those spaces is also as expected:

If you wish to ignore them, you should either trim them before you pass them to the data source data or, you can use the sort.compare function for the initial sort:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/sort#sortcompare

And for the column for user sort actions:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.sortable#columnssortablecompare

Kind Regards,
Alex Hajigeorgieva
Progress Telerik