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

Grouping Breaks DropDownList Sorting

6 Answers 318 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Jamie
Top achievements
Rank 1
Veteran
Jamie asked on 10 Jul 2015, 07:25 PM

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

6 Answers, 1 is accepted

Sort by
0
Jamie
Top achievements
Rank 1
Veteran
answered on 13 Jul 2015, 11:55 AM
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.
0
Georgi Krustev
Telerik team
answered on 14 Jul 2015, 11:54 AM
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!
 
0
Jamie
Top achievements
Rank 1
Veteran
answered on 14 Jul 2015, 04:06 PM
Would this work even if the data was local and not coming from a remote source / server?
0
Georgi Krustev
Telerik team
answered on 16 Jul 2015, 09:18 AM
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!
 
0
Morten
Top achievements
Rank 1
Veteran
Iron
answered on 11 Jan 2017, 06:41 AM

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?

 

0
Boyan Dimitrov
Telerik team
answered on 13 Jan 2017, 07:35 AM

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.
Tags
DropDownList
Asked by
Jamie
Top achievements
Rank 1
Veteran
Answers by
Jamie
Top achievements
Rank 1
Veteran
Georgi Krustev
Telerik team
Morten
Top achievements
Rank 1
Veteran
Iron
Boyan Dimitrov
Telerik team
Share this question
or