Click here to Skip to main content
11,413,676 members (78,867 online)
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

// No var in javascript is globale variable
sampleNode =
               {
                   displayText: 'RootNode',
                   defaultState: false,
                   Childs:
                       [
                       {
                           displayText: 'Node1',
                           defaultState: false,
                           Childs:
                               [
                                   {
                                       displayText: 'Node1-1',
                                       defaultState: false,
                                       Childs: []
                                   }
                                   ,
                                   {
                                       displayText: 'Node1-2',
                                       defaultState: false,
                                       Childs:
                                               [
                                                   {
                                                       displayText: 'Node1-2-1',
                                                       defaultState: false,
                                                       Childs: []
                                                   }
                                                   ,
                                                   {
                                                       displayText: 'Node1-2-2',
                                                       defaultState: false,
                                                       Childs:
                                                           [
                                                               {
                                                                   displayText: 'Node1-2-2-1',
                                                                   defaultState: false,
                                                                   Childs: []
                                                               }
                                                               ,
                                                               {
                                                                   displayText: 'Node1-2-2-1',
                                                                   defaultState: false,
                                                                   Childs:

                                                                           [
                                                                               {
                                                                                   displayText: 'Node1-2-2-1-1',
                                                                                   defaultState: false,
                                                                                   Childs: []
                                                                               }
                                                                               ,
                                                                               {
                                                                                   displayText: 'Node1-2-2-2',
                                                                                   defaultState: false,
                                                                                   Childs: []
                                                                               }
                                                                           ]


                                                               }
                                                           ]
                                                   }

                                               ]
                                   }
                                   ,
                                   {
                                       displayText: 'Node1-3',
                                       defaultState: false,
                                       Childs:
                                               [
                                                   {
                                                       displayText: 'Node1-3-1',
                                                       defaultState: false,
                                                       Childs: []
                                                   }
                                                   ,
                                                   {
                                                       displayText: 'Node1-3-2',
                                                       defaultState: false,
                                                       Childs:
                                                           [

                                                               {
                                                                   displayText: 'Node1-3-1',
                                                                   defaultState: false,
                                                                   Childs: []
                                                               }
                                                               ,
                                                               {
                                                                   displayText: 'Node1-3-2',
                                                                   defaultState: false,
                                                                   Childs: []
                                                               }
                                                           ]

                                                   }
                                               ]
                                   }
                               ]
                       }
                       ,
                       {
                           displayText: 'Node2',
                           defaultState: false,
                           Childs:
                               [
                                   {
                                       displayText: 'Node2-1',
                                       defaultState: false,
                                       Childs: []
                                   }
                                   ,
                                   {
                                       displayText: 'Node2-2',
                                       defaultState: false,
                                       Childs:
                                           [

                                               {
                                                   displayText: 'Node2-2-1',
                                                   defaultState: false,
                                                   Childs: []
                                               }
                                               ,
                                               {
                                                   displayText: 'Node2-2-2',
                                                   defaultState: false,
                                                   Childs:
                                                       [

                                                           {
                                                               displayText: 'Node2-2-2-1',
                                                               defaultState: false,
                                                               Childs: []
                                                           }
                                                           ,
                                                           {
                                                               displayText: 'Node2-2-2-2',
                                                               defaultState: false,
                                                               Childs: []
                                                           }
                                                       ]
                                               }
                                           ]
                                   }
                                   ,
                                   {
                                       displayText: 'Node2-3',
                                       defaultState: false,
                                       Childs:
                                           [

                                                   {
                                                       displayText: 'Node2-3-1',
                                                       defaultState: false,
                                                       Childs: []
                                                   }
                                                   ,
                                                   {
                                                       displayText: 'Node2-3-2',
                                                       defaultState: false,
                                                       Childs: []
                                                   }
                                           ]
                                   }
                               ]
                       }
                       ,
                       {
                           displayText: 'Node3',
                           defaultState: true,
                           Childs:
                               [
                                   {
                                       displayText: 'Node3-1',
                                       defaultState: true,
                                       Childs: []
                                   }
                                   ,
                                   {
                                       displayText: 'Node3-2',
                                       defaultState: true,
                                       Childs: [

                                                               {
                                                                   displayText: 'Node3-2-1',
                                                                   defaultState: true,
                                                                   Childs: []
                                                               }
                                                               ,
                                                               {
                                                                   displayText: 'Node3-2-2',
                                                                   defaultState: true,
                                                                   Childs:
                                                                       [

                                                                           {
                                                                               displayText: 'Node3-2-2-1',
                                                                               defaultState: true,
                                                                               Childs: []
                                                                           }
                                                                           ,
                                                                           {
                                                                               displayText: 'Node3-2-2-2',
                                                                               defaultState: true,
                                                                               Childs: []
                                                                           }
                                                                       ]
                                                               }
                                       ]
                                   }
                                   ,
                                   {
                                       displayText: 'Node3-3',
                                       defaultState: true,
                                       Childs: [

                                                               {
                                                                   displayText: 'Node3-3-1',
                                                                   defaultState: true,
                                                                   Childs:
                                                                       [

                                                                           {
                                                                               displayText: 'Node3-3-1-1',
                                                                               defaultState: true,
                                                                               Childs: []
                                                                           }
                                                                           ,
                                                                           {
                                                                               displayText: 'Node3-3-1-2',
                                                                               defaultState: true,
                                                                               Childs: []
                                                                           }
                                                                       ]
                                                               }
                                                               ,
                                                               {
                                                                   displayText: 'Node3-3-2',
                                                                   defaultState: true,
                                                                   Childs: [

                                                                               {
                                                                                   displayText: 'Node3-3-2-1',
                                                                                   defaultState: true,
                                                                                   Childs: []
                                                                               }
                                                                               ,
                                                                               {
                                                                                   displayText: 'Node3-3-2-2',
                                                                                   defaultState: true,
                                                                                   Childs: []
                                                                               }
                                                                   ]
                                                               }
                                       ]
                                   }
                               ]
                       }

                       ]
               };

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.150427.2 | Last Updated 22 Oct 2012
Article Copyright 2012 by Prasad Bhalekar(PP)
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid