Grouping Breaks DropDownList Sorting

5 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. Kendo UI is VS 2017 Ready
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 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!
     
  5. 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?
  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 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!
     
Back to Top
Kendo UI is VS 2017 Ready