America/US Samples
Europe Samples
Asia Samples

Gaia Ajax: TreeView

The Gaia Ajax TreeView is our version of the TreeView control made popular in the Common Controls from Windows. As you can see from the screen shot, it's a pretty flexible and useful control. The Gaia Ajax TreeView Control is extremely flexible and powerful, yet very intuitive and easy to use. You can combine static items with dynamic items as you wish. Static items are rendered as part of the HTML output of the page (if the TreeView is visible from the start) and dynamic items are retrieved on a "need basis". This means the TreeView will be very useful for both visibility in navigations if you like, while at the same time very efficient on bandwidth usage up front. The TreeView is very easy to skin since it uses ul and li elements and it is also 100% XHTML compliant. It also has perfect support for accessibility.


 

Markup (ASPX/.aspx)

   1:   
   2:   
   3:   <div style="height:200px;width:100%;">
   4:   <gaia:TreeView runat="server" ID="tree" 
   5:      AnimateToggling="false" 
   6:      Style="width: 100%; height: 100%; overflow: auto;">
   7:              <gaia:TreeViewItem runat="server" Collapsed="false" ID="cool_stuff"
   8:                  IconCssClass="folder">
   9:                  Cool Stuff
  10:                  <gaia:TreeViewItem runat="server"  ID="images" Collapsed="false"
  11:                      IconCssClass="folder">
  12:                      Images
  13:                      <gaia:TreeViewItem runat="server" IsLeaf="true"  ID="beautiful" 
  14:                          IconCssClass="file">
  15:                          Beautiful
  16:                      </gaia:TreeViewItem>
  17:                      <gaia:TreeViewItem runat="server" IsLeaf="true"  ID="people" 
  18:                          IconCssClass="file">
  19:                          People
  20:                      </gaia:TreeViewItem>
  21:                      <gaia:TreeViewItem runat="server" IsLeaf="true"  ID="food" 
  22:                          IconCssClass="file">
  23:                          Food
  24:                      </gaia:TreeViewItem>
  25:                  </gaia:TreeViewItem>
  26:                  <gaia:TreeViewItem runat="server"  ID="videos" IconCssClass="folder">
  27:                      Videos
  28:                      <gaia:TreeViewItem runat="server" IsLeaf="true"  ID="jeff_dunham" 
  29:                          IconCssClass="file">
  30:                          Jeff Dunham
  31:                      </gaia:TreeViewItem>
  32:                  </gaia:TreeViewItem>
  33:                  <gaia:TreeViewItem runat="server"  ID="music" IconCssClass="folder">
  34:                      Music
  35:                      <gaia:TreeViewItem runat="server" IsLeaf="true"  ID="jazz_music" 
  36:                          IconCssClass="file">
  37:                          Jazz
  38:                      </gaia:TreeViewItem>
  39:                      <gaia:TreeViewItem runat="server"  ID="classic" IconCssClass="folder">
  40:                          Classic
  41:                          <gaia:TreeViewItem IsLeaf="true" runat="server"  ID="TreeViewItem1"
  42:                              IconCssClass="file">
  43:                              Classic Piece 1
  44:                          </gaia:TreeViewItem>
  45:                          <gaia:TreeViewItem IsLeaf="true" runat="server"  ID="TreeViewItem2"
  46:                              IconCssClass="file">
  47:                              Classic Piece 2
  48:                          </gaia:TreeViewItem>
  49:                          <gaia:TreeViewItem IsLeaf="true" runat="server"  ID="TreeViewItem3"
  50:                              IconCssClass="file">
  51:                              Classic Piece 3
  52:                          </gaia:TreeViewItem>
  53:                      </gaia:TreeViewItem>
  54:                  </gaia:TreeViewItem>
  55:                  <gaia:TreeViewItem runat="server" IsLeaf="true"  ID="advanced"
  56:                      IconCssClass="file">
  57:                      Advanced
  58:                  </gaia:TreeViewItem>
  59:              </gaia:TreeViewItem>
  60:          </gaia:TreeView>
  61:  </div>
  62: