Server-Side Data Binding
RadMultiSelect can be bound to standard server data sources like List<T>
, SqlDataSource
or a DataTable
. The data from the server data source creates MultiSelect items which are serialized and sent to the client-side as a JSON object. It is parsed on the client-side and passed to the underlying Kendo UI MultiSelect which is an entirely client-side widget.
The additional fields you would like to access on the client-side should be passed to the DataKeyNames
property, as a comma-separated string. Also, you can add custom data to the items via the Attributes
collection which will be serialized and available on the client-side.
The
DataTextField
andDataValueField
are available by default on the client-side and there is no need to add them explicitly to theDataKeyNames
collection.
Example 1: Declare items in the Markup
<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server" DataTextField="text" DataValueField="value" Filter="Contains" Width="400px"
Placeholder="Select attendees...">
<Items>
<telerik:MultiSelectItem Text="Steven White" Value="1"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Text="Nancy King" Value="2"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Text="Nancy Davolio" Value="3"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Text="Robert Davolio" Value="4"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Text="Michael Leverling" Value="5"></telerik:MultiSelectItem>
</Items>
</telerik:RadMultiSelect>
Example 2: Add items programmatically
<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server" DataTextField="text" DataValueField="value" Filter="Contains" Width="400px"
Placeholder="Select attendees...">
</telerik:RadMultiSelect>
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
for (int i = 0; i < 5; i++)
{
MultiSelectItem newItem = new MultiSelectItem() { Text = "Item " + i, Value = i.ToString() };
RadMultiSelect1.Items.Add(newItem);
}
}
}
Example 3: Bind to a
SqlDataSource
<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server"
DataSourceID="SqlDataSource1" DataTextField="ProductName" DataValueField="ProductID" />
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ProductID], [ProductName] FROM [Products] ORDER By ProductName" />
Example 4: Bind to a List of anonymous objects
<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server" DataTextField="TheText" DataValueField="ID" />
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
var data = Enumerable.Range(0, 10).Select(x => new
{
ID = x,
TheText = "Name " + x,
MoreData = "Extra " + x
});
RadMultiSelect1.DataSource = data;
RadMultiSelect1.DataBind();
}
}
Example 5: Bind to a List of named objects
<telerik:RadMultiSelect ID="RadMultiSelect2" runat="server" DataTextField="Name" DataValueField="Id" />
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)
{
if (!Page.IsPostBack)
{
var items = Enumerable.Range(0, 10).Select(x => new MyClass()
{
Id = x,
Name = "Name " + x,
Title = "Title " + x
});
RadMultiSelect2.DataSource = items;
RadMultiSelect2.DataBind();
}
}
Example 6: Bind to a DataTable
<telerik:RadMultiSelect ID="RadMultiSelect3" runat="server" DataTextField="ShipName" DataValueField="OrderID" />
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
RadMultiSelect3.DataSource = GetData();
RadMultiSelect3.DataBind();
}
}
private DataTable GetData()
{
DataTable dataTable = new DataTable();
dataTable.Columns.Add(new DataColumn("OrderID", typeof(int)));
dataTable.Columns.Add(new DataColumn("ShipName", typeof(String)));
for (int i = 0; i < 70; i++)
{
dataTable.Rows.Add(i + 1, "Name " + (i + 1));
}
return dataTable;
}