This is a migrated thread and some comments may be shown as answers.

Multi Column Rad Combo Box, How to Hide the item 1st then Put that Item on Top of list.

4 Answers 458 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

gc_0620 asked on 29 Jan 2013, 10:57 PM

MultiColumnCombo.jpg

Folks,

Using VS 2010 with RadControls for ASP.NET AJAX Q3 2012 SP2. Using this below link as a Prototype (the 1st example: Grid-like multi-column):

http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multicolumncombo/defaultcs.aspx

My question is: How to hide an item alongwith it's other attribute columns from that Multi Column RadCombo Box and Put that item along with its attributes always on top of the list. Example: I would like the Item with Customer id BONAP will always be the 1st Item (i.e. apprear before Customer Id: ALFKI). Attached is my desired result.

In the past I was able to hide and insert the item on the Top with Single Column in Item Databound event with below code.

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridEditableItem && e.Item.IsInEditMode && e.Item.OwnerTableView.Name == "MainClientAddress")

{

string defaultstate = "New York";

GridEditableItem itm = e.Item as GridEditableItem;

RadComboBox rb = (RadComboBox)itm.FindControl("RadComboBoxState");

RadComboBoxItem citem = rb.Items.FindItemByText(defaultstate);

rb.Items.Remove(citem);

rb.Items.Insert(0, citem);

}

But here I am dealing with Multi- Column Rad ComboBox. Below is my complete declaration, Any help will be appreciated.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ServerItemAddTemplateCombo.aspx.cs"

Inherits="ServerItemAddTemplateCombo" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadComboBox runat="server" ID="RadComboBox1" Height="190px" Width="520px" AutoPostBack = "true" AppendDataBoundItems="true"

MarkFirstMatch="true" DataSourceID="SqlDataSource1" EnableLoadOnDemand="true"

HighlightTemplatedItems="true" OnClientItemsRequested="UpdateItemCountField"

OnDataBound="RadComboBox1_DataBound" OnItemDataBound="RadComboBox1_ItemDataBound"

OnItemsRequested="RadComboBox1_ItemsRequested" Label="Grid-like multi-column:">

<HeaderTemplate>

<ul>

<li class="col1">Customer Id</li>

<li class="col1">Contact Name</li>

<li class="col2">City</li>

<li class="col3">Title</li>

</ul>

</HeaderTemplate>

<ItemTemplate>

<ul>

<li class="col1">

<%# DataBinder.Eval(Container.DataItem, "CustomerId") %></li>

<li class="col1">

<%# DataBinder.Eval(Container.DataItem, "ContactName") %></li>

<li class="col2">

<%# DataBinder.Eval(Container.DataItem, "City") %></li>

<li class="col3">

<%# DataBinder.Eval(Container.DataItem, "ContactTitle") %></li>

</ul>

</ItemTemplate>

<FooterTemplate>

A total of

<asp:literal runat="server" id="RadComboItemsCount" />

items

</FooterTemplate>

</telerik:RadComboBox>

</div>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:NorthWindConnectionString %>"

SelectCommand="SELECT * FROM [Customers] ORDER BY [CustomerID]"></asp:SqlDataSource>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function UpdateItemCountField(sender, args) {

//Set the footer text.

sender.get_dropDownElement().lastChild.innerHTML = "A total of " + sender.get_items().get_count() + " items";

}

</script>

</telerik:RadScriptBlock>

</form>

</body>

</html>

__________

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

public partial class ServerItemAddTemplateCombo : System.Web.UI.Page

{

protected void RadComboBox1_DataBound(object sender, EventArgs e)

{

//set the initial footer label

((Literal)RadComboBox1.Footer.FindControl("RadComboItemsCount")).Text = Convert.ToString(RadComboBox1.Items.Count);

}

protected void RadComboBox1_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)

{

//get all customers whose name starts with e.Text

string sql = "SELECT * from Customers WHERE ContactName LIKE '" + e.Text + "%'";

SqlDataSource1.SelectCommand = sql;

RadComboBox1.DataBind();

}

protected void RadComboBox1_ItemDataBound(object sender, RadComboBoxItemEventArgs e)

{

//set the Text and Value property of every item

//here you can set any other properties like Enabled, ToolTip, Visible, etc.

e.Item.Text = ((DataRowView)e.Item.DataItem)["ContactName"].ToString();

e.Item.Value = ((DataRowView)e.Item.DataItem)["CustomerID"].ToString();

}

Thanks

gc_0620

4 Answers, 1 is accepted

answered on 01 Feb 2013, 02:09 PM

Hello Ghulam,

Thank you for contacting Telerik Support.

Regarding the desired functionality you attempt to achieve, I can suggest you to use the combo's OnDataBound event. In the handler of the event, you could find the item by its value or text and insert it at the first position. Please consider the following approach, in order to achieve the desired functionality:

protected void RadComboBox1_DataBound(object sender, EventArgs e)

{

//set the initial footer label

((Literal)RadComboBox1.Footer.FindControl("RadComboItemsCount")).Text = Convert.ToString(RadComboBox1.Items.Count);

RadComboBoxItem firstItem = RadComboBox1.Items.FindItemByValue("BONAP");

RadComboBox1.Items.FindItemByValue("BONAP").Remove();

RadComboBox1.Items.Insert(0, firstItem);

}

Hope this would help. I will be glad to assist you any further.

All the best,
Nencho
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 02 Feb 2013, 04:37 PM

Hi Nencho,

I am sorry to say that you missed my Point. My question was: How to hide an item alongwith it's other attribute columns from that Multi Column RadCombo Box and Put that item along with its attribute columns always on top of the list. The solution you provided only inserting the Customer Id not related attribute columns.

Another ward I would like to remove Customer Id BONAP from the list and insert it on top of the list along with its other attribute column values (i.e. show: Customer Id = BONAP, Contact Name= Laurence Lebihan, City= Marseille, Title = Owner in 1st row). In my original post, my attached file (MultiColumnCombo.jpg) specified the desired intention.

Thanks

gc_0620

answered on 06 Feb 2013, 02:26 PM

sample.zip

Hello Ghulam,

Do you attempt to show the specified item always on top of the list, event if you scroll through the list of items? In addition, I have recorded a video and attached my sample test web page, demonstrating the behavior at my end. The RadComboBoxItem with value BONAP is inserted at the top of the list, along with it's attributes. Please review them and let me know if I am not testing properly or I have to add something to achieve the desired scenario.

Greetings,
Nencho
the Telerik team