Clicking a Checkbox in an ItemTemplate closes RadToolBarDropDown Item

[Chad]

Hello All,

I have a RadToolBar with a RadDropDownList item on it. Within that RadDropDownList I have a button that is templated to have a checkbox, textbox and button. The idea is for the user to fill in the textbox, check the checkbox (if desired) and click the button for the server to do some activity. However, when the user clicks the checkbox, the entire dropdownlist closes. How can I stop this from happening. 

<telerik:RadToolBar ID="RadToolBarGridMenu" runat="server" Width="100%"
            onbuttonclick="RadToolBarGridMenu_ButtonClick" OnClientButtonClicked="ToolbarClicked" Skin="Black" >
            <Items>
                 <telerik:RadToolBarDropDown Text="View">
                    <Buttons>
                        <telerik:RadToolBarButton Text="All Projects" />
                        <telerik:RadToolBarButton IsSeparator="true" />
                        <telerik:RadToolBarButton CssClass="logo">
                            <ItemTemplate>
                                 <table id="NewView" width="275px" style="margin-left:25px">
                                    <tr><td>View Name:</td><td><asp:TextBox ID="TextBoxViewName" runat="server" Width="100px" /></td></tr>
                                    <tr><td>Is Default View:</td><td><asp:CheckBox ID="CheckBoxViewDefault" runat="server" /></td></tr>
                                    <tr><td colspan="2"><asp:Button ID="ButtonCreateView" runat="server" Text="Save Template As View" /></td></tr>
                                 </table>
                            </ItemTemplate>
                        </telerik:RadToolBarButton>
                    </Buttons>
                </telerik:RadToolBarDropDown>
            </Items>
        </telerik:RadToolBar>

Thank you for your help

[Yana]

Hi Chad,

Could you please try it like this:

<telerik:RadToolBarButton CssClass="logo">
    <ItemTemplate>
        <div onclick="StopPropagation(event)">
         <table id="NewView" width="275px" style="margin-left:25px">
            <tr><td>View Name:</td><td><asp:TextBox ID="TextBoxViewName" runat="server" Width="100px" /></td></tr>
            <tr><td>Is Default View:</td><td><asp:CheckBox ID="CheckBoxViewDefault" runat="server" /></td></tr>
            <tr><td colspan="2"><asp:Button ID="ButtonCreateView" runat="server" Text="Save Template As View" /></td></tr>
         </table>
         </div>
    </ItemTemplate>
</telerik:RadToolBarButton>

and StopPropagation method:

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

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.

[Chad]

Hi Yana,

Thank you! That worked perfectly.