Grouping Breaks DropDownList Sorting

[Jamie]

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();

[Jamie]

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.

[Georgi Krustev]

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

 

 

[Jamie]

Would this work even if the data was local and not coming from a remote source / server?

[Georgi Krustev]

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

 

 

[Morten]

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?

 

[Boyan Dimitrov]

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