Articles → ASP .NET GRIDVIEW → Control Control-Ids Of Data Fields Inside Gridview Using Clientidrowsuffix

Control Control-Ids Of Data Fields Inside Gridview Using Clientidrowsuffix

The objective of this tutorial is to impart information regarding how to control control-ids of data fields inside the grid view using ClientIdRowSuffix.

To Illustrate

Consider a database table from which we are fetching data and bind it with the grid

Picture showing the sample database table from which data will be fetched

Click to Enlarge

First of all create a gridview control and add columns inside it (as shown in the code below)

<asp:GridView runat="server" ID="gvTest" AutoGenerateColumns="false">
	<Columns>
		<asp:TemplateField HeaderText="Task Id">
			<ItemTemplate>
				<asp:Label ID="lblTaskId" runat="server" Text='<%#Eval("TaskId") %>'>
				</asp:Label>
			</ItemTemplate>
		</asp:TemplateField>
		<asp:TemplateField HeaderText="Task Name">
			<ItemTemplate>
				<asp:Label ID="lblTaskName" runat="server" Text='<%#Eval("TaskName") %>'>
				</asp:Label>
			</ItemTemplate>
		</asp:TemplateField>
		<asp:TemplateField HeaderText="Date of Completion">
			<ItemTemplate>
				<asp:Label ID="lblDateOfCompletion" runat="server" Text='<%#Eval("DateOfCompletion") %>'>
				</asp:Label>
			</ItemTemplate>
		</asp:TemplateField>
	</Columns>
</asp:GridView>

To bind the gridview add following code on the page load event.

DataSet ds = new DataSet();
using(SqlConnection conn = new SqlConnection(@"connection_string")) {
  conn.Open();
  using(SqlDataAdapter adapter = new SqlDataAdapter("SELECT [TaskId],[TaskName],[DateOfCompletion] FROM [dbo].[MyTask]", conn)) {
    adapter.Fill(ds);

    if (ds != null) {
      if (ds.Tables.Count > 0) {
        gvTest.DataSource = ds.Tables[0];
        gvTest.DataBind();
      }
    }
  }
}

On executing the application we get the following output:

Picture showing the gridview bound with the table data

Click to Enlarge

If you check the rendered HTML, you will notice that all the controls inside the grid have been assigned ids in specific pattern. The controls in first row have been assigned the id in the format ‘gridid_labelid_0’, for the controls in second row it is ‘gridid_labelid_1’ and so on.

<table cellspacing="0" rules="all" border="1" id="MainContent_gvTest" style="border-collapse:collapse;">
	<tr>
		<th scope="col">Task Id</th>
		<th scope="col">Task Name</th>
		<th scope="col">Date of Completion</th>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_0">1</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_0">Task no 1</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_0">3/5/2014 1:15:25 PM</span>
		</td>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_1">2</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_1">Task no 2</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_1">3/6/2014 1:15:25 PM</span>
		</td>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_2">3</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_2">Task no 3</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_2">3/7/2014 1:15:25 PM</span>
		</td>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_3">4</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_3">Task no 4</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_3">3/8/2014 1:15:25 PM</span>
		</td>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_4">5</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_4">Task no 5</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_4">3/9/2014 1:15:25 PM</span>
		</td>
	</tr>
</table>

Now add a property ClientIDRowSuffix in the gridview

<asp:GridView runat="server" ID="gvTest" AutoGenerateColumns="false" ClientIDRowSuffix="TaskId">

and check the rendered HTML.

<table cellspacing="0" rules="all" border="1" id="MainContent_gvTest" style="border-collapse:collapse;">
	<tr>
		<th scope="col">Task Id</th>
		<th scope="col">Task Name</th>
		<th scope="col">Date of Completion</th>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_1">1</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_1">Task no 1</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_1">3/5/2014 1:15:25 PM</span>
		</td>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_2">2</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_2">Task no 2</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_2">3/6/2014 1:15:25 PM</span>
		</td>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_3">3</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_3">Task no 3</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_3">3/7/2014 1:15:25 PM</span>
		</td>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_4">4</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_4">Task no 4</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_4">3/8/2014 1:15:25 PM</span>
		</td>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_5">5</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_5">Task no 5</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_5">3/9/2014 1:15:25 PM</span>
		</td>
	</tr>
</table>

In the rendered HTML, you can see that the value of taskId is appended to the controls id. Similarly if we change the ClientIDRowSuffix property to TaskName, the rendered HTML will be changed and task name will be appended to the controls id.

<table cellspacing="0" rules="all" border="1" id="MainContent_gvTest" style="border-collapse:collapse;">
	<tr>
		<th scope="col">Task Id</th>
		<th scope="col">Task Name</th>
		<th scope="col">Date of Completion</th>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_Task no 1">1</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_Task no 1">Task no 1</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_Task no 1">3/5/2014 1:15:25 PM</span>
		</td>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_Task no 2">2</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_Task no 2">Task no 2</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_Task no 2">3/6/2014 1:15:25 PM</span>
		</td>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_Task no 3">3</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_Task no 3">Task no 3</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_Task no 3">3/7/2014 1:15:25 PM</span>
		</td>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_Task no 4">4</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_Task no 4">Task no 4</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_Task no 4">3/8/2014 1:15:25 PM</span>
		</td>
	</tr>
	<tr>
		<td>
			<span id="MainContent_gvTest_lblTaskId_Task no 5">5</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblTaskName_Task no 5">Task no 5</span>
		</td>
		<td>
			<span id="MainContent_gvTest_lblDateOfCompletion_Task no 5">3/9/2014 1:15:25 PM</span>
		</td>
	</tr>
</table>

This is how we can control id of controls inside gridview.

Posted By -	Karan Gupta

Posted On -	Wednesday, April 23, 2014

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**