Split Button inside a DataGrid

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    2 posts
    Member since:
    Jun 2013

    Posted 01 Oct 2014 Link to this post

    Hello, I'm trying to add a Split Button to a standard asp.net DataGrid. I'd like to be able to handle the ItemCommand event to response to clicks on the button or associated menu item. Is this possible? Can I somehow make the menu click change the CommandName of the associated button?
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 03 Oct 2014 Link to this post

    Hi Andrew,

    Yes it is possible, however, you should take in mind the fact that args.IsSplitButtonClick() method is available only for OnClientClicked event which is not cancelable. Therefore I can suggest that you utilize two RadButtons as follows:
      - The first RadButton will be split button and will have its AutoPostBack property set to false. It will be the UI button.
      - The second RadButton will be the hidden in a span and will perform the actual postback.

    For example:
    ASPX:
    <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <script type="text/javascript">
                var postBackTriggerButtonID;
                var splitButtonID;
                function OnClientClicked(sender, args) {
                    splitButtonID = sender.get_id();
                    postBackTriggerButtonID = splitButtonID.substring(0, splitButtonID.length - 1) + "2";
                    if (args.IsSplitButtonClick() || !$find(postBackTriggerButtonID).get_commandName()) {
                        var currentLocation = $telerik.getBounds(sender.get_element());
                        var contextMenu = $find("<%=RadContextMenu1.ClientID%>");
                        contextMenu.showAt(currentLocation.x, currentLocation.y + currentLocation.height);
                    } else if (sender.get_text() == "AddToCart" || sender.get_text() == "RemoveFromCart") {
                        $find(postBackTriggerButtonID).set_commandName(sender.get_text());
                        $find(postBackTriggerButtonID).click();
                    }
                }
     
                function OnClientItemClicked(sender, args) {
                    //debugger;
                    var itemText = args.get_item().get_text();
                    var splitButton = $find(splitButtonID);
                    if (itemText == "AddToCart") {
                        $find(postBackTriggerButtonID).set_commandName("AddToCart");
                        splitButton.set_text("AddToCart");
                    }
                    else if (itemText == "RemoveFromCart") {
                        $find(postBackTriggerButtonID).set_commandName("RemoveFromCart");
                        splitButton.set_text("RemoveFromCart");
                    }
                    $find(postBackTriggerButtonID).click();
                }
     
            </script>
            <telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientItemClicked="OnClientItemClicked">
                <Items>
                    <telerik:RadMenuItem Text="AddToCart">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="RemoveFromCart">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadContextMenu>
            <h3>DataGrid Example</h3>
     
            <table cellpadding="5">
                <tr valign="top">
                    <td>
     
                        <b>Product List</b>
     
                        <asp:DataGrid ID="ItemsGrid"
                            BorderColor="black"
                            BorderWidth="1"
                            CellPadding="3"
                            AutoGenerateColumns="false"
                            OnItemCommand="Grid_CartCommand"
                            runat="server">
     
                            <HeaderStyle BackColor="#00aaaa"></HeaderStyle>
     
                            <Columns>
                                <asp:TemplateColumn>
                                    <ItemTemplate>
                                        <telerik:RadButton ID="RadButton1" runat="server" Text="AddToCart" AutoPostBack="false" EnableSplitButton="true" OnClientClicked="OnClientClicked" />
                                        <span style="visibility: hidden;">
                                            <telerik:RadButton ID="RadButton2" runat="server" CommandName="AddToCart" />
                                        </span>
                                    </ItemTemplate>
                                </asp:TemplateColumn>
                                <asp:BoundColumn
                                    HeaderText="Item"
                                    DataField="StringValue" />
     
                                <asp:BoundColumn
                                    HeaderText="Price"
                                    DataField="CurrencyValue"
                                    DataFormatString="{0:c}">
     
                                    <ItemStyle HorizontalAlign="right"></ItemStyle>
     
                                </asp:BoundColumn>
     
                            </Columns>
     
                        </asp:DataGrid>
     
                    </td>
                    <td>
     
                        <b>Shopping Cart</b>
     
                        <asp:DataGrid ID="ShoppingCart"
                            runat="server"
                            BorderColor="black"
                            BorderWidth="1"
                            GridLines="Both"
                            ShowFooter="false"
                            CellPadding="3"
                            CellSpacing="0">
     
                            <HeaderStyle BackColor="#00aaaa"></HeaderStyle>
     
                        </asp:DataGrid>
     
                    </td>
                </tr>
     
            </table>
     
        </form>

    You can find the full runnable VS example on this approach in the attached archive.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top