ListBox: Returning data items in order

[Eric]

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.

[Stefan]

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

[Jeffrey]

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.

[Stefan]

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

[Jeffrey]

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

 

http://dojo.telerik.com/apUnaraN

 

Thank you!

[Hunter]

I am using two listboxes, connected with each other, that allow drag and drop between the two. While using the reorder code provided in this thread fix the issue with reordering items within the same list, it doesn't address the issue when dragging and dropping an item from one listbox to the other. I understand that is because this isn't a "reorder" action, it is a "drop" action, but if I try to put the same code snippet in the "drop" action of the listbox, it just stops the item from transferring to the other listbox.

How can I accomplish the same thing, that is, keep the dropped item in the order it is visually dropped?

[Alex Hajigeorgieva]

Hello, Hunter,

I am posting the same response here in the forum, as I can see that you have found it helpful, so it might help someone else who is looking for the same thing.

-----------------------------------------------------------

For the Kendo UI ListBoxes to support reordering of data items in the data source, we would need to extend the current implementation with full CRUD operations. If you like, I can log a feature request on your behalf. The more votes a request gets, the more likely it is to be pushed forward for implementation in the future.

However, so far we find that the ListBox items most frequent use case is when the items are submitted via a save button and a function attached to it. In other words, instead of adding handlers for all types of user interactions and keeping track of the data sources, I would suggest getting the items on submitting in the right order:

 

function save(){
   // selected is the ListBox instance
    var selectedHtmlItems = selected.wrapper.find(".k-item");
    var orderedItems = [];
    $.each(selectedHtmlItems, function(idx, item){
      orderedItems.push(selected.dataItem(item));
    });
    console.log(orderedItems);
  }

And here is a runnable example for your reference:

https://dojo.telerik.com/@bubblemaster/uyaqIFaf

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Jeffrey]

Alex - With the new release 2022.2.621, we started seeing issues with handling this in the reorder event where 2 items would be in a selected state and the buttons to move up/down would be disabled.  I was going to track down the exact issue but then I saw your post.  A much nicer solution! 

Thank you,

Jeff

   

[Jeffrey]

Hello - 

 

One correction.  With the new css the k-item is now a k-list-item.

 

Jeff