America/US Samples
Europe Samples
Asia Samples

Adding and Clearing Nodes

Demonstrates adding nodes dynamically to a TreeViewItem. The sample is configured to allow adding 10 nodes. After that a modal Window will appear. Then you can clear the list by clicking the Clear All Nodes button and start over :-)

Each TreeNode also has a custom Icon defined


Markup (ASPX/.aspx)

   1:   
   2:   <div>
   3:      <gaia:Button 
   4:          ID="zButtonAdd" 
   5:          runat="server"
   6:          OnClick="zButtonAdd_Click" 
   7:          Text="Add Node" />
   8:          
   9:       <gaia:Button 
  10:          ID="zButtonClear" 
  11:          runat="server"
  12:          OnClick="zButtonClear_Click" 
  13:          Text="Clear All Nodes" />
  14:      
  15:      <br /><br />
  16:       <div style="height:200px;width:100%;">
  17:          <gaia:TreeView 
  18:              runat="server" 
  19:              ID="tree"
  20:              Style="width: 100%; height: 100%; overflow: auto;">
  21:              <gaia:TreeViewItem 
  22:                  runat="server"
  23:                  CssClass="gaiax"
  24:                  IsLeaf="false"
  25:                  Collapsed="true"
  26:                  ID="root" 
  27:                  IconCssClass="folder">
  28:                  Root
  29:              </gaia:TreeViewItem>
  30:          </gaia:TreeView>
  31:      </div>
  32:      <gaia:Window 
  33:          ID="window" 
  34:          CenterInForm="true"
  35:          Caption="Great stuff!"
  36:          runat="server"
  37:          Width="480"
  38:          Height="100"
  39:          Modal="true"
  40:          Visible="false"
  41:          Draggable="false"
  42:          Resizable="false"
  43:          Maximizable="false"
  44:          Minimizable="false">
  45:          <h1>That was easy wasn't it?</h1>
  46:          </gaia:Window>
  47:      
  48:  </div>
  49: