DataGrid CheckBox with Check All Option
Using this code we can apply the functionality of "Check All" in the Datagrid, to check multiple items in a Datagrid. The code is written in JavaScript, so that no server call will be there to execute this code.
Following is the Code to be put on HTML part [Inside the Grid html].
=====================================================================
HEADER COLOUMN
asp:TemplateColumn
HeaderStyle HorizontalAlign="Center"/HeaderStyle
ItemStyle HorizontalAlign="Center"/ItemStyle
HeaderTemplate
asp:label id="lblCheck" runat="server"Check All/asp:label
asp:CheckBox id="chkCheckAll" runat="server"
onclick="return check_uncheck(this);"
/asp:CheckBox
/HeaderTemplate
ITEM COLOUMN
ItemTemplate
asp:CheckBox id="chkSelect" runat="server" AutoPostBack="false"
Checked='%# DataBinder.Eval(Container, "DataItem.CheckedVal") %'
/asp:CheckBox
/ItemTemplate
/asp:TemplateColumn
=====================================================================
The JavaScript function for this functionality is as follows.
function check_uncheck(Val)
{
var ValChecked = Val.checked;
var ValId = Val.id;
var frm = document.forms[0];
// Loop through all elements
for (i = 0; i < frm.length; i++)
{
// Look for Header Template's Checkbox
// Sincewe have no other control other than the checkbox we just check following statement
if (this != null)
{
if (ValId.indexOf('chkCheckAll') != - 1)
{
// Check if main checkbox is checked,
// then select or deselect datagrid checkboxes
if (ValChecked)
frm.elements[i].checked = true;
else
frm.elements[i].checked = false;
}
else if (ValId.indexOf('chkSelect') != - 1)
{
// Check if any of the checkboxes are not checked, and then uncheck top select all checkbox
if (frm.elements[i].checked == false)
frm.elements[1].checked = false;
}
}
}
}
|
No responses found. Be the first to respond and make money from revenue sharing program.
|