Pages

Tuesday, January 10, 2012

Check / Uncheck all checkbox in treeview using jquery in asp.net

Check / Uncheck all checkbox in treeview using jquery in asp.net

Introduction : In this article i will show you how check all checkboxes in treeview using Jquery in asp.net .It is very easy just you need add code and replace id as per treeview control . For the binding the Treeview control in asp.net you can visits my previous post bind treeview in-asp.net .
Jquery for check / uncheck all checkboxes in treeview in c# :

Following is jquery code for check or uncheck all checkboxes in treeview control and HTML code in asp.net .

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeViewControl.aspx.cs"
    Inherits="HamidSite.TreeViewControl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" >

        $(document).ready(function () {

            $("div[id $= treeviwExample] input[type=checkbox]").click(function () {
                $(this).closest("table").next("div").find("input[type=checkbox]").attr("checked", this.checked);
            });

        });    
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ID="treeviwExample" ShowCheckBoxes="All"  runat="server" ImageSet="Arrows">
            <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
            <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
            <ParentNodeStyle Font-Bold="False" />
            <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px" VerticalPadding="0px" />            
        </asp:TreeView>
    </div>
    </form>
</body>
</html>


Related Other posts

9 comments:

  1. Excellent post .

    Keep it up .

    Thank you .

    ReplyDelete
  2. It is working fine, very much easy to use...

    ReplyDelete
  3. how i get the jquery for this post..
    please answer for me

    ReplyDelete
  4. how do you pass the selected values to code behind, please help!

    ReplyDelete
  5. This code is very helpful for mine.

    But One thing is that, If I select Parent node then should be select by default all child nodes. but it's not done from this code.
    So, if anybody get solution from this code. So, please mail me on :- vbvipinbhayana88@gmail.com

    ReplyDelete