Check on the grid view header check box then all the check boxes in the item template should be checked , if an item template check box is unchecked then header check box should also be unchecked .
Introduction
Let us see , how to bind data from xml and implementation of check all functionality in the Grid View
Objective
Our main objective is to implement the check all functionality from client side
Let us see the grid view Code
<div style="width: 800px; margin: 0 auto;">
<asp:GridView ID="gvCustomerSearch" runat="server" AutoGenerateColumns="False" CellPadding="4"
ForeColor="#333333" GridLines="None">
<AlternatingRowStyle CssClass="altrow" BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Rings">
<ItemTemplate>
<asp:Label ID="lblAccountNumber" runat="server" Text='<%# Eval("Value") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkAll" runat="server" onclick="checkAll(this);" AutoPostBack="true" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server" onclick="Check_Click(this)" AutoPostBack="true" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<EmptyDataTemplate>
<div class="alertbox">
<asp:Label ID="lblNoCustomers" runat="server" Text="No Customers"></asp:Label>
</div>
</EmptyDataTemplate>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
<div style="width: 800px; margin: 0 auto; margin-top: 50px;">
<asp:Label ID="lblmsg" runat="server" Text="Click to generate the gridview from xml file "
ForeColor="BlueViolet" />
<asp:Button ID="Button1" runat="server" Text="ClickMe" OnClick="Button1_Click" CssClass="styled-button-3"
ToolTip="Click to generate a gridview " />
</div>
</div>
In the above code we had a grid view and also we had a button. Onclick on the button gridview will be populated from xml file
XMl - File
<CATEGORIES>
<CATEGORY CATEGORYCODE="MEN RINGS" />
<CATEGORY CATEGORYCODE="PLAIN MEN RINGS" />
<CATEGORY CATEGORYCODE="STONES MEN RINGS" />
<CATEGORY CATEGORYCODE="WOMEN RINGS" />
<CATEGORY CATEGORYCODE="PLAIN WOMEN RINGS" />
<CATEGORY CATEGORYCODE=" WOMEN STONE RINGS" />
</CATEGORIES>
Onclick Function Code:
XElement xelement = XElement.Load(@"C:\Users\scvaddili\Documents\Visual Studio 2010\WebSites\WebSite3\XMLFile.xml");
IEnumerable<XElement> employees = xelement.Elements();
var onj = employees.Select(x => new { x.Attribute("CATEGORYCODE").Value });
gvCustomerSearch.DataSource = onj;
gvCustomerSearch.DataBind();
lblmsg.Visible = false;
Now from client side we should implement the check all functionality : With in the Item Template
function Check_Click(object) {
var row = object.parentNode.parentNode;
var GridView = row.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
var headerCheckBox = inputList[0];
var checked = true;
if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox) {
if (!inputList[i].checked) {
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;
}
With in the Header :
function checkAll(object) {
var GridView = object.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
var row = inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox" && object != inputList[i]) {
if (object.checked) {
inputList[i].checked = true;
}
else {
if (row.rowIndex % 2 == 0) {
row.style.backgroundColor = "#C2D69B";
}
else {
row.style.backgroundColor = "white";
}
inputList[i].checked = false;
}
}
}
}
Style Applied for the button :
<style type="text/css">
.styled-button-3
{
-webkit-box-shadow: rgba(0,0,0,0.0.1) 0 1px 0 0;
-moz-box-shadow: rgba(0,0,0,0.0.1) 0 1px 0 0;
box-shadow: rgba(0,0,0,0.0.1) 0 1px 0 0;
background-color: #5B74A8;
border: 1px solid #29447E;
font-family: 'Lucida Grande' ,Tahoma,Verdana,Arial,sans-serif;
font-size: 12px;
font-weight: 700;
padding: 2px 6px;
height: 28px;
color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>
Conclusion
Finally we populated grid view from XML data and implemented the Check_ALL functionality ,
Please find the attached source code for better idea