Radmulticolmncombobox virtualization

[Itamar]

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>

[Vessy]

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:

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

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

[Itamar]

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]

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

 

[Vessy]

Hi Itamar,

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

• https://github.com/telerik/kendo-ui-demos-service/tree/master/demos-and-odata-v3   
  

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

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

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:

• https://docs.telerik.com/devtools/aspnet-ajax/controls/clientdatasource/service-configuration
• https://github.com/telerik/ajax-docs/blob/master/knowledge-base/grid-client-side-crud-aspnet-webservice.md
• https://github.com/telerik/ajax-docs/blob/master/knowledge-base/grid-client-side-crud-ajax-enabled-wcf.md

[Itamar]

Thanks do you have an example of how I could bind it to a data table or using a webmethod?

[Vessy]

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]

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]

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]

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]

  <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]

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