Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » HTML / CSS » HTML » Downloads
 
Add your own
alternative version

HTML5 Knockout TriState Tree Control

, 22 Oct 2012 CPOL
Used HTML5 Knockout MVVM binding to make TriState Tree Control
HTML5_Knockout_TriState_Tree_Control-noexe.zip
HTML5_Knockout_TriState_Tree_Control
CSS
HTML5_Knockout_TriState_Tree_Control.csproj.user
Images
chk-1.jpg
chk-2.jpg
chk-3.jpg
ex-1.jpg
ex-2.jpg
Lib
obj
Debug
Properties
Scripts
HTML5_Knockout_TriState_Tree_Control.zip
bin
HTML5_Knockout_TriState_Tree_Control.dll
HTML5_Knockout_TriState_Tree_Control.pdb
HTML5_Knockout_TriState_Tree_Control.csproj.user
chk-1.jpg
chk-2.jpg
chk-3.jpg
ex-1.jpg
ex-2.jpg
DesignTimeResolveAssemblyReferencesInput.cache
HTML5_Knockout_TriState_Tree_Control.csprojResolveAssemblyReference.cache
HTML5_Knockout_TriState_Tree_Control.dll
HTML5_Knockout_TriState_Tree_Control.pdb
TempPE
function ClsTriStateTreeNode(parent, cNode, displayTextLength, lavelToExpanded, currentLavel) {
    var Self = this;
    Self.CurrentNode = ko.observable(); //ClsTriStateCheckBox
    Self.ChildNodes = ko.observableArray([]);  //Array of ClsTriStateTreeNode
    Self.HasChild = ko.observable(false);
    var isExpandedChild = false;


    if (lavelToExpanded == null) lavelToExpanded = 0;
    if (currentLavel == null) currentLavel = 1;
    if (lavelToExpanded == 0) {
        isExpandedChild = false;
    } else if (lavelToExpanded < 0) {
        isExpandedChild = true;
    } else if (lavelToExpanded >= currentLavel) {
        isExpandedChild = true;
    } else {
        isExpandedChild = false;;
    }


    Self.ShowChild = ko.observable(isExpandedChild);
    Self.CurrentStatus = 0;


    Self.ExpandChild = function () {
        Self.ShowChild(!Self.ShowChild());
    }

    Self.ResetStatus = function () {
        if (
            parent != null
            && parent.ResetStatus != null
            ) {
            parent.ResetStatus();
        }
        else {
            //Update current status acording child status to reset parent
            Self.SetTriStatus();
        }

    }

    // Bitwise OR 
    // UNCHECKED-1(01) & CHECKED-2(10) = INDETERMINATE 3(11)
    // UNCHECKED-1(01) & UNCHECKED-1(01) = UNCHECKED 1(01)
    // CHECKED-2(10) & CHECKED-2(10) = INDETERMINATE 2(10)
    Self.SetTriStatus = function () {
        Self.CurrentStatus = 0;
        if (Self.HasChild() && Self.ChildNodes != null && Self.ChildNodes().length > 0) {
            for (var childCtr = 0 ; childCtr < Self.ChildNodes().length; childCtr++) {
                //Use Recurtion to update child first then parent
                Self.ChildNodes()[childCtr].SetTriStatus();
                //After changing child status acording their child status, 
                //Update current status acording child status to reset parent
                Self.CurrentStatus |= Self.ChildNodes()[childCtr].CurrentNode().State();
            }
            Self.CurrentNode().LoadStatus(Self.CurrentStatus);
        } else {
            // If dont have child then return 
            Self.CurrentStatus = Self.CurrentNode().State();
        }
    }

    //Update All Child of current tree with updateStatus para. 
    //Call this method to change all child to updateStatus when any node status change to updateStatus    
    Self.UpdateChildStatus = function (updateStatus) {
        if (Self.HasChild() && Self.ChildNodes != null && Self.ChildNodes().length > 0) {
            for (var childCtr = 0 ; childCtr < Self.ChildNodes().length; childCtr++) {
                Self.ChildNodes()[childCtr].UpdateChildStatus(updateStatus);
            }
        }
        Self.CurrentNode().LoadStatus(updateStatus);
    }

    //Loading Data To Tree
    if (cNode != null) {
        Self.CurrentNode(new ClsTriStateCheckBox(Self, cNode, displayTextLength));
        if (cNode.Childs != null && cNode.Childs.length > 0) {
            for (var childCtr = 0 ; childCtr < cNode.Childs.length; childCtr++) {
                //Use Recurtion to create list of Self object
                Self.ChildNodes.push(new ClsTriStateTreeNode(Self, cNode.Childs[childCtr], displayTextLength, lavelToExpanded, currentLavel + 1));
            }
        }
        Self.HasChild(Self.ChildNodes() != null && Self.ChildNodes().length > 0 ? true : false)
        if (
             !(parent != null
              && parent.ResetStatus != null)
              ) {
            //Update current status acording child status to reset parent
            Self.SetTriStatus();
        }
    }
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Prasad Bhalekar(PP)
Architect
India India
Myself from the dream city of Mumbai,India.
Academically, I have completed Degree and Diploma in Computer Science engineering
 
I started working as a freelance programmer, on fronts like embedded systems, web, windows , using Microsoft as well as Sun technologies.
 
Presently working in a reputed IT company.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411023.1 | Last Updated 22 Oct 2012
Article Copyright 2012 by Prasad Bhalekar(PP)
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid