Accessing columns (of a multicolumn combobox) on the client-side when the combobox is databound in an external callback page

 

Article information
Article relates to	RadComboBox v2.1+ RadComboBox AJAX (Prometheus) Telerik.Web.UI 2007.3.1425
Created by	Nick, Telerik
Last modified by	Veskoni, Telerik

 
 
HOW-TO
Access columns (of a multicolumn combobox) on the client-side when the combobox is databound in an external callback page




SOLUTION
For RadComboBox AJAX (Prometheus) an external streamer page is no longer needed.


ASPX:

<telerik:RadComboBox runat="server"

ID="RadComboBox1"

Width="455px"

HighlightTemplatedItems="true"

EnableLoadOnDemand="true"

OnClientSelectedIndexChanged="onClientSelectedIndexChanged"

OnItemDataBound="RadComboBox1_ItemDataBound"

OnItemsRequested="RadComboBox1_ItemsRequested">

<ItemTemplate>

<table style="width:415px">

<tr>

<td style="width:125px;">

<%# DataBinder.Eval(Container.DataItem, "ID") %>

</td>

<td style="width:125px;">

<%# DataBinder.Eval(Container.DataItem, "ProductName") %>

</td>

<td style="width:125px;">

<%# DataBinder.Eval(Container.DataItem, "Price") %>

</td>

</tr>

</table>

</ItemTemplate>

<HeaderTemplate>

<table style="width:415px">

<tr>

<td style="width:125px;">

ID

</td>

<td style="width:125px;">

Product Name

</td>

<td style="width:125px;">

Price

</td>

</tr>

</table>

</HeaderTemplate>

</telerik:RadComboBox>

Javascript:

<script type="text/javascript">

function onClientSelectedIndexChanged(sender, eventArgs)

{

var message = "ID: " + eventArgs.get_item().get_attributes().getAttribute("ProductID");

message += "\nProduct Name: " + eventArgs.get_item().get_attributes().getAttribute("Name");

message += "\nPrice: " + eventArgs.get_item().get_attributes().getAttribute("Price");

alert(message);

}

</script>

C#:

protected void RadComboBox1_ItemsRequested(object o, Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs e)

{

SqlConnection connection =

new SqlConnection(ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString);

SqlCommand selectCommand =

new SqlCommand(@"   SELECT ID, ProductName, Price FROM Products

WHERE LOWER(ProductName) LIKE '" + e.Text + "%'", connection);

SqlDataAdapter adapter = new SqlDataAdapter(selectCommand);

DataTable products = new DataTable();

adapter.Fill(products);

RadComboBox1.DataTextField = "ProductName";

RadComboBox1.DataValueField = "ID";

RadComboBox1.DataSource = products;

RadComboBox1.DataBind();

}

protected void RadComboBox1_ItemDataBound(object sender, RadComboBoxItemEventArgs e)

{

DataRowView row = e.Item.DataItem as DataRowView;

e.Item.Attributes["Name"] = row["ProductName"].ToString();

e.Item.Attributes["ProductID"] = row["ID"].ToString();

e.Item.Attributes["Price"] = row["Price"].ToString();

}

SOLUTION

IMPORTANT NOTE
For consistency among Telerik controls and the built-in ASP.NET controls, in RadComboBox v2.1 the previous CustomAttributes collection was renamed to Attributes.
You can add custom attributes directly to the Attributes collection of RadComboBoxItem and access them client and server side using RadComboBoxItem.Attributes. To get a full list of API changes in RadComboBox version 2.1.x, please refer to the Changes and Backward Compatibility section in the Help manual.

If you are using RadComboBox v2.1+ you should use the Attributes collection to achieve your task (for older, pre v2.1 versions you need to use CustomAttributes). You should add custom attribute and set the value of the column you want during the ItemDataBound event, like:

private void RadComboBox1_ItemDataBound(object o, Telerik.WebControls.RadComboBoxItemDataBoundEventArgs e)
{
    e.Item.CustomAttributes["Name"] = ((DataRowView) e.Item.DataItem)["CompanyName"].ToString();
    e.Item.Text = ((DataRowView) e.Item.DataItem)["CompanyName"].ToString();
}


Then you can get the value on the client-side, like shown below:

<script language="JavaScript" type="text/javascript">
    function IndexChanging(item) 
    { 
        //RadComboBox v2.1.x
        alert(item.Attributes.Name);
        //RadComboBox versions prior to 2.1.x
        //alert(item.CustomAttributes.Name);
    }
</script>

<radc:RadComboBox externalcallbackpage="ExternalCallback.aspx" OnClientSelectedIndexChanging="IndexChanging"> 



 

Streamer C#.cs Streamer ASPX.aspx Main ASPX.aspx C# code.cs

Comments

• Kevin Pipher , Jan 25, 2008

  Sample code worked perfectly for my application. I needed to pull the text from a multi-column drop down. Thanks, Kevin

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!