ListBox: Returning data items in order

5 posts, 0 answers
  1. Eric
    Eric avatar
    1 posts
    Member since:
    Mar 2011

    Posted 18 Aug 2017 Link to this post

    I initially would have expected that the dataItems() method would have returned the items in the order that they appear in the list box.  However, the method does not.  Are there any plans to change this?  The best work around I can come up with is

    var selectCols = $('#list`).data('kendoListBox');

    selectCols.items().map(function(i, e) { return selectCols.dataSource.getByUid($(e).data('uid')); })

    Is there a better, more durable approach that leverages public API's?

    Thanks.

  2. Stefan
    Admin
    Stefan avatar
    1886 posts

    Posted 22 Aug 2017 Link to this post

    Hello Eric,

    For now, this behaviour is expected and changing it is not in our short-term ToDo list.

    We have a knowledge-base article which demonstrates how to keep the items indexes in sync:

    http://docs.telerik.com/kendo-ui/knowledge-base/list-box-reordering-not-working

    I modified it to demonstrate how the new result of the dataItems method will look after a reorder:

    http://dojo.telerik.com/Edeco/10

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    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.
  3. Jeffrey
    Jeffrey avatar
    11 posts
    Member since:
    Mar 2014

    Posted 08 Aug in reply to Stefan Link to this post

    So I noticed this is still not fixed a year later.  The reorder demo you provided works, however, it causes the listbox to lose the selection and the control buttons to lose focus.  Is there a way to maintain the selection and focus?  I am trying to use this control for reordering a list of people and to have to click, then re-select, then click etc. to move one person up or down multiple times is extremely frustrating to users.
  4. Stefan
    Admin
    Stefan avatar
    1886 posts

    Posted 09 Aug Link to this post

    Hello, Jeffrey,

    I can suggest utilizing the dataBound event which can be used to set the dropped item as selected. The select and items methods can be used in this case to set the selected item based on the index.

    https://docs.telerik.com/kendo-ui/api/javascript/ui/listbox/events/databound

    https://docs.telerik.com/kendo-ui/api/javascript/ui/listbox/methods/select

    https://docs.telerik.com/kendo-ui/api/javascript/ui/listbox/methods/items

    I modified the example to demonstrate this:

    http://dojo.telerik.com/UXahOyUC

    This still leaves the control buttons issue, which could be resolved by keeping track of which button was the focus and the on the dataBound event to call focus on the DOM element.

    Also, I can suggest making a request for this to be a built-in feature to ensure that it will work as expected:

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback?category_id=206113

    Regards,
    Stefan
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Jeffrey
    Jeffrey avatar
    11 posts
    Member since:
    Mar 2014

    Posted 1 day and 7 hours ago Link to this post

    This is now working.  Here is the dojo sample I went with.

     

    http://dojo.telerik.com/apUnaraN

     

    Thank you!

Back to Top