Select All in Grid view / Data Grid – Javascript

Select All in Grid view / Data Grid – Javascript

Select All checkbox in Grid – JavaScript

Many a times we, developers have situation where we have to enable the application to let select different rows of grid. Moving towards more user friendliness, the need of having select all rows in one click arise. It is quite tricky to code the scenario as one might think of implementing the functionality in code behind which result in consuming server resources and consequently slow application.

JavaScript is here to help you ! JavaScript only consume browser resources and hence no impact is put on server. This cause no post backs. Below, I have tried to make it simple to show on how to implement the functionality.

When the GridView is rendered on the client machine it is rendered as a simple HTML table. Hence what the JavaScript will see a HTML table and not the ASP.Net GridView control. Hence once can easily write scripts for GridView, DataGrid and other controls once you know how they are rendered.

To start with I have a GridView control with a header checkbox and checkbox for each individual record.

<asp:GridView ID=”MyGridview” runat=”server”  HeaderStyle-CssClass = “Hdr”
AutoGenerateColumns = “false” Font-Names = “Arial”
Font-Size = “11pt” AlternatingRowStyle-BackColor = “Green” >
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID=”checkAll” runat=”server” onclick = “chkAll(this);” />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID=”CheckBox1″ runat=”server” onclick = “Chk_Click(this)” />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width=”150px” DataField=”SR_ID” HeaderText=”Serial ID”  />
<asp:BoundField ItemStyle-Width=”150px” DataField=”Serial”
HeaderText=”Serial” />
<asp:BoundField ItemStyle-Width=”150px” DataField=”Meter”
HeaderText=”Meter”/>
<asp:BoundField ItemStyle-Width=”150px” DataField=”Customer”  HeaderText= “Customer Name”/>
</Columns>
</asp:GridView>

I am calling two JavaScript functions chkAll and Chk_Click which I have explained later.

Javascript Functions – Highlight Row checked.

<script type = “text/javascript”>
function Chk_Click(objRef)
{
//Get the Row based on checkbox
var row = objRef.parentNode.parentNode;
if(objRef.checked)
{
//If checked change color to Aqua
row.style.backgroundColor = “aqua”;
}
else
{
//If not checked change back to original color
if(row.rowIndex % 2 == 0)
{
//Alternating Row Color
row.style.backgroundColor = “Green”;
}
else
{
row.style.backgroundColor = “white”;
}
}

//Get the reference of GridView
var GridView = row.parentNode;

//Get all input elements in Gridview
var inputList = GridView.getElementsByTagName(“input”);

for (var i=0;i<inputList.length;i++)
{
//The First element is the Header Checkbox
var headerCheckBox = inputList[0];

//Based on all or none checkboxes
//are checked check/uncheck Header Checkbox
var checked = true;
if(inputList[i].type == “checkbox” && inputList[i] != headerCheckBox)
{
if(!inputList[i].checked)
{
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;

}
</script>

The above function is invoked when you check / uncheck a checkbox in GridView row

Javascript Function – Check All

<script type = “text/javascript”>
function chkAll(objRef)
{
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName(“input”);
for (var i=0;i<inputList.length;i++)
{
//Get the Cell To find out ColumnIndex
var row = inputList[i].parentNode.parentNode;
if(inputList[i].type == “checkbox”  && objRef != inputList[i])
{
if (objRef.checked)
{
//If the header checkbox is checked
//check all checkboxes
//and highlight all rows
row.style.backgroundColor = “aqua”;
inputList[i].checked=true;
}
else
{
//If the header checkbox is checked
//uncheck all checkboxes
//and change rowcolor back to original
if(row.rowIndex % 2 == 0)
{
//Alternating Row Color
row.style.backgroundColor = “#C2D69B”;
}
else
{
row.style.backgroundColor = “white”;
}
inputList[i].checked=false;
}
}
}
}
</script>

To conclude, Javascript is a good alternative to avoid extra burden on post backs and server transits.
The above JavaScript functions are tested in the following Browsers
1.     Internet Explorer 7
2.     Mozilla Firefox 3
3.     Google Chrome

Tags:
  • data grid in javascript,
  • grid view of javascrpit,
  • javascript,
  • Leave a Reply