If you are intrested to know What is ClientIDMode and how to set read my previous article on it.
Practical Approach
I have created a web project and placed the following code in the webform
<asp:Panel ID="pnl" runat="server" ClientIDMode="Static">
<asp:GridView runat="server" ID="gvEmp" AutoGenerateColumns="False" ClientIDMode="Predictable"
ClientIDRowSuffix="EMPID">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
Employee ID
</HeaderTemplate>
<ItemTemplate>
<asp:Label runat="server" ID="Label2" Text='<%# Bind("EmpID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Employee Name
</HeaderTemplate>
<ItemTemplate>
<asp:Label runat="server" ID="Label1" ClientIDMode="AutoID" Text='<%# Bind("Name") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
I have created Employee class that has Employee Name and Employee ID as parameters.
public class Employee
{
public String EmpID
{
get;
set;
}
public String Name
{
get;
set;
}
}
I have created a method called GetEmplyees() and called this method in code behind of webform. I am binding grid that has EmployeeName and EmployeeID as Grid Columns. Here employee is generic List Data Type.
protected void GetEmployees()
{
List Employees =
new List
{
new Employee{ Name = "Hima", EmpID = "101" },
new Employee{ Name = "Jacob", EmpID = "102" },
new Employee{ Name = "Vamshi", EmpID = "103" },
new Employee{ Name = "Vijay", EmpID = "104" },
new Employee{ Name = "Pinal", EmpID = "105" },
new Employee{ Name = "Shiva", EmpID = "106" },
new Employee{ Name = "Sukanya", EmpID = "107" },
new Employee{ Name = "Ram", EmpID = "108" },
new Employee{ Name = "Leela", EmpID = "109" }
};
gvEmp.DataSource = Employees;
gvEmp.DataBind();
}
Build the solution and run the project ,we can see the gridview binds the Name and EMPID Columns as below.
How ClientIDMode works
<table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
<tr>
<th scope="col">
Employee Name
</th>
<th scope="col">
Employee ID
</th>
</tr>
<tr>
<td>
<span id="gvEmp_ctl02_Label1">Hima</span>
</td>
<td>
<span id="gvEmp_Label2_101">101</span>
</td>
</tr>
<tr>
<td>
<span id="gvEmp_ctl03_Label1">Jacob</span>
</td>
<td>
<span id="gvEmp_Label2_102">102</span>
</td>
</tr>
<tr>
<td>
<span id="gvEmp_ctl04_Label1">Vamshi</span>
</td>
<td>
<span id="gvEmp_Label2_103">103</span>
</td>
</tr>
<tr>
<td>
<span id="gvEmp_ctl05_Label1">Vijay</span>
</td>
<td>
<span id="gvEmp_Label2_104">104</span>
</td>
</tr>
<tr>
<td>
<span id="gvEmp_ctl06_Label1">Pinal</span>
</td>
<td>
<span id="gvEmp_Label2_105">105</span>
</td>
</tr>
<tr>
<td>
<span id="gvEmp_ctl07_Label1">Shiva</span>
</td>
<td>
<span id="gvEmp_Label2_106">106</span>
</td>
</tr>
<tr>
<td>
<span id="gvEmp_ctl08_Label1">Sukanya</span>
</td>
<td>
<span id="gvEmp_Label2_107">107</span>
</td>
</tr>
<tr>
<td>
<span id="gvEmp_ctl09_Label1">Ram</span>
</td>
<td>
<span id="gvEmp_Label2_108">108</span>
</td>
</tr>
<tr>
<td>
<span id="gvEmp_ctl10_Label1">Leela</span>
</td>
<td>
<span id="gvEmp_Label2_109">109</span>
</td>
</tr>
</table>
When you examine the above code for the first label I have sepecifed Auto as ClientIDMode, hence lLabel1 Id name has assigned automatically incerementing by one for each row as
gvEmp_ctXXX_Label1. For the second label when nothing is assinged , it will take the defualt value as inherited and its ClientIDMode gets inherited from the parent control. Hence the ClientIDMode is taken as predictiable and it gets predicted at runtime as gvEmp_Label2_XXX Now I have changed the code as
<!--ASP.NET 4 ClientIDMode property assigned as Static and AutoID and clientIdRowSuffix is not set.-->
<asp:gridview id="gvEmp" runat="server" autogeneratecolumns="False">
<columns>
<asp:templatefield>
<headertemplate>
Employee Name
</headertemplate>
<itemtemplate>
<asp:label id="Label1" clientidmode="Static" runat="server" text="<%# Bind("Name") %>" />
</itemtemplate>
</asp:templatefield>
<asp:templatefield>
<headertemplate>
Employee ID
</headertemplate>
<itemtemplate>
<asp:label id="Label2" clientidmode="AutoID" runat="server" text="<%# Bind("EmpID") %>" />
</itemtemplate>
</asp:templatefield>
</columns>
</asp:gridview>
</asp:panel>
The browser renders as follows.
| Employee Name | Employee ID |
|---|
| Hima | 101 |
| Jacob | 102 |
| Vamshi | 103 |
| Vijay | 104 |
| Pinal | 105 |
| Shiva | 106 |
| Sukanya | 107 |
| Ram | 108 |
| Leela | 109 |
Please note that when ClientIDMode as static is given the ID is rendered as Label1 always. For the second label I have specified it as AutoID with clientIdRowSuffix property not set, and it is rendered as
gvEmp_ctxx_Label2