[Solved] RadToolBarDropDown does not expand when used in a TempletedColumn

[Randy]

I have a RadGrid that contains a TempletedColumnn containing a RadToolBar.  If I add buttons to the toolbar directly, they actually fire the OnClientButtonClicked event as expected.  However, If I add a RadToolBarDropDown, it never expands on click.  It seems like is just fires a postback and the grid row is selected.   Regular RadToolBrButtons do not cause the grid to postback.   What do I need to do to get the RadToolBarDropDown to expand so I can select a child Button?

Thanks, Randy

[Sebastian]

Hello Randy,

I performed a quick test locally by wrapping RadToolBar instance inside a RadGrid template column and adding standard button and dropdown button elements to it. Everything behaved as expected in my local tests and the OnClientButtonClicked event was raised for all buttons.

You will find the code I used down below in this forum thread. I will appreciate if you outline the differences between my configuration and yours - they can lead us to the source of the issue to address it accordingly.

            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <script type="text/javascript">
              function ButtonClicked(sender, eventArgs)
              {
                alert("Button clicked");
              }
            </script>
            <telerik:RadGrid ID="RadGrid3" DataSourceID="SqlDataSource1" AllowSorting="True"
                AllowPaging="True" PageSize="5" runat="server" GridLines="None" Width="600px" Skin="Office2007">
                <MasterTableView>
                  <Columns>
                    <telerik:GridTemplateColumn UniqueName="ToolbarColumn">
                      <ItemTemplate>
                        <telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientButtonClicked="ButtonClicked"
                         Skin="Office2007">
                          <Items>
                            <telerik:RadToolBarButton Text="Default button" />
                            <telerik:RadToolBarDropDown Text="DropDown with options">
                              <Buttons>
                                <telerik:RadToolBarButton Text="Option1" Value="1" />
                                <telerik:RadToolBarButton Text="Option2" Value="2" />
                              </Buttons>
                            </telerik:RadToolBarDropDown>
                          </Items>
                        </telerik:RadToolBar>
                      </ItemTemplate>
                    </telerik:GridTemplateColumn>
                  </Columns>
                </MasterTableView>
            </telerik:RadGrid>
            <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT EmployeeID, FirstName, LastName FROM Employees"
                runat="server"></asp:SqlDataSource>

Best regards,
Sebastian
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.

[Randy]

In my application I have the EnablePostBackOnRowClick clientSetting set to True.  When I set this to false, the submenu appears correctly. 

 

<

 

ClientSettings EnablePostBackOnRowClick="true">

Randy

 

[Randy]

Also,

just to be clear, setting EnablePostBackOnRowClick to false is not an option for us. I need a way to killing the postback when this setting is true. 

Thanks, randy

[Sebastian]

Hello Randy,

Thank you for the clarification. Now I see what you mean.

In order to prevent the postback from happening, you will need to intercept the onclick event of the RadToolBar instance and cancel the event bubbling from its handler. See the updated version of the code below for more details:

            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <script type="text/javascript">
              function ButtonClicked(sender, eventArgs)
              {
                alert("Button clicked");
              }
              function ToolbarClicked(evt)
              {
                evtevt = evt || window.event;

                evt.cancelBubble = true;
                evt.returnValue = false;

                if (evt.stopPropagation)
                {
                   evt.stopPropagation();
                   evt.preventDefault();
                }

              }
            </script>
            <telerik:RadGrid ID="RadGrid3" DataSourceID="SqlDataSource1" AllowSorting="True"
                AllowPaging="True" PageSize="5" runat="server" GridLines="None" Width="600px" Skin="Office2007">
                <MasterTableView>
                  <Columns>
                    <telerik:GridTemplateColumn UniqueName="ToolbarColumn">
                      <ItemTemplate>
                        <telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientButtonClicked="ButtonClicked"  onclick="ToolbarClicked(event)"
                         Skin="Office2007" AutoPostBack="true">
                          <Items>
                            <telerik:RadToolBarButton Text="Default button" />
                            <telerik:RadToolBarDropDown Text="DropDown with options">
                              <Buttons>
                                <telerik:RadToolBarButton Text="Option1" Value="1" />
                                <telerik:RadToolBarButton Text="Option2" Value="2" />
                              </Buttons>
                            </telerik:RadToolBarDropDown>
                          </Items>
                        </telerik:RadToolBar>
                      </ItemTemplate>
                    </telerik:GridTemplateColumn>
                  </Columns>
                </MasterTableView>
                <ClientSettings EnablePostBackOnRowClick="true" />
            </telerik:RadGrid>
            <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient" SelectCommand="SELECT EmployeeID, FirstName, LastName FROM Employees"
                runat="server"></asp:SqlDataSource>

  
Best regards,
Sebastian
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.

[Randy]

That worked.  Thanks.

One question...

Is this a bug in your sample?  If not, what is this doing?

 evtevt = evt || window.event;  

[Veli]

Hello Randy,

evt = evt || window.event

is a ternary logical expression. In C# it would look like:

evt = evt == null ? evt : window.event

Shortly, if evt is undefined, it will evaluate to false and window.event will be assigned to evt. If evt is some object, it will evaluate to true, and the expression will be prevented from further evaluation.

Kind regards,
Veli
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.