Microsoft has provided grid view control which accepts a data source to bind when we call databind() function it prepares html content to display data from data source accordingly which browser can under stand.
So when we call databind function, web server creates the html content accordingly based upon the grid definition, data source, etc…
So when we use a normal grid with a datasource set to bind it does prepare a normal html string which browser understands to render onto browser.
We can also place html controls (table, anchor tag, image, radio button, etc...),
asp controls (asp:button, asp:checkbox etc..) with in a grid.
There could be cases where we need to access these controls exclusively to do some operation, which are appended to html string by web server for each row in the data source.
This part of handling the controls in the grid exclusively for each row that is being prepared or bounded to the grid by web server is done using “row data bound event” of a grid.
Let us consider a small example.
We should display a grid with many rows in it and 2 columns.
One column is used to display names and the second column has a link button.
When user clicks on a link button in a specific row, we should display an alert box with the specific name in that row.
<table>
<tr><td>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPmiTq2vrX7jkstjSvShsAFiMrNQAeHlvnSm3Liv_YTnkl6izq-wZperJlo_3cjSxBrq3lJ_9X3d7QRHQ1VzKeeCMWcmj1dn5YRLHfLbQ2g8FYnp0V7LfKv1hvqMcqBFerhkoHXmlhJcc/s1600-h/1.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 154px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPmiTq2vrX7jkstjSvShsAFiMrNQAeHlvnSm3Liv_YTnkl6izq-wZperJlo_3cjSxBrq3lJ_9X3d7QRHQ1VzKeeCMWcmj1dn5YRLHfLbQ2g8FYnp0V7LfKv1hvqMcqBFerhkoHXmlhJcc/s320/1.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5283851620652726082" /></a>
</td></tr>
<tr><td>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2MfBdoqxuOVrVd7giFXSx-sdzOZecX2Z22P-nslkGFRTNDko_SO0NdDO_1jNTPQNkSq_e30wFG9XPrUz1GRuayALC-QeLKqyqGfZcfws0devvNbk-nYzInn0BrndY2d48qaDwFXXRbrE/s1600-h/3.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2MfBdoqxuOVrVd7giFXSx-sdzOZecX2Z22P-nslkGFRTNDko_SO0NdDO_1jNTPQNkSq_e30wFG9XPrUz1GRuayALC-QeLKqyqGfZcfws0devvNbk-nYzInn0BrndY2d48qaDwFXXRbrE/s320/3.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5283851630479582994" /></a>
</td></tr>
<tr><td>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYw5HJmGVr51_xhQwEfRwDcgCDkO_yvpWE3vsIB4l_aLywKo2dWorW2Z33-Xwlkc3VUUWGDjMs01cWY_4vjY3rW6BpCRlUTyVqXFx6PmpJQNr8t0RW35jIxKYgkOqN9Tj-0l7y0orrwIE/s1600-h/2.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 261px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYw5HJmGVr51_xhQwEfRwDcgCDkO_yvpWE3vsIB4l_aLywKo2dWorW2Z33-Xwlkc3VUUWGDjMs01cWY_4vjY3rW6BpCRlUTyVqXFx6PmpJQNr8t0RW35jIxKYgkOqN9Tj-0l7y0orrwIE/s320/2.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5283851627794558578" /></a>
</td></tr>
</table>
Aspx page :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link href="Styles/Stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdData" runat="server" CssClass="grid_td" Width="100%" AutoGenerateColumns="false" OnRowDataBound="grdData_RowDataBound">
<Columns>
<asp:TemplateField>
<HeaderTemplate >Name</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblName" Text='<%#Eval("Name")%>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Click</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton ID="lnk" runat="server">Link</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Code behind page :
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindGrid();
}
}
private void BindGrid()
{
DataTable dt = new DataTable();
dt.Columns.Add("Name");
DataRow dr = null;
for (int i = 1; i <= 10; i++)
{
dr = dt.NewRow();
dr["Name"] = i.ToString();
dt.Rows.Add(dr);
}
grdData.DataSource = dt;
grdData.DataBind();
}
//Row data bound event function
protected void grdData_RowDataBound(object sender, GridViewRowEventArgs e)
{
//For each row from data source when bounded to grid this event is raised
LinkButton lnk = e.Row.FindControl("lnk") as LinkButton;
Label lblName = e.Row.FindControl("lblName") as Label;
//checking the controls found from each row based on id is null or nut
if (lnk != null && lblName != null)
{
//Adding java script alert box to display associated name on the corresponding label
//control
lnk.Attributes.Add("onclick","alert('"+lblName.Text+"'); return false;");
}
}
}
No comments:
Post a Comment