Bind data to Grid view from XML and implement Check all functionality

Saratvaddilli
Posted by in jQuery category on for Beginner level | Points: 250 | Views : 4347 red flag

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 .
Let us achieve this from client side
Note: I will Bind data to grid view from XML file


 Download source code for Bind data to Grid view from XML and implement Check all functionality

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 


Page copy protected against web site content infringement by Copyscape

About the Author

Saratvaddilli
Full Name: vaddilli sarat
Member Level: Bronze
Member Status: Member,MVP
Member Since: 7/30/2012 3:54:23 AM
Country: India
Thanks and Regards V.SaratChand Show difficulties that how difficult you are
www.dotnetfunda.com
I am sarat vaddilli working on the cutting edge technologies like html5,css3, Jquery and MicroSoft technologies like Asp.Net,Asp.Net MVC, SQL Server.

Login to vote for this post.

Comments or Responses

Posted by: Sheonarayan on: 4/15/2013 | Points: 25
Great effort, keep it up!
Posted by: Saratvaddilli on: 4/18/2013 | Points: 25
Thank you sir @Sheonarayan

Login to post response

Comment using Facebook(Author doesn't get notification)