America/US Samples
Europe Samples
Asia Samples

Gaia Ajax: TreeView - With Drag and Drop

It's easy to enable drag and drop in a Gaia Ajax TreeView. When you combine the fact that: 1) you can insert any Gaia control as a child control into each TreeViewItem and 2) you can make any Gaia control draggable, only your imagination will be the limit.

In this sample we have made a Gaia panel draggable, and set the Gaia TreeView at the right as the drop target.


Markup (ASPX/.aspx)

   1:   
   2:   
   3:          <div style="width:49%;height:100%;overflow:auto;float:left; border-right: solid 1px gray; margin-right: 10px;">
   4:              <gaia:TreeView 
   5:                  runat="server" 
   6:                  ID="zTreeLeft" 
   7:                  style="background-color:transparent;">
   8:   
   9:                  <gaia:TreeViewItem 
  10:                      runat="server"
  11:                      Collapsed="true" 
  12:                      ID="zLeftRoot" 
  13:                      OnGetChildrenControls="getTreeItemsLeft"
  14:                      IconCssClass="folder">
  15:                          Source
  16:                      </gaia:TreeViewItem>
  17:              
  18:              </gaia:TreeView>
  19:          </div>
  20:          <div style="width:49%;height:100%;overflow:auto;float:left;">
  21:              <gaia:TreeView 
  22:                  runat="server" 
  23:                  ID="zTreeRight"
  24:                  style="background-color:transparent;">
  25:   
  26:                  <gaia:TreeViewItem 
  27:                      runat="server"
  28:                      Collapsed="true" 
  29:                      ID="zRightRoot"
  30:                      OnGetChildrenControls="getTreeItemsRight"
  31:                      IconCssClass="folder">
  32:                          Drag items here
  33:                      </gaia:TreeViewItem>
  34:              
  35:              </gaia:TreeView>
  36:          </div>
  37:          <br style="clear: both" />
  38: