Monday, August 4, 2014

ASP.Net TreeView CheckBox select deselect all using Javascript (C#.Net)


//Code Behind:
//----------------------------------------
    protected void Page_Load()
    {
        TreeView1.Attributes.Add("onclick", "OnTreeClick(event)");
    } 
   
    protected void CreateSampleTreeView()
    {
        TreeNode tndEarth = new TreeNode("Earth", "Earth"); TreeView1.Nodes.Add(tndEarth);
        TreeNode tndEurope = new TreeNode("Europe", "Europe"); tndEarth.ChildNodes.Add(tndEurope);
        TreeNode tndAsia = new TreeNode("Asia", "Asia"); tndEarth.ChildNodes.Add(tndAsia);
        TreeNode tndAfrica = new TreeNode("Africa", "Africa"); tndEarth.ChildNodes.Add(tndAfrica);
        TreeNode tndUK = new TreeNode("United Kingdom", "United Kingdom"); tndEurope.ChildNodes.Add(tndUK);
        TreeNode tndFrance = new TreeNode("France", "France"); tndEurope.ChildNodes.Add(tndFrance);
        TreeNode tndGermany = new TreeNode("Germany", "Germany"); tndEurope.ChildNodes.Add(tndGermany);
        TreeNode tndChina = new TreeNode("China", "China"); tndAsia.ChildNodes.Add(tndChina);
        TreeNode tndUAE = new TreeNode("UAE", "UAE"); tndAsia.ChildNodes.Add(tndUAE);
        TreeNode tndIndia = new TreeNode("India", "India"); tndAsia.ChildNodes.Add(tndIndia);
        TreeNode tndEgypt = new TreeNode("Egypt", "Egypt"); tndAfrica.ChildNodes.Add(tndEgypt);
        TreeNode tndKahira = new TreeNode("Kahira", "Kahira"); tndAfrica.ChildNodes.Add(tndKahira);
    }
 
//Javascript inside aspx page:
//----------------------------------------

    <script type="text/javascript">
    function OnTreeClick(evt)
    {
        var src = window.event != window.undefined ? window.event.srcElement : evt.target
        var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
        if (isChkBoxClick)
        {
            var parentTable = GetParentByTagName("table", src);
            var nxtSibling = parentTable.nextSibling;
            if (nxtSibling && nxtSibling.nodeType == 1)//check if nxt sibling is not null & is an element node
            {
                if (nxtSibling.tagName.toLowerCase() == "div")//if node has children
                {
                    //check or uncheck children at all levelsCheckUncheckChildren(parentTable.nextSibling, src.checked);
                }
            }
        //check or uncheck parents at all levelsCheckUncheckParents(src, src.checked);
        }
    }

    function CheckUncheckChildren(childContainer, check)
    {
        var childChkBoxes = childContainer.getElementsByTagName("input");
        var childChkBoxCount = childChkBoxes.length;
        for (var i = 0; i < childChkBoxCount; i++)
        {
            childChkBoxes[i].checked = check;
        }
    }


    function CheckUncheckParents(srcChild, check)
    {
            var parentDiv = GetParentByTagName("div", srcChild);
            var parentNodeTable = parentDiv.previousSibling;
            if (parentNodeTable)
            {
                var checkUncheckSwitch;
                if (check) //checkbox checked
                {
                    checkUncheckSwitch = true;
                }


                else //checkbox unchecked
                {
                    var isAllSiblingsUnChecked = AreAllSiblingsUnChecked(srcChild);
                    if (!isAllSiblingsUnChecked)checkUncheckSwitch = true;
                    elsecheckUncheckSwitch = false;
                }
            var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
            if (inpElemsInParentTable.length > 0)
            {
                var parentNodeChkBox = inpElemsInParentTable[0];parentNodeChkBox.checked = checkUncheckSwitch;
                //do the same recursivelyCheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
            }
        }
    }

    function AreAllSiblingsUnChecked(chkBox)
    {
        var parentDiv = GetParentByTagName("div", chkBox);
        var childCount = parentDiv.childNodes.length;

        for (var i = 0; i < childCount; i++)
        {
            if (parentDiv.childNodes[i].nodeType == 1) //check if the child node is an element node
            {
                if (parentDiv.childNodes[i].tagName.toLowerCase() == "table")
                {
                    var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
                    //if any of sibling nodes are not checked, return falseif (prevChkBox.checked)
                    {
                        return false;
                    }
                }
            }
        }
        return true;
    }

    //utility function to get the container of an element by tagname
    function GetParentByTagName(parentTagName, childElementObj)
    {
        var parent = childElementObj.parentNode;
        while (parent.tagName.toLowerCase() != parentTagName.toLowerCase())
        {
            parent = parent.parentNode;
        }
        return parent;
    }
</script>


No comments:

Post a Comment