New to Telerik UI for ASP.NET AJAX? Start a 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.NET
<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>
JavaScript
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();
});
}
C#
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";
}
}
}