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

No data found when using serverGrouping

4 Answers 189 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Paolo
Top achievements
Rank 1
Paolo asked on 05 Jan 2021, 04:32 PM

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?

4 Answers, 1 is accepted

Sort by
0
Paolo
Top achievements
Rank 1
answered on 05 Jan 2021, 04:42 PM

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

https://dojo.telerik.com/uXeLoWOR

0
Martin
Telerik team
answered on 07 Jan 2021, 12:37 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Paolo
Top achievements
Rank 1
answered on 07 Jan 2021, 01:17 PM

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.

0
Martin
Telerik team
answered on 11 Jan 2021, 09:48 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
AutoComplete
Asked by
Paolo
Top achievements
Rank 1
Answers by
Paolo
Top achievements
Rank 1
Martin
Telerik team
Share this question
or