Grouping Breaks DropDownList Sorting

7 posts, 0 answers
  1. Jamie
    Jamie avatar
    6 posts
    Member since:
    Feb 2015

    Posted 10 Jul 2015 Link to this post

    I'm trying to create a drop down list with grouping where I custom sort the data by group in a non-alphabetical way.  I've created a sort function that I run on the data before I pass it to the Kendo DataSource and if I output the array to the console at that point the data is in the correct order.  Once I create the Kendo DropDownList though it seems to break the sort and puts back to alphabetical order.  I further tested things by turning grouping off on the drop down and in that case the drop down displays the data in the correct order as sorted by my sort function.  Any ideas?

     The data is an array of objects that look like:

    {
      Value: "value",
      Group: "group"
    }

    The sort function is

     

    newData.sort(function(a, b) {
      var av, bv;
     
      switch(a.Group.toLowerCase()) {
        case "group 1":
          av = 1;
          break;
        case "group 2":
          av=2;
          break;
        default:
          av=3;
          break;
      }
     
      switch(b.Group.toLowerCase()) {
        case "group 1":
          bv = 1;
          break;
        case "group 2":
          bv=2;
          break;
        default:
          bv=3;
          break;
      }
     
      return av-bv;
    });

    The function to build the drop down is

     

    $.fn.sampleDD = function(options) {
      var ds = new kendo.data.DataSource({
        transport: {
          read: function(opts) {
            $.ajax({
              type: "GET",
              url: "<SharePoint REST Service URL>",
              dataType: "json",
              success: function(results) {
                //converts the data a bit to account for SharePoint's weird data returns
     
                //runs the sort function referenced above
     
                opts.success(sortedResults); //sortedResults is created from the conversion and sorting
              },
              error: function(results) {
                opts.error(results);
              }
            });
          }
        }
      });
     
      //listed separately because there's an if statement here that doesn't always group it
      ds.group({
        field: "Group"
      })
     
      return this.kendoDropDownList({
        dataTextField: "Value",
        dataValueField: "Value",
        dataSource: ds,
        optionLabel: "Make a selection",
      }).data("kendoDropDownList");
      });
    };

     which is then called by

    $("#dropDown").sampleDD();

  2. Jamie
    Jamie avatar
    6 posts
    Member since:
    Feb 2015

    Posted 13 Jul 2015 in reply to Jamie Link to this post

    I haven't figured out a solution yet but I've figured out the "problem".  It looks like by design, the datasource sorts grouped sets of data; you can choose to have it sort in ascending or descending order but I haven't found a way to write a custom sort function.  Luckily the specific dataset I'm using now, sorting in descending order puts it in the order I want but I know another case will come that this isn't true so if anyone knows of a way to do a custom sort in this case please share.
  3. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3717 posts

    Posted 14 Jul 2015 Link to this post

    Hello Jamie,

    Your last assumption is absolute correct. The DataSource groups are always sorted either in "asc" or "desc" order. If you would like to apply custom sorting (basically custom grouping), then you can set serverGrouping option to true and then group the data manually. Thus you can apply the desired custom sort over the already grouped data.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Jamie
    Jamie avatar
    6 posts
    Member since:
    Feb 2015

    Posted 14 Jul 2015 in reply to Georgi Krustev Link to this post

    Would this work even if the data was local and not coming from a remote source / server?
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3717 posts

    Posted 16 Jul 2015 Link to this post

    Hello Jamie,

    Yes, it will. Basically, the serverGrouping option says when to group on the client (internally in the data source) or to rely that the grouped data will be supplied externally. That being said, if you are populating data through transport.read as a function then it should work just fine:
    serverGrouping: true,
    transport: {
      read: function(options) {
          //retrieve grouped data
          // or group it on the client manually
     
          options.success([grouped data]);
      }
    }

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Morten
    Morten avatar
    277 posts
    Member since:
    Jul 2012

    Posted 11 Jan in reply to Georgi Krustev Link to this post

    Hello Georgi

    if I set serverGrouping: true the visual UI grouping (http://demos.telerik.com/kendo-ui/dropdownlist/grouping) disappears from the dropdownlist. If I set group: { field: "category", dir: "desc" } the client side code fails.

    I'd like to keep the the UI grouping of the dropdownlist, and sort by multiple fields (group by country order by type, name)

    Is this possible?

     

  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1810 posts

    Posted 13 Jan Link to this post

    Hello Morten,

    When serverGrouping is enabled the DataSource relies on the server logic to receive the grouped and sorted data. Could you please share the exact data that is returned from the server after the custom sorting and grouping on the server is applied?

    For example the Kendo UI DataSource expects the data to be structured as shown in the example below the schema.groups article. 

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top