Thursday, September 18, 2008

Accessing Gridview via Javascript


Now-a-days lot of new DotNet developers are coming into the field. Many of them have struggled on GridView control with Javascript. I came to know this by reading forums like dotnetspider, and etc., . So that I am planning to give a small article to access GridView control using Javascript.

Finding GridView ID

Find the gridview control's id using getElementById method.
var gv = document.getElementById(“GridView1”)
gv variable holds the GridView1 object. Using gv object we can access the grid view control.

Javascript Example

Following example demonstrates select all and de-select all checkboxs in the gridview control.

Click on it to open !!!

Description of the above example

The above example is used to select all and de-select all check boxes in
the gridview control. The javascript function SelectAll has a parameter
called SelBtn which will decide the checkboxs to be select or
de-select. The gvET is the variable which can extracts the properties
and methods of gridview control.

For selecting or de-selecting
check boxes we have to loop it from starting ordinal to the ending
ordinal of the gridview control. Starting ordinal can be 0 at any time.
Ending ordinal is calculated using length of the gridview control. So
length of the gridview control is stored into the rCount.

Find the page count of the gridview. If page cont is greater than 1 then
rowIdx starts with 2 else 1. Here we have to concentrate why we set
rowIdx position. Because the paging informations will be placed in
gridview. So it took one row to show the paging informations.

In for loop we have created row object called rowElement which is used to
access the rows of the gridview. We know already which column holds the
check box. Using check box position we create check box to select or
de-select as demonstrated in the above example. Finally we have changed

the select all and de-select all caption to the button control.

I hope this article will be helpful to one who dose not have the idea about gridview with javascript.

I would love to hear comments about this !!!


Ujjwal Soni