Kendo UI dropdownlist big data

[n/a]

I have 1000+ data to show in a dropdown list  on web page, but when I after bind data to this controll ,it will crush and waits a long time to show my result. how could I fix this issue.

 

[Sebastian]

Hello Guo,

With large amount of items to be displayed in the dropdown list widget, I suggest you utilize its virtualization feature demonstrated in this demo. Thus you'll optimize the performance as much as possible by loading data progressively on-demand when having many items in the dropdown.

Best regards,
Sebastian
Telerik

 

 

[n/a]

I could offer backend code for this demo？ I find  serverPaging: true, serverFiltering: true,  wheather paging on server? I do not want this happening. I need to load all data. in your demo ,there are two ajax url '//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders' and '//demos.telerik.com/kendo-ui/service/Orders/ValueMapper' , what is the feature of  the second one address ?

[Sebastian]

Hello again Guo,

To speed up the performance when having large number of items loaded in the dropdownlist, you need to offload the paging and filtering operation to the server, which is done via the configuration settings you specified.

As to your question about the service //demos.telerik.com/kendo-ui/service/Orders/ValueMapper which returns a callback function, is responsible for performing calculation on which page the selected dropdown item resides and retains its selection. More information about it can be found in this section of the documentation.

Regards,
Sebastian
Telerik

 

 

[n/a]

Thanks for your answer ,I appreciate it very much, I code it like the demo,but in

 valueMapper: function (options) {
                    $.ajax({
                        url: url.api('PagerDropdown/PagerDropdownList'),
                        type: "GET",
                        dataType: "json",
                        data: convertValues(options.value),
                        success: function (data) {
                            options.success(data);
                        }
                    })
                }

options.value it is empty . How can i fix it?

[Sebastian]

As quoted from the docs I referenced:

As mentioned in the previous section, the service should map the selected value to a concrete row index. The implementation of this functionality is completely under your control. However, the most simplified implementation includes the iteration of all items counting the index of the rows.

We provided a sample implementation and documented it, Guo. Troubleshooting your own ValueMapper implementation falls a bit beyond the scope of our support service, hence we could hardly help you with your solution as we are not aware of the logic used.

Regards,
Sebastian
Telerik

 

 

[n/a]

Got it. I will review my code to fix it . 

[n/a]

Hi!sorry for disturbing you again ,When I fix my issue ,I download your code and copy to my page, I find that your value valueMapper ajax return nothing just as my image provide to you, and your result is 80+ not 830，so could you offer a completely code demo including 

front-end and back-end code. I want to know how to fix my issue

[Sebastian]

I am not sure how you made these conclusions about the number of items in the screenshot from the browser devtools you provided, Guo. If you have in mind the values part of the string, it says ....values%5B0%5D....

The number of fetched and displayed items when the user opens the dropdown and scrolls depend on the actual ValueMapper implementation. Please refer to the documentation I linked previously regarding the ValueMapper concept and apply the necessary logic for your scenario.

Regards,
Sebastian
Telerik

 

 

[n/a]

Hi Sebastian! Thanks your answer so kind of you. I download your code to my local project and debug your demo ajax by fiddler, I found that , The first ajax call http://demos.telerik.com/kendo-ui/service/Orders/ValueMapper return nothing, and the second ajax call 

return a value of page data, one property is _count and other property is page data,I fix my code of back-end  and return json data like your demo's structure,but I meet a problem again, I don't know how to bind data to dropdown list if my json data  is like your demo's structure,

Here is my json data as image shows. hope your help, thanks again!

 

[Georgi Krustev]

Hello Guo,

The virtualized DropDownList widget uses two separate services:

• first is the one that retrieves the data
• second one just maps the value to the item index (that's all)

What you have seen is exactly those two services have been requested.

If you would like to map the data and count value to the widget's data source then you will need to configure the schema options:

• http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data

• http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total

Regards,
Georgi Krustev
Telerik

 

 

[n/a]

Hi，Thanks your documents, those help me a lot ,but I still cannot make well demo yours,when I copy your demo code change the url of back-end as mine, the my request parameter 

is like that http://localhost/KendoUIDemo/api/Product?take=80&skip=0&page=1&pageSize=80

but your demo's 24inlinecount=allpages&%24format=json&%24top=45&%24skip=180,and my demo just call one time,scroll the dropdown list cannot call again.

[Georgi Krustev]

Hello Guo,

If the type of the DataSource is not 'odata', then the parameters will be send as JSON. In other words, they will not be transformed to match the ODATA protocol. Check the type property for more details:

• http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-type

Regards,
Georgi Krustev
Telerik