New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Server-side Events

SqlDataSource Binding

RadMultiColumnComboBox provides ItemDataBound and SelectedIndexChanged server events that can be used to accomplish even the most difficult tasks. To fire the SelectedIndexChanged server-side event, which requires a postback, the AutoPostBack property should be enabled.

By default the DataItem for an item contains the DataTextField, DataValueField and the DataFields declared in the Columns. If more fields from the server-side DataItems are needed, the properties can be added to the DataKeyNames collection, separated by a comma.

Values from the Attributes collection can be used when for Field of a column, the attributes.YourPropertyName is used.

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

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</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>
            <asp:Label ID="Label1" runat="server" />
            <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" DataSourceID="SqlDataSource1"
                DropDownWidth="1000px" Height="400px" Width="100%"
                OnItemDataBound="RadMultiColumnComboBox1_ItemDataBound"
                AutoPostBack="true"
                OnSelectedIndexChanged="RadMultiColumnComboBox1_SelectedIndexChanged"
                DataTextField="ContactName"
                DataValueField="CustomerID"
                DataKeyNames="Country"
                Placeholder="Select an item from the dropdown">
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="ContactName" Title="Name" Width="200px">
                        <Template>
                       <div class='customer-photo'
                            style='background-image: url(../../img/northwind/Customers/thumbs/#:data.CustomerID#.jpg);'></div>
                            <span class='customer-name'>#: ContactName #</span>
                        </Template>
                    </telerik:MultiColumnComboBoxColumn>
                    <telerik:MultiColumnComboBoxColumn Field="ContactTitle" Title="Title" Width="200px" />
                    <telerik:MultiColumnComboBoxColumn Field="CompanyName" Title="Company" Width="200px" />
                    <telerik:MultiColumnComboBoxColumn Field="attributes.customAttrText" Title="Text from attribute" />
                    <telerik:MultiColumnComboBoxColumn Field="attributes.customAttrValue" Title="Value from attribute" />
                </ColumnsCollection>
                <ClientEvents OnChange="OnChange" />
            </telerik:RadMultiColumnComboBox>
            <script>
                function OnChange(sender, args) {
                    var dataItem = sender.get_dataItem((sender.get_selected()));
                    var country = dataItem.Country;
                    var attributeValue = dataItem.attributes.customAttrValue;

                    alert("Selected '" + dataItem.ContactName + "' \nfrom '" + country + "' \nwith custom attribute value '" + attributeValue + "'")
                }
            </script>
            <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
                ProviderName="System.Data.SqlClient"
                SelectCommand="SELECT Top 20 [CustomerID], [ContactName], [ContactTitle], [CompanyName], [Country] FROM [Customers]"></asp:SqlDataSource>
        </div>
    </telerik:RadAjaxPanel>

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

Support & Learning Resources

Find Assistance