This is a migrated thread and some comments may be shown as answers.

Split Button inside a DataGrid

1 Answer 72 Views
Button
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 01 Oct 2014, 04:56 PM
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?

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 03 Oct 2014, 02:51 PM
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.

 
Tags
Button
Asked by
Andrew
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or