Split Button inside a DataGrid

[Andrew]

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?

[Danail Vasilev]

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