RadComboBox li (list item) html element click is causing the list box to close incorrectly

[Tyler Carver]

I'm using the RadComboBox as a mutli select with checkboxes.  The template looks like the following:

<ItemTemplate>
    <div onclick="StopPropagation(event)" class="combo-item-template">
        <asp:CheckBox runat="server" ID="chk1" onclick="onCheckBoxClick(this)"/>
        <asp:Label runat="server" ID="Label1" AssociatedControlID="chk1"><%# Eval("Value")%>
        </asp:Label>
    </div>
</ItemTemplate>

This is working great, however, there are some issues when clicking on html elements that are not the checkbox or label.  When clicking on other HTML elements like the DIV or the LI that is created by the radcombobox control the drop down menu with the items closes and updates the text of the combo box with the item that is contained in the DIV or LI wither it is checked or not.

An example of this would be to click the drop down button of the combo box, put the mouse cursor to the far left passing the checkbox control and clicking.  The drop down list will close and the item name will appear in the text of the control, HOWEVER, the item will not have been checked, because the checkbox control was never clicked.

I have controlled this unwanted behavior for the div by adding a method to the onclick attribute.

function StopPropagation(e)
{
    //cancel bubbling
    e.cancelBubble = true;
    if (e.stopPropagation)
    {
        e.stopPropagation();
    }
}

This fixes the issue with the div and when the div is clicked nothing happens as desired.  HOWEVER, how do I do this same thing for the LI that is created and controlled by the RadComboBox?  It has its own custom style that gives it padding and therefore increases its ability to be clicked.  I need to stop the click propagation of the List Item as it is giving me this broken behavior, its acting like it is a regular non templated combo box and the item has been selected.

Thanks,
Tyler

[Simon]

Hello Tyler Carver,

You can make this work if you attach the click event handler to the outermost element, i.e. the element of the item, e.g.

$telerik.$('.rcbItem').click(function(e) {
  e.stopPropagation();
})

I hope this helps.

Best wishes,
Simon
the Telerik team