GridView with Buttons ASP.NET C#

GridView with Buttons ASP.NET C#

First make a gridview in your .aspx page (Design page)

Here’s my code :

<asp:GridView runat="server" ID="datagridview" CssClass="mydatagrid" AllowPaging="True"
CellPadding="4" ForeColor="#333333" GridLines="None" BorderColor="#003300" BorderStyle="Solid"
BorderWidth="1px" Font-Size="11pt" Font-Names="Century" OnPageIndexChanging="datagridview_PageIndexChanging"
OnRowCommand="datagridview_RowCommand">
<RowStyle BackColor="#EFF3FB" BorderColor="Black" BorderWidth="1px" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<AlternatingRowStyle BackColor="White" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<Columns>
<asp:ButtonField ButtonType="Button" HeaderText="ClickHere" Text="ViewDetails" CommandName="ViewDetails"
ControlStyle-BackColor="#507CD1" ControlStyle-ForeColor="White" ControlStyle-Font-Size="15px" />
</Columns>
</asp:GridView>

Add Labels like this below it

<br />
<asp:Label runat="server" Text="Click On a Button to view details of a product" ID="lblname" ForeColor="#507CD1" Font-Size="20px"></asp:Label>
<br />
<asp:Label runat="server" Text="" ID="lbldesc" ForeColor="#507CD1" Font-Size="20px"></asp:Label>
<br />
<asp:Label runat="server" Text="" ID="lblstore" ForeColor="#507CD1" Font-Size="20px"></asp:Label>
<br />
<asp:Label runat="server" Text="" ID="lblprice" ForeColor="#507CD1" Font-Size="20px"></asp:Label>

Open your Web.config file and define your connectionString :

<connectionStrings>
<add name="myconnectionString" connectionString="Data Source=HITESH\SQLEXPRESS;Initial Catalog=MyDatabase;User ID=hitesh;Password=789"/>
</connectionStrings>

Open code file .cs file

and write the code to fill the GridView

public void fillDataGrid()
{
con = new SqlConnection(myconnectionString);
cmd = new SqlCommand("select * from mytable", con);
con.Open();
adapter = new SqlDataAdapter(cmd);
ds = new DataSet();
adapter.Fill(ds, "mytable");
datagridview.DataSource = ds.Tables[0];
datagridview.DataBind();
con.Close();
}

Call this method on PageLoad event

protected void Page_Load(object sender, EventArgs e)
{
fillDataGrid();
}

Add the code for GridView Paging :

protected void datagridview_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
datagridview.PageIndex = e.NewPageIndex;
fillDataGrid();
}

Now for the GridView Button Click event :

protected void datagridview_RowCommand(object sender, GridViewCommandEventArgs e)
{

//Here we will be passing the command name which we assigned to the button
if (e.CommandName == "ViewDetails")
{
int rowno = Int32.Parse(e.CommandArgument.ToString()); // It is the rowno of which the user as clicked

string ProductName = datagridview.Rows[rowno].Cells[2].Text.ToString(); // logical 0,1,2,3,4,5
lblname.Text = "Product name : " + ProductName;

string ProductDesc = datagridview.Rows[rowno].Cells[3].Text.ToString();
lbldesc.Text = "Product Desc : " + ProductDesc;

string ProductStore = datagridview.Rows[rowno].Cells[4].Text.ToString();
lblstore.Text = "At Store : " + ProductStore;

string ProductPrice = datagridview.Rows[rowno].Cells[5].Text.ToString();
lblprice.Text = "Product Price : " + ProductPrice;

}
}

Read the comments to understand the code, its pretty simple to understand.

If you like my work, please click the like button and like my page on facebook. You can also comment below…I will try my best to help you out.