Achieve SelectedIndexChanged server-side event behavior with RadMultiColumnComboBox

RELATED TO:

AUTHOR: Peter Milchev

DATE POSTED: January 23, 2019

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 multicolumn combobox.

<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";
        }
    }
}


More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.