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

ListBox: Returning data items in order

6 Answers 2062 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 18 Aug 2017, 09:56 PM

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.

6 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 22 Aug 2017, 06:56 AM
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.
0
Jeffrey
Top achievements
Rank 1
answered on 08 Aug 2018, 12:24 PM
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.
0
Stefan
Telerik team
answered on 09 Aug 2018, 06:46 AM
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.
0
Jeffrey
Top achievements
Rank 1
answered on 16 Aug 2018, 12:04 PM

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

 

http://dojo.telerik.com/apUnaraN

 

Thank you!

0
Hunter
Top achievements
Rank 1
answered on 11 Mar 2019, 07:40 PM

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?

0
Alex Hajigeorgieva
Telerik team
answered on 13 Mar 2019, 04:43 PM
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
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.
Jeffrey
Top achievements
Rank 1
Veteran
Iron
Iron
commented on 11 Aug 2022, 01:51 PM

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
Top achievements
Rank 1
Veteran
Iron
Iron
commented on 14 Aug 2022, 03:26 AM

Hello - 

 

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

 

Jeff

Tags
ListBox
Asked by
Eric
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Jeffrey
Top achievements
Rank 1
Hunter
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or