Referencing GridView Controls Using JavaScript

Today Luvy and I looked at updating the logic for an ASP.NET forms page that we are working on. The page contains a multi-row update-able GridView, and we were asked to make sure that if one CheckBox control was unchecked, that another CheckBox  control on the same grid line would also uncheck itself.

We chose to handle this logic at the client side via JavaScript since a postback would certainly be overkill for handling such a straightforward rule.

When adding JavaScript to an ASP.NET control there are two ways to do so. A JavaScript onClick event cannot be added directly to the HTML markup for the control, so the options are to add the JavaScript event either in the .NET control’s Render event, or to instantiate & update the control in the GridView’s Render event.

In our case, we are performing a number of control adjustments in the GridView’s Render event, and I like to keep GridView logic in one place for readability reasons. So we went with the option of instantiating & updating the control in the GridView’s Render event rather than the CheckBox control’s Render event.

To summarize the code, it went something a little like this:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim cbxIncludeInRevPlanLoadDtl As CheckBox = CType(e.Row.FindControl("cbxIncludeInRevPlanLoadDtl"), CheckBox)
            cbxIncludeInRevPlanLoadDtl.Attributes.Add("onClick", "autoUnCheckExtend(this)")

The simplest way to register a JavaScript event such as onClick with an ASP.NET control is using the Attributes.Add command.

Then to finish up the logic, we added a simple generic JavaScript function to the Page that would generically receive the reference to the checked control, and that would then conditionally un-check another checkbox control on the same grid line.

<script language="javascript" type="text/javascript">
        function autoUnCheckExtend(objGridIncludeControl) {
            var strGridIncludeControlID = objGridIncludeControl.id;
            if (objGridIncludeControl.checked == false) {
                var strGridExcludeControlID = strGridIncludeControlID.substring(0, (strGridIncludeControlID.lastIndexOf('_') + 1)) + 'cbxExtendInRevPlanLoadDtl';
                document.getElementById(strGridExcludeControlID).checked = false;
            }
        }

This JavaScript is simple but does the job it is assigned to do quite nicely.

Specifically, it receives a reference of the CheckBox control that fired the onClick event. The function then parses out the important location part of the control ID and replaces it with the name of the control that needs to be changed.

The way that ASP.NET renders the HTML for GridView controls is to prefix location information for the control into the ID information of the control. So, for example, in a GridView called GridView1 a CheckBox control would be rendered as:

<input id="GridView1_ctl02_cbxExtendInRevPlanLoadDtl" name="GridView1$ctl02$cbxExtendInRevPlanLoadDtl" CHECKED="checked" type="checkbox">

Then on the subsequent grid line the CheckBox control  would be rendered as:

GridView1_ctl03_cbxExtendInRevPlanLoadDtl

So to reiterate: the JavaScript function receives a reference to the control on the grid line that was clicked by passing the ‘this’ object in the control’s onClick event to the JavaScript function.

The function then takes the ID of the control and parses out the location information that it then uses to identify the other CheckBox control on the same line to check.

Using these methods to manage ASP.NET objects via client side script can be quite useful in managing the behavior of a Web page without making use of heavyweight operations that require a call to the server.

Advertisements

2 thoughts on “Referencing GridView Controls Using JavaScript

  1. Pingback: Quora
  2. I’m often to blogging and i really respect your content. The article has actually peaks my interest. I am going to bookmark your web site and maintain checking for brand spanking new information.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s