adding button to each row in gridview that has a drop down menu

Question

I have a Gridview that I want to add a "Actions" button to each row that is added that upon click will allow me to edit or delete a row.

In my picture it looks like a drop down list. I prefer a button however a dropdownlist will work as a last resort.

enter image description here This is what I have tried so far:

          <asp:GridView runat="server" ID="grdvwDepositTransaction"
                AutoGenerateColumns="false" DataKeyNames="Status"
                OnRowCommand="grdvwDepositTransaction_RowCommand" ShowHeaderWhenEmpty="true" ShowFooter="true" OnRowDataBound="grd_RowDataBound"
                CssClass="grid" width="750">
               <HeaderStyle CssClass="HeaderTemplate" />
               <FooterStyle CssClass="FooterTemplate" />
               <Columns>
                  <asp:TemplateField >

              <ItemTemplate>
                  <input onclick="javascript: showMenu(); return false;" onmouseout="javascript: hideMenu(); return false;" type="button" class="savebutton" value="Actions" id="actionMenuRowSomething" />
            <ul id="actionMenuRow" style="display: none; margin-top: -6px; text-align: left; padding: 0px; margin-right: 0px; " onmouseover="javascript: showMenu(); return false;" onmouseout="javascript: hideMenu(); return false;" class="ui-menu">
                <li><a href="#" onclick="ShowHomeScreen();">something</a></li>
                <li>
                    <asp:LinkButton ID="something" runat="server" Text="View Updates" style="width:100px;">works</asp:LinkButton>
                </li>
            </ul>
              </ItemTemplate>
                      <EditItemTemplate>

                      </EditItemTemplate>
               </asp:TemplateField>     
                  <asp:BoundField DataField="DepositEntry.cardNumber" HeaderText="Card Number" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.accountNumber" HeaderText="Account Number" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.firstName" HeaderText="Customer Name" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.transactionDateTime" HeaderText="Transaction Date/Time" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.cashAmount" HeaderText="Cash Amount" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.depositAmount" HeaderText="Envelope Deposit Amount" ItemStyle-CssClass="mediumColumn columnCenter" />
               </Columns>

                    <EmptyDataTemplate>
                        <br />
                         <br /><br />
                        <span style="font-weight: bold; text-anchor:middle;">No Transactions have been entered</span>
                    </EmptyDataTemplate>                   
            </asp:GridView>

I think it would be better to have checkboxes or radio boxes for every row and have the actions just in one place. Select the row(s) you want to perform the action on and then select the action. This way you will not have numerous buttons clogging up the grid. Think of any email account: you choose the emails then you perform action. — Code Whisperer, Oct 20 '14 at 19:41
The drop down menu would ensure an unclogged row full of buttons. The menu would be populated with - edit, delete and other actions to follow. — Indianaadmin stopstuck, Oct 20 '14 at 19:50
@CodeWhisperer Right that's exactly what I want. for each row a dropdownmenu that contains options to update, delete, copy etc.. that specific row. — Indianaadmin stopstuck, Oct 21 '14 at 12:16

score 0 · Answer 1 · answered Oct 20 '14 at 19:50

Try the following:

 <asp:TemplateField HeaderText="">                         
                        <EditItemTemplate>
                            <asp:ImageButton ID="ibtnUpdate" runat="server" CommandName="Update" CausesValidation="true" ImageUrl="~/Content/Images/h.ico"  />
                            <asp:ImageButton ID="ibtnCancel" runat="server" CommandName="Cancel" CausesValidation="false" ImageUrl="~/Content/Images/j.ico"  />
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:ImageButton ID="ibtnEdit" runat="server" CommandName="Edit" CausesValidation="false" ImageUrl="~/Content/Images/k.ico"  />
                            <asp:ImageButton ID="ibtnDelete" runat="server" CommandName="Delete" CausesValidation="false" ImageUrl="~/Content/Images/l.ico"  />
                        </ItemTemplate>                          
                    </asp:TemplateField>

Where you can reference the images however way you like.

Brinky · Accepted Answer · 2014-10-20T20:47:37.103

0

Any reason it has to be limited to only one column? Then you can use:

AutoGenerateDeleteButton="True"
AutoGenerateEditButton="True"

...and the hook-up is immensely easier than figuring out which dropdown item was selected, etc.

edited Oct 20 '14 at 20:47

answered Oct 20 '14 at 19:55

Brinky

418
3
9

adding button to each row in gridview that has a drop down menu

2 Answers2