Conditional Item Templates with RadComboBox

sanpaco picture sanpaco · Dec 22, 2009 · Viewed 7.4k times · Source

I have a RadComboBox that I am using to display department name and abbreviations. I am using an Item Template with a LinqDataSource to make each item appear as:

DeptAbbr - (DeptName)

Here is the code I am using to do this and it works fine:

<telerik:RadComboBox ID="rcbDepartments" runat="server" AppendDataBoundItems="True"
        OnInit="rcbDepartments_Init" DataTextField="DepartmentAbbr" AutoPostBack="True"
        DataSourceID="ldsDepartments" DataValueField="DepartmentID" HighlightTemplatedItems="true"
        NoWrap="true" Width="250px">
        <ItemTemplate>
            <div>
                <b>
                    <%# Eval("DepartmentAbbr")%></b><%# Eval("DepartmentName", " - ({0})") %>
            </div>
        </ItemTemplate>
    </telerik:RadComboBox>

My question is this. I want to add an initial item in the list that is for "All Departments" and is the default item. I can do this easily, but the problem I'm having is that because I am not storing an "All Departments" entry in the database, the templating shows a blank space at the beginning of the items list when you pull down the combo box. I'm trying to find out if there is any way to template all but first item in the list?

Note: I have also tried do a conditional in the Eval like this:

<b><%# (Eval("DepartmentAbbr") != null) ? Eval("DepartmentAbbr") : "All Departments" %></b><%# Eval("DepartmentName", " - ({0})") %>

But it only evaluates on the items that are databound and not the initial item which I am sticking in manually. In other words, if I change the above statement to be:

<b><%# (Eval("DepartmentAbbr") == null) ? Eval("DepartmentAbbr") : "All Departments" %></b><%# Eval("DepartmentName", " - ({0})") %>

Then I just get a list with one blank item at the top and the rest reading "All Departments".

My work around for this problem has been to do some funky selection stuff with LINQ server side, but that has forced me to get rid of all templating and html formatting.

Answer

Kevin Babcock picture Kevin Babcock · Jan 13, 2010

You can define the 'All Departments' RadComboBoxItem as a static item in the <Items> collection. Since you have enabled the AppendDataBoundItems property, you don't want to bind to your data source until after the control has already bound the static items; otherwise you'll get the blank space you are seeing when expanding the combo box. Also, use DataBinder.Eval(Container, "Text") to render the DepartmentAbbr field. Since you have set this field as the DataTextField for the control, that value will always render. If not, you'll get the empty space again when the control binds to the static item because it doesn't know what DepartmentAbbr is; it only has a Text field. Here's an example to get you going:

<telerik:RadComboBox ID="RadComboBox1" runat="server"
    AppendDataBoundItems="True" 
    DataTextField="Abbr"
    AutoPostBack="True"
    DataValueField="DeptID" 
    HighlightTemplatedItems="true"
    NoWrap="true" 
    Width="250px">
    <Items>                
        <telerik:RadComboBoxItem runat="server" Text="All Departments" />
    </Items>
    <ItemTemplate>
        <div>
            <b><%# DataBinder.Eval(Container, "Text")%></b><%# Eval("Name", " - ({0})") %>
        </div>
    </ItemTemplate>
</telerik:RadComboBox>

public partial class _Default : System.Web.UI.Page
{
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        RadComboBox1.Load += new EventHandler(RadComboBox1_Load);
    }

    protected void RadComboBox1_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // Ensure the static items are already bound before assigning
            // new data to the DataSource property
            RadComboBox1.DataBind();

            var departments = new[] { 
                new { DeptID = 1, Abbr = "ACME", Name = "ACME Corporation" },
                new { DeptID = 2, Abbr = "MSFT", Name = "Microsoft Corporation" },
                new { DeptID = 3, Abbr = "GOOG", Name = "Google, Inc" }
            };
            RadComboBox1.DataSource = departments;
            RadComboBox1.DataBind();
        }
    }
}

Hope that helps!