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

Unable to select or remove items from connected kendolistbox

10 Answers 393 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Lee asked on 03 Feb 2020, 07:41 PM

I have a connected listbox on the screen and call a function to setup the list box. This function should select the three items in the itemsToSelect variable and move them to the selectedItems listbox. Unfortunately it seems nothing happens. I can add the items using the add command (see commented out code) but I cannot remove them using the remove command either. I've looked at the documentation about select and remove but the examples don't show removing an array of items. What am I doing wrong?

let itemsToSelect = [
{ itemID: 123, itemName: "Item 123" },
{ itemID: 234, itemName: "Item 234" },
{ itemID: 345, itemName: "Item 345" }
];

 

setupListbox(itemsToSelect);

 
 function setupListbox(itemsToSelect) {
        let availableItemsListBox = $('#availableItems').data("kendoListBox");
        let selectedItemsListBox = $('#selectedItems').data("kendoListBox");
        let selectedItems = [];
 
 // Reset the list boxes
 availableItemsListBox._executeCommand("transferAllFrom");
 
// Select the correct items
        $.each(itemsToSelect, function (index, item) {
            var itemID = item.itemID;
            var dataItem = availableItemsListBox.items().find(function (item) {
                return item.itemID === itemID;
            });
 
            if (dataItem) {
                selectedItems.push(dataItem);
            }
        });
        if (selectedItems.length > 0) {
            //selectedItemsListBox.add(selectedItems);
            //availableItemsListBox.remove(selectedItems);
            availableItemsListBox.select(selectedItems);
            availableItemsListBox._executeCommand("transferTo");
        }
    }

If you need it, here is my initial setup of the listbox:

$("#availableItems").kendoListBox({
        connectWith: "selectedItems",
        autoScroll: false,
        dropSources: ["selectedItems"],
        toolbar: {
            position: "right",
            tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
        },
        dataSource: itemsListBoxDataSource,
        template: "<span class='listItemID'>#: data.itemID #</span><span class='listItemName'>#: data.itemName #</span>",
        valueTemplate: "#: itemName #",
        dataTextField: "itemName",
        dataValueField: "itemID",
        add: () => changeListBox("#availableItems"),
        remove: () => changeListBox("#availableItems")
    });
 
    $("#selectedItems").kendoListBox({
        connectWith: "availableItems",
        dropSources: ["availableItems"],
        template: "<span class='listItemID'>#: data.itemID #</span><span class='listItemName'>#: data.itemName#</span>",
        valueTemplate: "#: itemName #",
        dataTextField: "itemName",
        dataValueField: "itemID",
        add: () => changeListBox("#selectedItems"),
        remove: () => changeListBox("#selectedItems")
    });

10 Answers, 1 is accepted

Sort by
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 03 Feb 2020, 08:07 PM
I also looked at this dojo but it didn't seem to have the answer. https://dojo.telerik.com/IjISeBic/6
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 03 Feb 2020, 09:17 PM

I edited my code to be like below, however this causes performance issues when 100 items are pre-selected and still doesn't work with to remove items from the selected list.

let availableItemsListBox = $('#availableItems').getKendoListBox();
        let selectedItemsListBox = $('#selectedItems').getKendoListBox();
        let selectedItems = [];
        let relatedItems = returnData.filter(e => e.constraintRuleID === parseInt(constraintRulesID));
 
        // Reset the list boxes
        availableItemsListBox._executeCommand("transferAllFrom");
 
        // Select the correct items
        $.each(relatedItems, function (index, item) {
            var itemID = item.itemID;
            var listbox = $('#availableItems').data("kendoListBox");
            var dataItem = listbox.items().filter(function (index) {
                return $(this).find('.listItemID').text() === itemID.toString();
            }).first();
            // looping through each one causes major performance issues here
            listbox.select(dataItem);
            listbox._executeCommand("transferTo");
            if (dataItem) {
                selectedItems.push(dataItem);
            }
        });
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 03 Feb 2020, 10:52 PM
Here is a dojo to show what I have tried.
0
Angel Petrov
Telerik team
answered on 05 Feb 2020, 11:55 AM

Hello Lee,

Here is a modified dojo which illustrates how one can transfer items from one list view to another. The first approach shown when clicking button1 is to trigger the transferTo command which will transfer the selected items to the connected listbox and remove them from the current. Button2 will select the ones that should be transfered based on their text and later call the same command. Hope the sample proves helpful.

Regards,
Angel Petrov
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
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 07 Feb 2020, 10:14 PM
Thank you, however I am running into an issue where in my case I have 12,000 items. Since there are so many, I added pagination to show only 150 at a time. This means that most of the items do not exist on the page itself. How would I work with the data source to make sure that those items not displayed are accounted for?
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 07 Feb 2020, 10:43 PM

I have updated the dojo to demonstrate this. https://dojo.telerik.com/@dojolee/oREHIXON

Basically, I need the first 150 unselected and selected items to display. In my real scenario each box also has a search so when the person filters it they would need to display the first 150 items that match their search string. 

0
Angel Petrov
Telerik team
answered on 11 Feb 2020, 12:13 PM

Hello Lee,

Generally there is no public API that one can use to achieve the desired goal. However it can be achieved using private APIs. Here is a modified dojo. The idea is to get the items from the data method which will return all the items in the data source and from there move them from one datasource to another and refresh the lists. 

Regards,
Angel Petrov
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
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 17 Feb 2020, 04:54 PM
I modified this a little to meet my needs and it sort of works except when I try to reset the list and select different items programmatically. I added a listBox._executeCommand("transferAllFrom") to the beginning of the function. Unfortunately, in my instance I'm getting unexpected results when I click on different buttons. Button A has 300 items selected. Button B has 1 item selected. When I click on button A and then button B, sometimes I have 300 items selected, sometimes I have 2 items, and sometimes I have only 1 item. I suspect this is because the listbox._executeCommand is taking a long time to process and therefore when the .add function is called it hasn't finished removing items. What do you suggest?
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 18 Feb 2020, 09:17 PM

OK. So I solved this last issue by rebuilding the listbox with:

let listBox = $('#availableItems').getKendoListBox();
listBox.dataSource.data(items);

 

and emptying out the connected list box with: 

let destinationListBox = $('#selectedItems').getKendoListBox();
destinationListBox.dataSource.data([]);

 

 

0
Angel Petrov
Telerik team
answered on 19 Feb 2020, 01:36 PM

Hello Lee,

I am glad to hear that you were able to resolve the problem and thanks for sharing the solution with the community.

Regards,
Angel Petrov
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.
Tags
ListBox
Asked by
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Angel Petrov
Telerik team
Share this question
or