Predictable Clientid for run time generated controls in .Net4.0

Posted: February 6, 2011 in 4.0
Tags: , , , , ,


Some of the users might have already faced the scenario of having databound controls like checkboxes inside GridView, which gets created at runtime.The problem here is if you look at the client id of checkboxes generated at run time,it will be quite unpredictable to use with document.getElementById and accessing it is not very straight.At run time the clientID will be something like GridView1_ctl01_CheckBox1 for a particular check box. ctl01 will not remain same it will be ctl02, ctl03 etc for the checkboxs in the respective rows. So you will have to manipulate the clientid someway so that it turns predictable & you can acess each checkbox to do some operations like making it checked or unchecked based on your conditons.

What I explained so far is history now 🙂 Things have changed in .Net 4.0 .ClientId is no longer unpredictable.Cool right!A much awaited feature is introduced now.

Details of changes in .Net4.0

.Net 4.0 introduces two new properties ClientIDMode Property & ClientIDRowSuffix Property which can help you in this.If you set the ClientIDMode property to Predictable, ASP.NET generates the ClientID by appending a suffix that is derived from the data field specified in ClientIDRowSuffix(Any column name you can specify as ClientIDRowSuffix for eg EmpId column of your datasource ) . If ClientIDRowSuffix is not set, the suffix is a sequential number.This number begins at zero and is incremented by 1 for each row. and each segment is separated by an underscore character (_).

ClientIDMode enumeration values are as below:

This algorithm was used in versions of ASP.NET earlier than ASP.NET 4 which I have already explained.If you use Visual Studio to convert a Web project to ASP.NET 4 from an earlier version, Visual Studio automatically sets the site default to AutoID in the Web.config file
The ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains.
I have already explained this how it works with ClientIDRowSuffix Property
The control inherits the ClientIDMode setting of its parent control.

Right now we saw how this property can be set at the Control level.In two more ways you can set this:

Page Level -Set the ClientIDMode value for a page in the @ Page directive
Application Level-Set the ClientIDMode value for all pages in a Web site by setting the pages element in the site’s Web.config file.

MSDN has got very good explanation for this.But there it’s a bit vast & might be difficult for a beginner to understand.Hence I have grabbed few things from there & presented it in my own style.Hope you find this helpful!

  1. Sumit Thomas says:

    Useful feature!

    If you are using jQuery you might want to check this old solution

  2. Anupama says:

    Thanks for sharing!

  3. Pinku says:

    Was quite useful.thanks

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s