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

Achieve SelectedIndexChanged server-side event behavior with RadMultiColumnComboBox

HOW TO

Achieve SelectedIndexChanged server-side event with RadMultiColumnComboBox.

SOLUTION

In the OnChange event of the multicolumn combobox, we set the arguments for a hidden button and programmatically click it. Then, the OnClick server-side event handler of the button is used as a server-side event handler for the change of the MultiColumnCombobox.

<asp:Label id="Label1" runat="server" />
<telerik:RadMultiColumnComboBox ID="RadMultiColumnComboBox1" runat="server" Skin="Default"
    DropDownWidth="400" Width="220px"
    DataTextField="Name" DataValueField="Id">
    <ClientEvents OnChange="OnChange" />
    <ColumnsCollection>
        <telerik:MultiColumnComboBoxColumn Field="Id" Title="Id" />
        <telerik:MultiColumnComboBoxColumn Field="Name" Title="Name" />
        <telerik:MultiColumnComboBoxColumn Field="Title" Title="Title" />
    </ColumnsCollection>
</telerik:RadMultiColumnComboBox>
<div style="display: none">
    <telerik:RadButton runat="server" ID="RadButton1" Text="Postback" CommandName="SelectedIndexChanged" AutoPostBack="true" OnClick="RadButton1_Click" />
</div>
function OnChange(sender, args) {
    var selectedDataItem = sender.kendoWidget.dataItems()[sender.get_selected()];
    var button = $find("<%= RadButton1.ClientID %>");

    if (sender.get_selected() > -1) {
        // make the selectedDataItem JS objec to a string and add it as a commandArgument
        button.set_commandArgument(JSON.stringify(selectedDataItem));
    } else {
        button.set_commandArgument("");
    }

    setTimeout(function () {
        button.click();
    });
}
public class MyClass
{
    public int Id { get; set; }
    public String Name { get; set; }
    public String Title { get; set; }
}

protected void Page_Load(object sender, EventArgs e)
{
    var items = Enumerable.Range(0, 10).Select(x => new MyClass()
    {
        Id = x,
        Name = "Name " + x,
        Title = "Title " + x
    });

    RadMultiColumnComboBox1.DataSource = items;
    RadMultiColumnComboBox1.DataBind();

}

protected void RadButton1_Click(object sender, EventArgs e)
{
    var button = sender as RadButton;
    var multiColumnComboBox = RadMultiColumnComboBox1;
    if (button.CommandName == "SelectedIndexChanged")
    {
        var dataItemString = button.CommandArgument;
        // Deserialize the stringified JS object from the commandArguments
        if (!string.IsNullOrWhiteSpace(dataItemString))
        {
            MyClass dataItem = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<MyClass>(dataItemString);
            Label1.Text = string.Format("Selected item: Id - {0}; Name - {1}; Title - {2};", dataItem.Id, dataItem.Name, dataItem.Title);
        }
        else
        {
            Label1.Text = "No item selected";
        }
    }
}
Public Class MyClass
    Public Property Id As Integer
    Public Property Name As String
    Public Property Title As String
End Class

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim items = Enumerable.Range(0, 10).[Select](Function(x) New [MyClass]() With {
        .Id = x,
        .Name = "Name " & x,
        .Title = "Title " & x
    })
    RadMultiColumnComboBox1.DataSource = items
    RadMultiColumnComboBox1.DataBind()
End Sub

Protected Sub RadButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim button = TryCast(sender, RadButton)
    Dim multiColumnComboBox = RadMultiColumnComboBox1

    If button.CommandName = "SelectedIndexChanged" Then
        Dim dataItemString = button.CommandArgument
        'Deserialize the stringified JS object from the commandArguments

        If Not String.IsNullOrWhiteSpace(dataItemString) Then
            Dim dataItem As [MyClass] = New System.Web.Script.Serialization.JavaScriptSerializer().Deserialize(Of [MyClass])(dataItemString)
            Label1.Text = String.Format("Selected item: Id - {0}; Name - {1}; Title - {2};", dataItem.Id, dataItem.Name, dataItem.Title)
        Else
            Label1.Text = "No item selected"
        End If
    End If
End Sub
In this article