Radmulticolmncombobox virtualization

1 Answer 209 Views
MultiColumnComboBox
Itamar
Top achievements
Rank 1
Iron
Iron
Itamar asked on 19 Aug 2021, 11:59 AM

Hi I am trying to virtualize my radmulticolumn combobox however after virtualization I am unable to select any of the items in the combobox it doesnt select the item whenever i click to select it just closes the dropdown.

The client side Onselect event triggers but doesnt hold  a selected Item-The server side on itemSelctedindexchanged event doesnt fire at all.

it is bound to a Datatable..

here is my code

Thanks alot

       <telerik:RadMultiColumnComboBox ID="accDropDown"
                        runat="server" CssClass="multiColumn"
                        AutoPostBack="true" DataTextField="AccountName"
                        DataValueField="AccountId" AllowPaging="true"
                        Filter="Contains" Width="420px" OnSelectedIndexChanged="accDropDown_SelectedIndexChanged"
                        Font-Size="14px" CausesValidation="false" ForeColor="#666666" FilterFields="AccountName,AccountNumber"
                        Delay="0" Placeholder="Select An Account.." EnableServerFiltering="true"
                        EnableServerPaging="true" Enable="true" ClientEvents-OnSelect="ItemSelected"  EnableViewState="true">
                        <ColumnsCollection>
                            <telerik:MultiColumnComboBoxColumn Field="AccountName" Title=" Account Name" Width="300px" />
                            <telerik:MultiColumnComboBoxColumn Field="AccountNumber" Title="Account Number" />
                        </ColumnsCollection>
                        <VirtualSettings ItemHeight="25" ValueMapper="valueMapper" />


                    </telerik:RadMultiColumnComboBox>


<script>
     function valueMapper(options) {

          
            $telerik.$.ajax({
                url: "https://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
                type: "GET",
                dataType: "jsonp",
                data: convertValues(options.value),
                success: function (data) {
                    options.success(data);
                }
                  
            })

        }

        function convertValues(value) {
            var data = {};
            value = $telerik.$.isArray(value) ? value : [value];

            for (var idx = 0; idx < value.length; idx++) {
                data["values[" + idx + "]"] = value[idx];
            }

            return data;
        }</script>

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 24 Aug 2021, 10:24 AM

Hello Itamar,

Can you elaborate a bit on how you are binding the MultiColumncomboBox to a datatable with enabled virtualization? Are you using a web service or something else? You can see how to implement virtualization in RadMultiColumnComboBox in the following live demos:

For convenience, I am attaching a small sample with properly implemented virtualization, where the OnSelectedIndexChanged is also triggered as expected, so you can examine it at your end.

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Itamar
Top achievements
Rank 1
Iron
Iron
commented on 24 Aug 2021, 12:41 PM

Hi after review I realised where my issue lies ,

how do you create this webservice as seen in the demo

how do you create the page shown in the url?are there other ways to bind it?

thanks


   <WebServiceSettings ServiceType="OData" Select-DataType="JSON">
                <Select Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" />
            </WebServiceSettings>

Itamar
Top achievements
Rank 1
Iron
Iron
commented on 24 Aug 2021, 12:42 PM

is there a  way i could do the binding without a webservice?

 

Vessy
Telerik team
commented on 24 Aug 2021, 05:56 PM

Hi Itamar,

The source code for the Kendo UI service is located at: 

Also, you can take a look at the MultiSelect's Virtualization demo that implements integration with .asmx service: 

Attached you can find a sample project implementing the same integration of the MultiColumnComboBox with an asmx service and also integration with RadClientDataSource.

If you use an external RadClientDataSource, you can leverage all the existing resources for binding the RadClientDataSource to the web services:

Itamar
Top achievements
Rank 1
Iron
Iron
commented on 25 Aug 2021, 10:33 AM

Thanks do you have an example of how I could bind it to a data table or using a webmethod?
Vessy
Telerik team
commented on 30 Aug 2021, 09:58 AM

Hi Itamar,

The RadMultiColumnComboBox is a wrapper of the Kendo UI MultiColumnComboBox widget, which is designed to work entirely client-side. That's why, the virtualization feature of the control is posssible only when it is bound to ClientDataSource.

 

Itamar
Top achievements
Rank 1
Iron
Iron
commented on 02 Sep 2021, 10:45 AM

Thanks so much for alll your help....

Do you have a basic example of webservice with a datatable and binding it to the multicolumcombobox thats will help me alot if possible thanks

 

 

Vessy
Telerik team
commented on 07 Sep 2021, 09:18 AM

Hello Itamar,

I am afraid that as explained in my previous reply, the desired approach cannot be achieved as the virtualization feature is available only when the MultiColumncombobox is bound with client-side binding.

Itamar
Top achievements
Rank 1
Iron
Iron
commented on 04 Oct 2021, 01:30 PM

Ok so I have the following code based on th efollowing example 

 https://docs.telerik.com/devtools/aspnet-ajax/controls/multicolumncombobox/data-binding/client-side

my webservice is running but nothing showing up inthe mccbox

please help

Thanks Again!

 

  <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" Skin="Default"
                DataTextField="CategoryName" DataValueField="CategoryID"
                DropDownWidth="300px" Height="400px" Width="300px"
                MinLength="3" Filter="Contains" Placeholder="Select Category" EnableServerFiltering="true" AutoPostBack ="true">
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="Title" Title="ID" />
                    <telerik:MultiColumnComboBoxColumn Field="Author" Title="Name" />
                </ColumnsCollection>
                <WebServiceSettings BaseUrl ="WebService.asmx" ServiceType="Default">
                    <Select Url="GetBooks" RequestType="Post" DataType="JSON" ContentType="application/json; charset=utf-8" />
                </WebServiceSettings>

            </telerik:RadMultiColumnComboBox>

 

Itamar
Top achievements
Rank 1
Iron
Iron
commented on 04 Oct 2021, 01:30 PM


  <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" Skin="Default"
                DataTextField="CategoryName" DataValueField="CategoryID"
                DropDownWidth="300px" Height="400px" Width="300px"
                MinLength="3" Filter="Contains" Placeholder="Select Category" EnableServerFiltering="true" AutoPostBack ="true">
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="Title" Title="ID" />
                    <telerik:MultiColumnComboBoxColumn Field="Author" Title="Name" />
                </ColumnsCollection>
                <WebServiceSettings BaseUrl ="WebService.asmx" ServiceType="Default">
                    <Select Url="GetBooks" RequestType="Post" DataType="JSON" ContentType="application/json; charset=utf-8" />
                </WebServiceSettings>

            </telerik:RadMultiColumnComboBox>

Vessy
Telerik team
commented on 07 Oct 2021, 12:15 PM

Hello Itamar,

Can you provide the code for the used WebService.asmx as well? Also, did you have the chance to try the project attached in my previous reply below?

 https://www.telerik.com/forums/radmulticolmncombobox-virtualization#5362308

Tags
MultiColumnComboBox
Asked by
Itamar
Top achievements
Rank 1
Iron
Iron
Answers by
Vessy
Telerik team
Share this question
or