Virtualization in RadMultiSelect - client-side dataItem issues

[branko]

Hi all,

I'm basically trying to create something similar to the demo presented here:

https://demos.telerik.com/aspnet-ajax/multiselect/virtualization/defaultcs.aspx

I've got a web service as a data source, and everything works (and looks) great without virtualization. I would obviously like to reap the benefits of virtualization, since the multiselect could potentially need to pull in a lot of data.

The issue occurs when I'm trying to select an item:

Telerik.Web.UI.WebRe…1f%3a619d6d01:13732 Uncaught TypeError: Cannot read properties of null (reading 'toJSON')
    at init.select (Telerik.Web.UI.WebRe…3a619d6d01:13732:38)
    at init.trigger (Telerik.Web.UI.WebRe…%3a619d6d01:5322:14)
    at init._select (Telerik.Web.UI.WebRe…%3a619d6d01:13489:7)
    at init._click (Telerik.Web.UI.WebRe…%3a619d6d01:13247:3)
    at init.d (Telerik.Web.UI.WebRe…a619d6d01:2435:3873)
    at init.trigger (Telerik.Web.UI.WebRe…%3a619d6d01:5322:14)
    at init._clickHandler (Telerik.Web.UI.WebRe…3a619d6d01:12931:54)
    at HTMLLIElement.d (Telerik.Web.UI.WebRe…a619d6d01:2435:3873)
    at HTMLUListElement.dispatch (Telerik.Web.UI.WebRe…619d6d01:2436:12445)
    at r.handle (Telerik.Web.UI.WebRe…a619d6d01:2436:9174)

Also, if I try to hook onto the OnSelect client-side event, it seems that the data item is not populated - my function onSelect(sender, args) gets triggered, but args.get_dataItem() returns null. Is it possible some binding didn't go as planned? Is there an extra step that needs to be done when using virtualization, or does perhaps some additional data need to be returned from the web service?

My VirtualSettings look like this:

<VirtualSettings ItemHeight="25" MapValueTo="dataItem" ValueMapper="valueMapper" />

and the ValueMapper isn't to blame because it's not getting triggered; I'm doing a simple scenario where there are no initially selected values to display.

I've tried going through docs for both RadMultiSelect and the Kendo control it wraps, but to no avail. I was initially using a version released in 2022, but have tried just replacing it with 2023.3.1010 - it didn't seem to help. I've also tried explicitly adding the  Virtual="true" option to my RadMultiSelect instance, but that seemed to have no effect either.

Thanks in advance,

Marko

Edit: I've also found the unanswered question regarding the same topic here:
https://www.telerik.com/forums/radmultiselect#1557910

I can't confirm whether the demo works, since it looks like the data source doesn't fetch any data:

Locally, if I basically copy/paste it and implement the web service, without virtualization everything works, when I add the VirtualSettings node, I'm getting the aforementioned error (probably caused by the fact that dateitem is actually null). I've also tried binding initial values, and they get displayed properly in the multiselect and can be deselected without issues.

[branko]

After some digging, turns out I was missing some script references:

 

 <telerik:RadScriptManager ID="ActivityDrawerScriptManager" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</telerik:RadScriptManager>

I actually found the answer while digging through here:
https://www.telerik.com/forums/radmulticolmncombobox-virtualization#5362308 , in the attached demo.

[Rumen]

Thank you for sharing the solution that fixed the problem on your side, Branko! Keep up the good work.