No data found when using serverGrouping

[Paolo]

In my Autocomplete I need to show grouped items, but groups have to be sorted non-alphabetically.

As the Autocomplete doesn't have such option, I tried using the serverGrouping option, but I guess I'm doing something wrong.

In fact the list of groups and items is correctly displayed (see attached picture #1), but typing any character in the input shows the NO DATA FOUND message (see attached picture #2 - typing "c" should show "Coffee" and "Cake"). Additionally items sorting doesn't seem to work.

This is the Autocomplete and its DataSource initialization code:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
          url: "xxxxxxxxxxxxxxxxxxxxxx",
          dataType: "json"
        }
    },
    schema: {
        groups: 'groups',
    },
    serverGrouping: true,
    group: {
        field: "category",
    },
    sort: { field: "name", dir: "asc" }
});

$("#destinationIn").kendoAutoComplete({
    dataTextField: "name",
    height: 400,
    placeholder: "Ovunque",
    dataSource: dataSource,
});

 

This is the json data returned by the server call:

{
   "groups":[
      {
         "field":"category",
         "value":"Beverages",
         "items":[
            { "name":"Lemonade" },
            { "name":"Tea" },
            { "name":"Coffee" }
         ]
      },
      {
         "field":"category",
         "value":"Seafood",
         "items":[
            { "name":"Salmon" },
            { "name":"Mackerel" }
         ]
      },
      {
         "field":"category",
         "value":"Desserts",
         "items":[
            {  "name":"Ice cream" },
            { "name":"Cake" }
         ]
      }
   ]
}

 

Why the Autocomplete doesn't seem to work? Am I missing something in the Autocomplete settings, or DataSource settings, or JSON being sent by the server?

And why the sorting of items doesn't work?

[Paolo]

This is my example in Dojo (except the server request, because the actual URL is not yet live):

https://dojo.telerik.com/uXeLoWOR

[Martin]

Hello, Paolo,

As you are using ServerGrouping, the filtering and sorting operations should be performed on the server as well. Please try enabling the configurations to see if that will resolve the problem. 

If not, please share a small Dojo example that reproduces the issue. Feel free to use our demos as starting point in order to use the demo service to get the data.

Looking forward to your reply.

Regards,
Martin
Progress Telerik

[Paolo]

I want to avoid server filtering, which is expensive (a query on the database each time a character is typed) and useless for the purpose of just grouping the suggestions in a non-alphabetical order.

Anyway I think I've found a much simpler solution: I removed the serverGrouping and schema options on the DataSource, then changed the data like this:

data: [
    { name: "Salmon", category: "2.Seafood" },
    { name: "Mackerel", category: "2.Seafood },
    { name: "Ice cream", category: "3.Desserts" },
    { name: "Cake", category: "3.Desserts" },
    { name: "Lemonade", category: "1.Beverages" },
    { name: "Tea", category: "1.Beverages" },
    { name: "Coffee", category: "1.Beverages" },
],

(note that I added a number in front of the category name, so that groups are ordered the way I want)

Then I just needed to change the groupTemplate and fixedGroupTemplate options of the Autocomplete like this:

groupTemplate: "#:data.substr(2)#"

which removes the "n." in front of all category names when displayed.

[Martin]

Hello, Paolo,

I am glad that you were able to come up with a solution that suits your needs.

As far as I understand, the issue is resolved, but if you have any further questions on the topic, please do not hesitate to ask.

Regards,
Martin
Progress Telerik