Kendo UI dropdownlist big data

13 posts, 1 answers
  1. Guo
    Guo avatar
    8 posts
    Member since:
    Dec 2011

    Posted 10 Mar Link to this post

    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.

     

  2. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 10 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Guo
    Guo avatar
    8 posts
    Member since:
    Dec 2011

    Posted 10 Mar in reply to Sebastian Link to this post

    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 ?
  5. Answer
    Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 11 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Guo
    Guo avatar
    8 posts
    Member since:
    Dec 2011

    Posted 13 Mar in reply to Sebastian Link to this post

    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?

  7. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 14 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Guo
    Guo avatar
    8 posts
    Member since:
    Dec 2011

    Posted 14 Mar in reply to Sebastian Link to this post

    Got it. I will review my code to fix it . 
  9. Guo
    Guo avatar
    8 posts
    Member since:
    Dec 2011

    Posted 18 Mar in reply to Sebastian Link to this post

    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

  10. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 18 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Guo
    Guo avatar
    8 posts
    Member since:
    Dec 2011

    Posted 20 Mar in reply to Sebastian Link to this post

    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!

     

  12. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 23 Mar Link to this post

    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:
    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Guo
    Guo avatar
    8 posts
    Member since:
    Dec 2011

    Posted 06 May in reply to Georgi Krustev Link to this post

    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.

  14. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 10 May Link to this post

    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:
    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready