[Solved] Help with templates

[pnr]

I have a combo box using template and “OnItemsRequested”. Now I need a separator in my combobox, how do I implement that? I am also using the filter function, and I need that to mark the typed letters in the results, just like it does without templates.

Thanks in advance!

[Yana]

Hi Peter,

You can set IsSeparator property of the item when you add it to the item collection of the combobox, also you should set HighlightTemplatedItems property of RadComboBox to true and add the following css style to your page:

<style type="text/css">
div.RadComboBoxDropDown .rcbSeparator
{
    font-size: 0;
    padding:0;
    height: 2px;
    min-height: 2px;
    line-height: 2px;
}
</style>

Regarding the second request - there's no way to mark the typed letters in the template, as this is a built-in function which fiters only the text of the items.

Greetings,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[pnr]

Thanks very much for the answer!
I can't make i work, I have the following code:

        <telerik:RadComboBox
                        ID="far_combo"
                        runat="server"
                        ToolTip="<%$ Resources:horse, indrykannonce_vaelgfaderen %>"
                        Skin="HorseSpecial"
                        EnableEmbeddedSkins="false"
                        CausesValidation="false"
                        ShowDropDownOnTextboxClick="false"
                        Height="150"
                        ShowToggleImage="false"
                        Width="100"
                        AutoPostBack="true"
                        AllowCustomText="true"
                        filter="Contains"
                        HighlightTemplatedItems="true"
                        OnSelectedIndexChanged="far_combo_OSIC"
                        EnableItemCaching="true"
                        EnableLoadOnDemand="true"
                        DropDownWidth="150"
                        OnItemsRequested="RadComboBox1_ItemsRequested">

                        <ItemTemplate>

                            <div style="width: 150px">
                                <%# DataBinder.Eval(Container, "Text")%>
                            </div>
                            <div>
                               id:<%# DataBinder.Eval(Container, "Value")%>
                            </div>
                        </ItemTemplate>


                    </telerik:RadComboBox>

 protected void RadComboBox1_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
    {
        ...........

        for (int i = itemOffset; i < endOffset; i++)
        {
            if (i % 2 == 0)
            {
                combo.Items.Add(new RadComboBoxItem("", ""));
                combo.Items[i].IsSeparator = true;
                 combo.Items[i].DataBind();
            }
            else
            {
               combo.Items.Add(new RadComboBoxItem(data.Rows[i]["StallionName"].ToString(), data.Rows[i]["StallionId"].ToString()));
               combo.Items[i].DataBind();
            }
        }

    }

[Atanas Korchev]

Hi pnr,

I am sending you a working example which demonstrates the required approach.

Regards,
Albert
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[pnr]

Hi again

Thanks very much for the example!
But when I am typing in the combobox (using the filter function) the separators disappears.

[Atanas Korchev]

Hello pnr,

Separator items are filtered out as they don't match the text of the combobox. As a workaround we can apply borders to the combobox items so they look as separators. Let us know if this is a feasible workaround.

Regards,
Albert
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[pnr]

That would be nice, can you give me an example of how to do that?

[Atanas Korchev]

Hi pnr,

I have modified the sample page to show you how to apply borders. Basically you need the following CSS:

    <style type="text/css">
        div.RadComboBoxDropDown .rcbItem
        {
            border-bottom: 2px solid black;
        }
    </style>

I hope this helps,
Albert
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.