kendo grid initial sort visual

6 posts, 0 answers
  1. miki
    miki avatar
    2 posts
    Member since:
    Jul 2016

    Posted 01 Aug 2016 Link to this post

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

  2. miki
    miki avatar
    2 posts
    Member since:
    Jul 2016

    Posted 01 Aug 2016 in reply to miki Link to this post

    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.

  3. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1292 posts

    Posted 02 Aug 2016 Link to this post

    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.
  4. Samad
    Samad avatar
    6 posts
    Member since:
    Jan 2014

    Posted 27 Aug 2020 in reply to Dimiter Topalov Link to this post

    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?

  5. Samad
    Samad avatar
    6 posts
    Member since:
    Jan 2014

    Posted 27 Aug 2020 in reply to Samad Link to this post

    Sorry the dojo I m talking about is: http://dojo.telerik.com/iLIDuKEj
  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 31 Aug 2020 Link to this post

    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/.

Back to Top