Following are the screens for evaluating gridview data on the client side. Based on the data we can set the content/status of the controls. As shown below, the text of the user name column, check/uncheck of is male column, and the setting of green dot image for active user and red dot image for the inactive user are set at the client side.
Following is the structure of sample data table with UserName, Ismale and IsActive column that have string, Boolean, Boolean data respectively.
//Creation of static datatable
DataTable dt = new DataTable();
dt.Columns.Add("UserName", typeof(string));
dt.Columns.Add("IsMale", typeof(bool));
dt.Columns.Add("IsActive", typeof(Boolean));
Following is the sample data for the above datatable which we will bind to the gridview at server side.
dt.Rows.Add("Dharmedra","true","true");
dt.Rows.Add("Katrina", "false", "true");
dt.Rows.Add("Sunny", "true", "false");
dt.Rows.Add("Baba ramdev", "true", "true");
dt.Rows.Add("Sanjay dutt", "true", "false");
dt.Rows.Add("Kareena kapoor", "false", "false");
Following is the way we bind the datatable to the gridview:
//Binding static datatable to the gridview
dgv.DataSource = dt;
dgv.DataBind();
Now the main task we have to do is the client side evaluation of the datatable bound to the gridview.
Following is the gridview we created using aspx page. The lines highlighted with yellow color are the controls used in the itemtemplate section gridview control. These three control evaluate the data of the grid at the client side.
<asp:GridView ID="dgv" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
CssClass="GridViewStyle" GridLines="None" Width="100%">
<Columns>
<asp:TemplateField HeaderText="Name">
<HeaderTemplate>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<th align="left" width="60%">
<asp:Label runat="server" ID="Label1" Text='User Name'></asp:Label>
</th>
<th align="center" width="20%">
<asp:Label runat="server" ID="Label2" Text='Is Male?'></asp:Label>
</th>
<th align="center" width="20%">
<asp:Label runat="server" ID="Label3" Text='Is Active?'></asp:Label>
</th>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" width="60%">
<asp:Label runat="server" ID="lbluser" Text='<%#Eval("UserName") %>'></asp:Label>
</td>
<td align="center" width="20%">
<asp:CheckBox runat="server" ID="chk" Checked='<%# Eval("IsMale") %>'></asp:CheckBox>
</td>
<td align="center" width="20%">
<asp:Image runat="server" ID="img" ImageUrl='<%# (Eval("IsActive").ToString().ToLower() == "true" ? "~/Images/Green.png" : "~/Images/Red.png" ) %>' />
</td
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle CssClass="RowStyle" />
<EmptyDataRowStyle CssClass="EmptyRowStyle" />
<PagerStyle CssClass="PagerStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<EditRowStyle CssClass="EditRowStyle" />
<AlternatingRowStyle CssClass="AltRowStyle" />
</asp:GridView>
<asp:Label runat="server" ID="lbluser" Text='<%#Eval("UserName") %>'></asp:Label>
<asp:CheckBox runat="server" ID="chk" Checked='<%# Eval("IsMale") %>'></asp:CheckBox>
<asp:Image runat="server" ID="img" ImageUrl='<%# (Eval("IsActive").ToString().ToLower() == "true" ? "~/Images/Green.png" : "~/Images/Red.png" ) %>' />
In all the above lines
<%#Eval("UserName") %> evaluates the UserName column of the datagrid
<%# Eval("IsMale") %> evaluates the IsMale column
<%# (Eval("IsActive").ToString().ToLower() == "true" ? "~/Images/Green.png" : "~/Images/Red.png" ) %> evaluates the IsActive column and set path for the ImageUrl attribute of the Image control.