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

2 posts, 0 answers
  1. Tyler Carver
    Tyler Carver avatar
    1 posts
    Member since:
    May 2010

    Posted 09 Mar 2011 Link to this post

    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
  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 15 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top