Client-Side Data Binding

RadMultiColumnComboBox can be bound to a web service through its inner WebServiceSettings tag or through a RadClientDataSource. Since the control is a wrapper over the Kendo UI for jQuery widget, it always operates on the client and binds to data with JavaScript.

There are three ways to bind to data on the client:


Under the covers, a Kendo UI DataSource will be instantiated and it will perform requests to the denoted service with the settings defined in the WebServiceSettings tag.

The widget only shows data and so only the Select settings and ServiceType are used. The rest of the settings (for Insert, Update, Delete) will not be used and are inherited from a base class.

Example 1: Setting WebServiceSettings to bind to a web service

<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">
    <WebServiceSettings ServiceType="OData" Select-ContentType="JSON"
        <telerik:MultiColumnComboBoxColumn Field="CategoryName" Title="Name" />
        <telerik:MultiColumnComboBoxColumn Field="CategoryID" Title="ID" />


To bind to a RadClientDataSource instance, set the ClientDataSourceID property to the ID of the client data source control.

RadClientDataSource is a wrapper over the Kendo UI DataSource as well. It is a separate control tag that provides some more features pertainig to CRUD operations that are not relevant to the multi-column combo box.

Example 2: Binding to a RadClientDataSource

<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" Filter="Contains" Skin="Default"
    Height="400" Width="300px" Placeholder="select from the dropdown or type"
    DataTextField="ShipName" DataValueField="OrderID">
        <telerik:MultiColumnComboBoxColumn Field="OrderID" Title="Order" Width="100" />
        <telerik:MultiColumnComboBoxColumn Field="ShipName" Title="Ship" Width="300" />
        <telerik:MultiColumnComboBoxColumn Field="ShipCountry" Title="Country " Width="200" />
<telerik:RadClientDataSource ID="RadClientDataSource1" runat="server">
        <WebServiceDataSourceSettings ServiceType="OData" Select-DataType="JSON">
            <Select Url="" />

JavaScript Object at Runtime

You can use the set_dataSource() client-side method of the RadMultiColumnComboBox object to provide it with a new client-side data source. You do not have to provide a server data source or a web service for this to work, you only need to define the proper configuration (columns and fields) to match the data you will pass to the widget.

Example 3: Binding to a JavaScript array

    var data = [
        { id: 1, name: "one", color: "red" },
        { id: 2, name: "two", color: "green" },
        { id: 3, name: "three", color: "blue" }

    function OnLoad(sender, args) {

    function bindToNewData() {
        var mccb = $find("<%=RadMultiColumnComboBox1.ClientID%>");
            { id: 4, name: "four", color: "pink" }

<telerik:RadMultiColumnComboBox ID="RadMultiColumnComboBox1" runat="server" Skin="Default"
    DataTextField="name" DataValueField="id"
    Filter="Contains" FilterFields="name, color"
    DropDownWidth="400" Height="400" Width="300px">
        <telerik:MultiColumnComboBoxColumn Field="id" Title="ID" Width="40px" />
        <telerik:MultiColumnComboBoxColumn Field="name" Title="Name" />
        <telerik:MultiColumnComboBoxColumn Field="color" Title="color" Width="100px">
            <Template><span style="color: #=data.color#">#:data.color#</span></Template>
    <ClientEvents OnLoad="OnLoad" />

<button onclick="bindToNewData();" type="button">bind to new data</button>

You can also create a new Kendo Data Source object with the desired settings and pass it to the RadMultiColumnComboBox. Just make sure that it matches the fields and settings you have defined.

Example 4: Binding to a new Kendo DataSource instance

    function bindToNewData() {
        var mccb = $find("<%=RadMultiColumnComboBox2.ClientID%>");

        //create a Kendo Data Source and set its settings
        //this example calls a service, but you can also use static data
        var ds = new{
             type: "odata",
            transport: {
                read: ""


<button onclick="bindToNewData();" type="button">bind to new data</button>

<telerik:RadMultiColumnComboBox ID="RadMultiColumnComboBox2" runat="server" Skin="Default"
    DataTextField="ContactName" DataValueField="CustomerID"
    Filter="Contains" FilterFields="ContactName"
    DropDownWidth="400" Height="400" Width="300px">
        <telerik:MultiColumnComboBoxColumn Field="ContactTitle" Title="Contact Title" Width="200px" />
        <telerik:MultiColumnComboBoxColumn Field="ContactName" Title="Contact Name" Width="200px"/>

See Also

In this article
Not finding the help you need? Improve this article