Silk skin

MultiColumnComboBox - Server-side Data Binding

SqlDataSource Binding

Generic Collection Binding

DataTable Binding

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadMultiColumnComboBox allows binding to generic collections, lists, data tables on the server-side along with binding to various declarative data sources such as the SqlDataSource.

To bind the RadMultiColumnComboBox on the server side, the data should be passed to the DataSource property of the control and then call its .DataBind() method should be called. For more control on the text and values, the DataTextField and DataValueField can be set.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="MultiColumnComboBox_Server_Side_Data_Binding_DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
        <div class="demo-container size-thin">
            <h2>SqlDataSource Binding</h2>
            <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1"
                Width="220px" Height="400" DropDownWidth="400"
                DataTextField="ContactName" DataValueField="CustomerID" DataSourceID="SqlDataSource1"
                Filter="StartsWith" FilterFields="CustomerID, ContactName">
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="ContactName" Title="ContactName">
                    </telerik:MultiColumnComboBoxColumn>
                    <telerik:MultiColumnComboBoxColumn Field="CustomerID" Title="CustomerID">
                    </telerik:MultiColumnComboBoxColumn>
                </ColumnsCollection>
            </telerik:RadMultiColumnComboBox>
            <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Select" ID="RadButton1" OnClick="RadButton1_Click" />
            <p>
                <asp:Label runat="server" ID="Label1" />
            </p>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>
        </div>
        <div class="demo-container size-thin">
            <h2>Generic Collection Binding</h2>

            <telerik:RadMultiColumnComboBox ID="RadMultiColumnComboBox2" DropDownWidth="400" Width="220px" runat="server"
                DataTextField="Name" DataValueField="Id">
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="Id" Title="Id" />
                    <telerik:MultiColumnComboBoxColumn Field="Name" Title="Name" />
                    <telerik:MultiColumnComboBoxColumn Field="Title" Title="Title" />
                </ColumnsCollection>
            </telerik:RadMultiColumnComboBox>
            <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Select" ID="RadButton2" OnClick="RadButton2_Click" />
            <p>
                <asp:Label ID="Label2" runat="server" />
            </p>
        </div>
        <div class="demo-container size-thin">
            <h2>DataTable Binding</h2>
            <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox3" DropDownWidth="800" Width="220px"
                DataTextField="ShipName" DataValueField="OrderID">
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="OrderID" Title="OrderID" />
                    <telerik:MultiColumnComboBoxColumn Field="OrderDate" Title="OrderDate">
                        <Template>
        #= kendo.toString(OrderDate, "dd/MM/yyyy") #
                        </Template>
                    </telerik:MultiColumnComboBoxColumn>
                    <telerik:MultiColumnComboBoxColumn Field="Freight" Title="Freight" />
                    <telerik:MultiColumnComboBoxColumn Field="ShipName" Title="ShipName" />
                </ColumnsCollection>
            </telerik:RadMultiColumnComboBox>
            <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Select" ID="RadButton3" OnClick="RadButton3_Click" />
            <p>
                <asp:Label runat="server" ID="Label3" />
            </p>

        </div>
    </telerik:RadAjaxPanel>


    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?