America/US Samples
Europe Samples
Asia Samples

Gaia Ajax TreeView

This is an example of our Ajax TreeView Control. The Gaia Ajax TreeView Control is very flexible and easy to use. You can use static items and dynamic items. Static items are rendered as HTML output on the page and dynamic items are retrieved on-demand. In this sample we have created various combinations of TreeViewItems to demonstrate different usage patterns.
Try to expand folder items and click and/or drag and drop any of the green file items which becomes visible.

Ajax TreeView
Results
As you navigate our Ajax TreeView Control you will notice that this part of the page will contain "navigation results". Very often when a component vendor demonstrates a complex Ajax Control like an Ajax TreeView there will be no logic behind the selection of TreeViewNodes. As you can see, this is not the case for our Gaia Ajax TreeView Control Sample ;)


 

Markup (ASPX/.aspx)

   1:   
   2:      <gaia:ExtendedPanel 
   3:          ID="pnlWrapper"
   4:          runat="server"
   5:          Caption="Ajax TreeView" 
   6:          IconCssClass="windowIcon" 
   7:          AnimationDuration="300"
   8:          style="width:195px;float:left;" 
   9:          Draggable="false">
  10:          <div style="height:399px;width:100%;">
  11:   
  12:              <gaia:TreeView 
  13:                  runat="server" 
  14:                  ID="tree" 
  15:                  AnimateToggling="true"
  16:                  OnNodeSelected="tree_NodeSelected"
  17:                  style="overflow:auto; height: 100%; width: 100%;">
  18:   
  19:                  <gaia:TreeViewItem runat="server" Collapsed="false" ID="cool_stuff" IconCssClass="folder">
  20:                      Cool Stuff
  21:                      <gaia:TreeViewItem runat="server" ID="images" Collapsed="false" IconCssClass="folder">
  22:                          Images
  23:                          <gaia:TreeViewItem runat="server" ID="beautiful" OnGetChildrenControls="RetrieveTreeViewItems" IconCssClass="folder">
  24:                              Beautiful
  25:                          </gaia:TreeViewItem>
  26:                          <gaia:TreeViewItem runat="server" ID="people" OnGetChildrenControls="RetrieveTreeViewItems" IconCssClass="folder">
  27:                              People
  28:                          </gaia:TreeViewItem>
  29:                          <gaia:TreeViewItem runat="server" ID="food" OnGetChildrenControls="RetrieveTreeViewItems" IconCssClass="folder">
  30:                              Food
  31:                          </gaia:TreeViewItem>
  32:                      </gaia:TreeViewItem>
  33:                      <gaia:TreeViewItem runat="server" ID="videos" IconCssClass="folder">
  34:                          Videos
  35:                          <gaia:TreeViewItem runat="server" ID="jeff_dunham" OnGetChildrenControls="RetrieveTreeViewItems" IconCssClass="folder">
  36:                              Jeff Dunham
  37:                          </gaia:TreeViewItem>
  38:                      </gaia:TreeViewItem>
  39:                      <gaia:TreeViewItem runat="server" ID="music" IconCssClass="folder">
  40:                          Music
  41:                          <gaia:TreeViewItem runat="server" ID="jazz_music" OnGetChildrenControls="RetrieveTreeViewItems" IconCssClass="folder">
  42:                              Jazz
  43:                          </gaia:TreeViewItem>
  44:                          <gaia:TreeViewItem runat="server" ID="classic" OnGetChildrenControls="RetrieveTreeViewItems" IconCssClass="folder">
  45:                              Classic
  46:                          </gaia:TreeViewItem>
  47:                      </gaia:TreeViewItem>
  48:                      <gaia:TreeViewItem runat="server" ID="advanced" OnGetChildrenControls="RetrieveAdvancedItems" IconCssClass="folder">
  49:                          Advanced
  50:                      </gaia:TreeViewItem>
  51:                  </gaia:TreeViewItem>
  52:   
  53:              </gaia:TreeView>
  54:          </div>
  55:      <gaia:Panel 
  56:          runat="server" 
  57:          ID="updateProgressControl" 
  58:          style="position:absolute;top:0px;right:15px;display:none;">
  59:          <img runat="server" style="float:right;" alt="Update Control" src="~/media/contentImages/ajax-loader.gif" />
  60:      </gaia:Panel>
  61:      </gaia:ExtendedPanel>
  62:   
  63:      <div style="float:left;margin-left:5px;">
  64:          <gaia:ExtendedPanel 
  65:              runat="server" 
  66:               
  67:              Caption="Results" 
  68:              AnimationDuration="300"
  69:              ID="resultsPanel"
  70:              style="width:350px;">
  71:              <uc1:TreeViewResults 
  72:                  ID="viewer" 
  73:                  runat="server" />
  74:          </gaia:ExtendedPanel>
  75:      </div>
  76:   
  77:      <br style="clear:both;" />
  78:   
  79:   
  80: