Kendo MultiSelect with Virtualization: DataSource Data Empty for a Few Milliseconds

[Joe]

$("#msUsers").kendoMultiSelect({
        placeholder: "Select Users...",
        autoClose: false,
        dataTextField: "UserName",
        dataValueField: "UserId",
        virtual: {
            itemHeight: 40,
            mapValueTo: "dataItem",
            valueMapper: function (options) {
                var ids = options.value;
                if (!ids.length) {
                    options.success([]);
                    return;
                }
                $.ajax({
                    url: "/Home/GetUserByIds",
                    traditional: true,
                    data: { ids: ids },
                    success: function (response) {
                        options.success(response.length ? response : []);
                    },
                    error: function (xhr) {
                        console.log("Error:", xhr.responseText);
                    }
                });
            }
        },
        dataSource: {
            transport: {
                read: {
                    url: "/Home/BindUsers",
                    dataType: "json",
                    data: function (options) {
                        return {
                            skip: options.skip,
                            take: options.take,
                            filter: options.filter
                        };
                    }
                },
                parameterMap: function (data, action) {
                    if (action === "read") {
                        return {
                            take: data.take,
                            skip: data.skip,
                            filter: data.filter?.filters?.[0]?.value || ""
                        };
                    }
                    return data;
                }
            },
            schema: {
                data: "Data",
                total: "Total"
            },
            pageSize: 40,
            serverPaging: true,
            serverFiltering: true
        }
    });

I’m using Kendo UI MultiSelect with virtualization enabled, and I’ve noticed an issue where calling:

$("#multiSelect").data("kendoMultiSelect").value([1,2]);  //Where [1,2] already exists in the dataSource.

Immediately after setting the value, I attempt to retrieve it, but the result is an empty array [].
I tested this with setInterval(), and for a few milliseconds, the value remains empty before updating correctly.
My code logic requires retrieving the value immediately after setting it and passing it to an API call. However, as mentioned, I receive an empty array.
Is there an event I can listen for before proceeding?
I could use setTimeout(), but that feels like a hack.

[Nikolay]

Hello Joe,

This issue occurs because the Kendo UI MultiSelect with virtualization takes a brief moment to fetch the relevant data items asynchronously before they are available in the internal data model.

Instead of using setTimeout(), you should listen to the "dataBound" event of the MultiSelect. This event is triggered when the widget has finished fetching and rendering data.

// Set values and listen for the event
multiSelect.value([1, 2]);

// .one("dataBound", function() {...}) ensures the handler runs only once.
multiSelect.one("dataBound", function () {
    console.log("Final selected values:", multiSelect.value());
    // Now you can safely make your API call here
});

Regards,
Nikolay
Progress Telerik