Adding Separator Items in JavaScript; Css reverts to 'rcbItem'

[Tim]

When adding new ComboBoxItems on the client (JavaScript), and specifically setting the "isSeparator" to true, it does not render correctly and instead still renders as an "rcbItem" in a standard "LI" element and the CssClass "rcbSeparator" is no where to be found (by inspecting the HTML).

categoryItem = new Telerik.Web.UI.RadComboBoxItem();
categoryItem.set_text("Separator");
categoryItem.set_value("Separator1");
comboItems.add(categoryItem);
categoryItem.set_isSeparator(true);

Does anyone know how to get Separator items to render correctly when adding them in JavaScript?

[Shinu]

Hi Tim,

Please have a look into the following JavaScript to add a separator item in RadComboBox.

JavaScript:

<script type="text/javascript">
    function AddItem(sender, args) {
        var combo = $find("<%= RadComboBox1.ClientID %>");
        var categoryItem = new Telerik.Web.UI.RadComboBoxItem();
        combo.trackChanges();
        categoryItem.set_text("Separator");
        categoryItem.set_value("Separator1");
        categoryItem.set_isSeparator(true);
        combo.get_items().add(categoryItem);
        combo.commitChanges();
    }
</script>

Thanks,
Shinu.

[Tim]

This is what my code already does, I only posted a brief sample of what I am doing.  However, this brings up a point, do you have to "track" and "commit" changes before/after each adding of an item?  I am only tracking once, and then after every item is added, then I commit.

[Tim]

So, if I add items on the Server (in the markup) as Separators, it works just fine.  However, adding Separator items in JS, the control removes the "rcbSeparator" css class (and any other css class for that matter that you may add to an item).  What's interesting is, even though it only has the "rcbItem" css class, the Control still somehow understands it's a "Separator" because it doesn't allow you to select those items.

[Tim]

The other interesting this is calling "combo.clearItems()" before adding these items, the "combo._itemData" remains "null" even after adding these items in JS.  However, if you inspect the "combo._itemData" with some sample items added in markup, you can see that the "_itemData" is supposed to be an array, and inside it, it has "isSeparator=true" for separator items.  So, if this "_itemData" is needed to properly render the "LI" tags, then this is definitely a bug.

[Eric]

I have the same issue above, but can not find solution. Is there any update? How to address this issue?

[Ivan Danchev]

Hello,

I can confirm that the inability to add a separator item to the RadComboBox is a bug. It is now logged and we will do our best to fix it in one of our future releases. We are sorry for any inconvenience it might have caused you.

The bug's progress can be followed on our Feedback Portal.

Regards,
Ivan Danchev
Telerik

[Eric]

One more issue. When I disable RadComboBox and enable on client side, the css: rcbSeparator and rcbDisabled are ​disappeared?

// disable

var combo = $find("<%=combobox.ClientID%>");

 combo.disable();

..............

 //enable

var combo = $find("<%=combobox.ClientID%>");
 combo.enable();​

[Ivan Danchev]

Hello,

Could you please provide mode details on the scenario? It would help us reproduce the observed behavior.

By default on disabling the ComboBox the "rcbDisabled" class is applied to the table under the main ComboBox div and the class is removed after re-enabling it. At my side I didn't notice an issue with the "rcbSeparator" class of the added in the markup or in the code behind separator items. The class was present after re-enabling the ComboBox.

Could you please post the content of the handlers you are disabling/enabling the ComboBox in?

Regards,
Ivan Danchev
Telerik