America/US Samples
Europe Samples
Asia Samples

Gaia Ajax: Toolbar

The Gaia Ajax Toolbar (or Menu if you like) is a container with a collection of ToolbarItems which in turn can be as complex or as simple as you want them to be. You can add up any widget you like inside your Gaia Ajax Toolbar. Including Buttons, CheckBoxes, DateTimePickers and even AutoCompleters and Repeaters if you want to. And everything is ajaxified automatically. Some of the key features of the Gaia Ajax Toolbar is that it does its work and nothing more. It is small, works 100% fine together with search engines and it is highly flexible.


Ajax Menu

Let's play around with a couple of ideas for this control together.

Would it be possible to add up an Autocompleter inside one of the submenus?


- Of course. That's actually too easy.


Another Question: Can you make the items themselves draggable?


- No problem! You can even support drag and drop between toolbars


Ok, third queestion: Is it possible to dynamically populate the Toolbar on-demand?

- ahh ... Yes. I am getting sleepy here. Do you have any more questions for me? And btw, all Gaia controls yields the same answers. It's because it's about flexibility and versatility. I rest my case!


 

Markup (ASPX/.aspx)

   1:   
   2:   
   3:  <div style="height: 320px;">
   4:  <gaia:Toolbar runat="server" ID="toolbar" Width="500px" >
   5:      <gaia:ToolbarItem ID="ToolbarItem1" runat="server" Animation="Blind">
   6:          Edit
   7:          <gaia:ToolbarItem ID="ToolbarItem2" runat="server"  IconCssClass="icon-house">
   8:              <gaia:LinkButton 
   9:                  runat="server" 
  10:                  ID="copyBtn" 
  11:                  OnClick="itemCommand"
  12:                  Text="Copy" />
  13:          </gaia:ToolbarItem>
  14:          <gaia:ToolbarItem ID="ToolbarItem3" runat="server"  IconCssClass="icon-computer">
  15:              <gaia:LinkButton 
  16:                  runat="server" 
  17:                  ID="cutBtn" 
  18:                  OnClick="itemCommand"
  19:                  Text="Cut" />
  20:          </gaia:ToolbarItem>
  21:          <gaia:ToolbarItem ID="ToolbarItem4" runat="server"  IconCssClass="icon-nofolder">
  22:              <gaia:LinkButton 
  23:                  runat="server" 
  24:                  ID="pasteBtn" 
  25:                  OnClick="itemCommand"
  26:                  Text="Paste" />
  27:          </gaia:ToolbarItem>
  28:          <gaia:ToolbarItem ID="ToolbarItem5" runat="server"  IconCssClass="icon-musicfolder">
  29:              <gaia:LinkButton 
  30:                  runat="server" 
  31:                  ID="previewBtn" 
  32:                  OnClick="itemCommand"
  33:                  Text="Preview" />
  34:          </gaia:ToolbarItem>
  35:      </gaia:ToolbarItem>
  36:      <gaia:ToolbarItem ID="ToolbarItem6" runat="server"  Animation="Blind">
  37:          Format
  38:          <gaia:ToolbarItem ID="ToolbarItem7" runat="server"  IconCssClass="icon-folder">
  39:              <gaia:LinkButton 
  40:                  runat="server" 
  41:                  ID="hyperlinkBtn" 
  42:                  OnClick="itemCommand"
  43:                  Text="Hyperlink" />
  44:          </gaia:ToolbarItem>
  45:          <gaia:ToolbarItem ID="ToolbarItem8" runat="server"  IconCssClass="icon-trashcan" Animation="Blind">
  46:              Text Formatting &gt;
  47:              <gaia:ToolbarItem ID="ToolbarItem9" runat="server"  IconCssClass="icon-writer">
  48:                  <gaia:LinkButton 
  49:                      runat="server" 
  50:                      ID="boldBtn" 
  51:                      OnClick="itemCommand"
  52:                      style="font-weight:bold;"
  53:                      Text="Bold" />
  54:              </gaia:ToolbarItem>
  55:              <gaia:ToolbarItem ID="ToolbarItem10" runat="server"  IconCssClass="icon-refresh">
  56:                  <gaia:LinkButton 
  57:                      runat="server" 
  58:                      ID="italicsBtn" 
  59:                      style="font-style:italic;"
  60:                      OnClick="itemCommand"
  61:                      Text="Italics" />
  62:              </gaia:ToolbarItem>
  63:              <gaia:ToolbarItem ID="ToolbarItem11" runat="server"  IconCssClass="icon-drivers">
  64:                  <gaia:LinkButton 
  65:                      runat="server" 
  66:                      ID="underlineBtn" 
  67:                      style="text-decoration:underline;"
  68:                      OnClick="itemCommand"
  69:                      Text="Underline" />
  70:              </gaia:ToolbarItem>
  71:              <gaia:ToolbarItem ID="ToolbarItem12" runat="server"  IconCssClass="icon-package">
  72:                  <gaia:LinkButton 
  73:                      runat="server" 
  74:                      ID="strikeBtn" 
  75:                      style="text-decoration:line-through;"
  76:                      OnClick="itemCommand"
  77:                      Text="Strike-through" />
  78:              </gaia:ToolbarItem>
  79:          </gaia:ToolbarItem>
  80:          <gaia:ToolbarItem ID="ToolbarItem13" runat="server"  IconCssClass="icon-mouse" Animation="Blind">
  81:              Select Font &gt;
  82:              <gaia:ToolbarItem ID="ToolbarItem14" runat="server"  IconCssClass="icon-writer">
  83:                  <gaia:LinkButton 
  84:                      runat="server" 
  85:                      ID="arial" 
  86:                      style="font-family:Arial;"
  87:                      OnClick="itemCommand"
  88:                      Text="Arial" />
  89:              </gaia:ToolbarItem>
  90:              <gaia:ToolbarItem ID="ToolbarItem15" runat="server"  IconCssClass="icon-cd">
  91:                  <gaia:LinkButton 
  92:                      runat="server" 
  93:                      ID="verdana" 
  94:                      style="font-family:Verdana;"
  95:                      OnClick="itemCommand"
  96:                      Text="Verdana" />
  97:              </gaia:ToolbarItem>
  98:              <gaia:ToolbarItem ID="ToolbarItem16" runat="server"  IconCssClass="icon-flower">
  99:                  <gaia:LinkButton 
 100:                      runat="server" 
 101:                      ID="times" 
 102:                      style="font-family:Time New Roman;"
 103:                      OnClick="itemCommand"
 104:                      Text="Times New Roman" />
 105:              </gaia:ToolbarItem>
 106:              <gaia:ToolbarItem ID="ToolbarItem17" runat="server"  IconCssClass="icon-warning">
 107:                  <gaia:LinkButton 
 108:                      runat="server" 
 109:                      ID="microsoft" 
 110:                      style="font-family:Microsoft Sans Serif;"
 111:                      OnClick="itemCommand"
 112:                      Text="MS Sans Serif" />
 113:              </gaia:ToolbarItem>
 114:          </gaia:ToolbarItem>
 115:      </gaia:ToolbarItem>
 116:  </gaia:Toolbar>
 117:  <br />
 118:  <h2>Ajax Menu</h2>
 119:  <h3>Let's play around with a couple of ideas for this control together.</h3>
 120:  <p><b>Would it be possible to add up an Autocompleter inside one of the submenus?</b> </p>
 121:  <br />
 122:  <p>- Of course. That's actually too easy. </p>
 123:  <br />
 124:  <p><b>Another Question: Can you make the items themselves draggable? </b></p>
 125:  <br />
 126:  <p>- No problem! You can even support drag and drop between toolbars</p>
 127:  <br />
 128:  <p><b>Ok, third queestion: Is it possible to dynamically populate the Toolbar on-demand? </b></p>
 129:  <p>- ahh ... Yes. I am getting sleepy here. 
 130:  Do you have any more questions for me? And btw, all Gaia controls yields the same answers. It's because
 131:  it's about flexibility and versatility. I rest my case!
 132:  </p>
 133:  </div>
 134:   
 135:  <gaia:Label ID="zMessage" runat="server"></gaia:Label>
 136:   
 137: