Unable to select or remove items from connected kendolistbox

[Lee]

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")
    });

[Lee]

I also looked at this dojo but it didn't seem to have the answer. https://dojo.telerik.com/IjISeBic/6

[Lee]

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);
            }
        });

[Lee]

Here is a dojo to show what I have tried.

[Angel Petrov]

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

[Lee]

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?

[Lee]

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. 

[Angel Petrov]

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

[Lee]

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?

[Lee]

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([]);

 

 

[Angel Petrov]

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