Resources » .NET programming » ASP.NET/Web Applications

Accessing GridView using javascript


Posted Date: 17-Apr-2008  Last Updated:   Category: ASP.NET/Web Applications    
Author: Member Level: Gold    Points: 20


Accessing GridView using javascript



Objective


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, asp.net 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.

<script language="javascript" type="text/javascript">
function SelectAll(SelBtn)
{
var gvET = document.getElementById("GridView1");
var rCount = gvET.rows.length;
var btnSel = SelBtn.value;
var rowIdx;
// check the Page Count is greater than 1 then rowindex will start from 2 else 1
if(document.getElementById("hidgridpagecount").value>1)
{
rowIdx=2;
}
else
{
rowIdx=1;
}
for (rowIdx; rowIdx<=rCount-1; rowIdx++)
{
var rowElement = gvET.rows[rowIdx];
var chkBox = rowElement.cells[0].firstChild;
if (btnSel == 'Select All')
{
chkBox.checked = true;
}
else
{
chkBox.checked = false;
}
}
if (btnSel == 'Select All')
{
document.getElementById('btnSelAll_Top').value ="Deselect All";
document.getElementById('btnSelAll_Bot').value ="Deselect All";
}
else
{
document.getElementById('btnSelAll_Top').value ="Select All";
document.getElementById('btnSelAll_Bot').value ="Select All";
}
return false;
}
</script>

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.


Did you like this resource? Share it with your friends and show your love!

Responses to "Accessing GridView using javascript"
Author: Paul    10 Feb 2009Member Level: Bronze   Points : 2
This method of checking the checked status of the checkbox doesn't work in Firefox 3.0.6 nor Safari 3.2.1, even though it does work on IE7.

It seems that the following line ends up as undefined if Not IE.

var chkBox = rowElement.cells[0].firstChild;

Is there another way to get the element that works with all three browsers?

This is the function I'm using to return the count of titles that are checked so I can display in a confirm prompt.

function CheckedTitleCount() {

var gvET = document.getElementById("ctl00_ContentPlaceHolder1_GridView1");
var rCount = gvET.rows.length;
var rowIdx = 1;
var tcount = 0;

for (rowIdx; rowIdx<=rCount-1; rowIdx++) {
var rowElement = gvET.rows[rowIdx];
var chkBox = rowElement.cells[0].firstChild;
if (chkBox.checked == true){
tcount = tcount + 1;
}
}

return tcount;
}



Feedbacks      

Post Comment:




  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index

    Subscribe to Subscribers
    Active Members
    TodayLast 7 Daysmore...

    Awards & Gifts
    Talk to Webmaster Tony John

    Online Members

    Priya jain
    More...
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India