How to get Index of row with button_click event

Question

<asp:GridView class="table table-striped table-bordered " ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="dish_id" DataSourceID="SqlDataSource1" OnRowCommand="GridView1_RowCommand">
    <Columns>
        <asp:BoundField DataField="dish_id" HeaderText="ID" ReadOnly="True" SortExpression="dish_id" />

        <asp:TemplateField>
            <ItemTemplate>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="row">
                                <div class="col-12">
                                    <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="X-Large" Text='<%# Eval("dish_name") %>'></asp:Label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    Category-<asp:Label ID="Label2" Font-Bold="True" runat="server" Text='<%# Eval("cat_name") %>'></asp:Label>
                                    &nbsp;| Cuisine-
                                                    <asp:Label ID="Label3" Font-Bold="True" runat="server" Text='<%# Eval("cuisine") %>'></asp:Label>
                                    &nbsp;| Price-
                                                    <asp:Label ID="Label4" Font-Bold="True" runat="server" Text='<%# Eval("price") %>'></asp:Label>

                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    Description-
                                                    <asp:Label Font-Bold="True" ID="Label5" runat="server" Text='<%# Eval("dish_description") %>'></asp:Label>

                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <asp:Image class="img-fluid" ID="Image1" runat="server" ImageUrl='<%# Eval("dish_img_link") %>' />
                        </div>
                        <div class="col-lg-2">
                            <asp:Button ID="Button1" class="btn btn-outline-info btn-block btn-sm" runat="server" Text="Add to Cart" OnClick="Button1_Click" />
                        </div>
                    </div>
                </div>
            </ItemTemplate>
        </asp:TemplateField>

    </Columns>
</asp:GridView>

I have this GridView & button (Add to Cart) in front of each row, I want to the get ID of the specific row whose button is clicked. I watched some tutorials that have used checkbox change events, but I want to get id using button_click Event. Is it possible?

Answer 1

You don't mention if this is a client side Java click, or a server side one? And when you want to START using custom controls and standard asp.net controls in a grid? Then I would STRONG recommend you flip over to use a list-view. They are much similar, but list-views support standard controls WITHOUT having to wrap the control in a template - thus markup is MUCH cleaner, and you can with greater ease drop in buttons etc. into that given row.

The cheating way (by-pass all gridview events), power past the issue, don't care about much?

Then do this for your button:

<asp:Button ID="Button1" class="btn btn-outline-info btn-block btn-sm" runat="server"
 Text="Add to Cart" OnClick="Button1_Click" 
 MyPKID = '<%# Eval("ID") %>'
 MyRow  = '<%# Container.DataItemIndex %>'
 />

Note VERY interesting how I grab both the pK of the data row (in above example the primary key row column name was "ID"). This is a GREAT trick since OFTEN you do NOT want the PK row id to display in the grid, and it can be a PAIN to hide it. So in above, I grab BOTH PK of the data base row, and also the row index - was not really sure which one you wanted - so lets get BOTH values.

Ok, now in your click event, you can do this:

protected void btnRowJump_Click(object sender, EventArgs e)

{
Button btn = sender;

int MyRow = btn.Attributes.Item("MyRow");
int MyPKID = btn.Attributes.Item("MyPKID");

Debug.Print("Database PK id = " + MyPKID.ToString());
Debug.Print("grid row click =  = " + MyRow.ToString());

// Get grid row data item

GridViewRow MyGvRow = GridView1.Rows(MyRow);
}

So using your own "custom" attriributes can often be handy. I might have SEVERAL data items in that database row - but NOT displayed in the grid. So you see I do this:

 <asp:LinkButton ID="pUploadFiles"  runat="server" 
                    Text='Upload Files'

         PortalComp      = '<%# Eval("PortalComp")%>'
         ContactNameID   = '<%# Eval("ContactNameID")%>'
         QuoteNum        = '<%# Eval("QuoteNum")%>'
         ProjectHeaderID = '<%# Eval("ID")%>'
         ContactGeneralID = '<%# Eval("ContactGeneralID")%>'
   </asp:LinkButton>

So as LONG as the data rows exist at data bind time, then I don't have to include these rows in the display part - but any row from the data source at bind time is available with above. So in above, those rows were NOT displayed in the grid, but I still get/grab them into a custom attributes and pluck them out as per the code example.

Having stated the above? Do keep in mind that the above trick does NOT trigger the GridView change index event - so you can't say in code go

        MyRvRow2 = GridView1.SelectedRow

However, I find often I don't care or need or want the actual grid row selected to change, and it not a big deal. And you can force the row to change with this:

    GridView1.SelectedIndex = MyRow

Most examples suggest to set CommandName = "My Select" and then use CommandArugment. This means you don't have a separate button click event stub, but use the RowCommand event of the gridview. With the above "custom attribote" trick, you tend to wind up writing a wee bit less code, but you get nice separate code event stubs for each button - and I in a lot of cases prefer this over that of leveraging and using the GridView event model.