This is a migrated thread and some comments may be shown as answers.

kendo grid initial sort visual

5 Answers 671 Views
Grid
This is a migrated thread and some comments may be shown as answers.
miki
Top achievements
Rank 1
miki asked on 01 Aug 2016, 11:00 AM

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'
            }
        };

5 Answers, 1 is accepted

Sort by
0
miki
Top achievements
Rank 1
answered on 01 Aug 2016, 11:08 AM

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.

0
Dimiter Topalov
Telerik team
answered on 02 Aug 2016, 03:27 PM
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
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Samad
Top achievements
Rank 1
Veteran
answered on 27 Aug 2020, 05:01 PM

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?

0
Samad
Top achievements
Rank 1
Veteran
answered on 27 Aug 2020, 05:02 PM
Sorry the dojo I m talking about is: http://dojo.telerik.com/iLIDuKEj
0
Alex Hajigeorgieva
Telerik team
answered on 31 Aug 2020, 09:40 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
miki
Top achievements
Rank 1
Answers by
miki
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Samad
Top achievements
Rank 1
Veteran
Alex Hajigeorgieva
Telerik team
Share this question
or