Configuring Toolbar Layout

The most common form of configuration is configuration of the toolbar, such as adding new items to the toolbar, removing default items from the toolbar, or changing the order of items in the toolbar. This can all be done using the Property Builder application without writing code (see Using the Property Builder for more information on this). This topic addresses configuring the toolbar using coding techniques. PowerWEB TextBox for ASP.NET provides a set of pre-configured items which are enumerated by the ToolbarItemType enumeration. This enumeration can be used in conjunction with the AddToolbarItem method to quickly create and add a toolbar item or with the associated object constructor to provide default values to a created object.

The following topics address configuration using pre-configured items. If you need to create custom items, see the Advanced Customization topic.

• Creating a toolbar layout using server tags
• Creating a toolbar layout quickly using AddToolbarItem
• Fine-tuned toolbar layout using the Items collection

Creating a toolbar layout using server tags

If you are not using code-behind, you can configure the toolbar layout using server tags only.

<cc1:htmlbox id=HtmlBox1 runat="server">
   <Toolbar>
      <cc1:ToolbarButton Type="Bold"></cc1:ToolbarButton>
      <cc1:ToolbarButton Type="Italic"></cc1:ToolbarButton>
      <cc1:ToolbarButton Type="Underline"></cc1:ToolbarButton>
      <cc1:ToolbarImage Type="RowSeparator"></cc1:ToolbarImage>
      <cc1:ToolbarDropDown Type="FontName"></cc1:ToolbarDropDown>
      <cc1:ToolbarDialogButton Type="FontColor"></cc1:ToolbarDialogButton>
      <cc1:ToolbarMenuButton Type="InsertTable"></cc1:ToolbarMenuButton>
      <cc1:ToolbarUploadButton Type="InsertImage"></cc1:ToolbarUploadButton>
   </Toolbar>
</cc1:htmlbox>

Creating a toolbar layout quickly using AddToolbarItem

The quickest way to create a toolbar layout is to use the AddToolbarItem method. The following example demonstrates clearing the default layout, adding a few buttons, adding a row, and adding a few more buttons.

[C#]
// Be sure to add "Using Dart.PowerWEB.TextBox" to the top of your code-behind class.

private void Page_Load(object sender, System.EventArgs e)
{
   // Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   if(!Page.IsPostBack)
   {
      // First clear the default config.
      HtmlBox1.Clear();  

      // Add a few standard buttons
      HtmlBox1.AddToolbarItem(ToolbarItemType.Bold);
      HtmlBox1.AddToolbarItem(ToolbarItemType.Italic);
      HtmlBox1.AddToolbarItem(ToolbarItemType.Underline);
      
      // Add a new row
      HtmlBox1.AddToolbarItem(ToolbarItemType.RowSeperator);
      
      // Add a few more buttons
      HtmlBox1.AddToolbarItem(ToolbarItemType.FontName);
      HtmlBox1.AddToolbarItem(ToolbarItemType.FontColor);
      HtmlBox1.AddToolbarItem(ToolbarItemType.InsertTable);
      HtmlBox1.AddToolbarItem(ToolbarItemType.InsertImage);
   }
}

[Visual Basic]
' Be sure to add "Imports Dart.PowerWEB.TextBox" to the top of your code-behind class.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

   ' Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   If Not Page.IsPostBack Then
   
      ' First clear the default config.
      HtmlBox1.Clear()

      ' Add a few standard buttons
      HtmlBox1.AddToolbarItem(ToolbarItemType.Bold)
      HtmlBox1.AddToolbarItem(ToolbarItemType.Italic)
      HtmlBox1.AddToolbarItem(ToolbarItemType.Underline)
      
      ' Add a new row
      HtmlBox1.AddToolbarItem(ToolbarItemType.RowSeperator)
      
      ' Add a few more buttons
      HtmlBox1.AddToolbarItem(ToolbarItemType.FontName)
      HtmlBox1.AddToolbarItem(ToolbarItemType.FontColor)
      HtmlBox1.AddToolbarItem(ToolbarItemType.InsertTable)
      HtmlBox1.AddToolbarItem(ToolbarItemType.InsertImage)
   End If
End Sub

Fine-tuned toolbar layout using the Items collection

The HtmlBox.AddToolbarItem method provides an easy to use mechanism to quickly create a toolbar without concern for the type of object you are adding. While this works well for most scenarios, it doesn't provide the absolute flexibility required for every scenario. For optimal flexibility, use the Toolbar.Items collection, which gives you the ability to Add, Insert, Remove, and other collection specific methods.

In order to use this, you must have knowledge of the various object types used to represent each toolbar item. These are listed in the ToolbarItemType enumeration topic.

[C#]
// Be sure to add "Using Dart.PowerWEB.TextBox" to the top of your code-behind class.

private void Page_Load(object sender, System.EventArgs e)
{
   // Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   if(!Page.IsPostBack)
   {
      // First clear the default config.
      HtmlBox1.Toolbar.Items.Clear();  

      // Add a few standard buttons
      
      // First bold (which is a ToolbarButton type)
      ToolbarButton bold = new ToolbarButton(ToolbarButtonType.Bold);
      
      // Italic (also a ToolbarButton type)
      ToolbarButton italic = new ToolbarButton(ToolbarButtonType.Italic);
      
      // Underline (also a ToolbarButton type)
      ToolbarButton underline = new ToolbarButton(ToolbarButtonType.Underline);
      
      // Add them to the toolbar
      HtmlBox1.Toolbar.Items.Add(bold);
      HtmlBox1.Toolbar.Items.Add(italic);
      HtmlBox1.Toolbar.Items.Add(underline);
      
      // Add a new row (which is a ToolbarImage type)
      ToolbarImage row = new ToolbarImage(ToolbarImageType.RowSeperator);
      HtmlBox1.Toolbar.Items.Add(row);
      
      // Add a few more buttons
       
      // FontName is a ToolbarDropDown type
      ToolbarDropDown fontName = new ToolbarDropDown(ToolbarDropDownType.FontName);
      
      // FontColor is a ToolbarDialogButton type
      ToolbarDialogButton fontColor = new ToolbarDialogButton(ToolbarDialogButtonType.FontColor);
      
      // InsertTable is a ToolbarMenuButton type
      ToolbarMenuButton insertTable = new ToolbarMenuButton(ToolbarMenuButtonType.InsertTable);
      
      // InsertImage is a ToolbarUploadButton type
      ToolbarUploadButton insertImage = new ToolbarUploadButton(ToolbarUploadButtonType.InsertImage);
      
      
      // Add them to the toolbar
      HtmlBox1.Toolbar.Items.Add(fontName);
      HtmlBox1.Toolbar.Items.Add(fontColor);
      HtmlBox1.Toolbar.Items.Add(insertTable);
      HtmlBox1.Toolbar.Items.Add(insertImage);
      
      // Now, to demonstrate the advanced Toolbar.Items management, we 
      // will insert a button just before the new row.
      
      // First, get the row instance
      row = (ToolbarImage)HtmlBox1.Toolbar.Items.GetByType(ToolbarItemType.RowSeperator);
      
      // Get the index of the row
      int index = HtmlBox1.Toolbar.Items.IndexOf(row);
      
      // Insert a new button just before the row
      ToolbarButton subscript = new ToolbarButton(ToolbarButtonType.Subscript);
      HtmlBox1.Toolbar.Items.Insert(index-1, subscript);
   }
}

[Visual Basic]
' Be sure to add "Imports Dart.PowerWEB.TextBox" to the top of your code-behind class.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

   ' Check if it is the first page request. The toolbar will maintain its state for additional postbacks.
   If Not Page.IsPostBack Then
   
      ' First clear the default config.
      HtmlBox1.Toolbar.Items.Clear()

      ' Add a few standard buttons
      
      ' First bold (which is a ToolbarButton type)
      Dim bold As New ToolbarButton(ToolbarButtonType.Bold)
      
      ' Italic (also a ToolbarButton type)
      Dim italic As New ToolbarButton(ToolbarButtonType.Italic)
      
      ' Underline (also a ToolbarButton type)
      Dim underline As New ToolbarButton(ToolbarButtonType.Underline)
      
      ' Add them to the toolbar
      HtmlBox1.Toolbar.Items.Add(bold)
      HtmlBox1.Toolbar.Items.Add(italic)
      HtmlBox1.Toolbar.Items.Add(underline)
      
      ' Add a new row (which is a ToolbarImage type)
      Dim row As New ToolbarImage(ToolbarImageType.RowSeperator)
      HtmlBox1.Toolbar.Items.Add(row)
      
      ' Add a few more buttons
       
      ' FontName is a ToolbarDropDown type
      Dim fontName As New ToolbarDropDown(ToolbarDropDownType.FontName)
      
      ' FontColor is a ToolbarDialogButton type
      Dim fontColor As New ToolbarDialogButton(ToolbarDialogButtonType.FontColor)
      
      ' InsertTable is a ToolbarMenuButton type
      Dim insertTable As New ToolbarMenuButton(ToolbarMenuButtonType.InsertTable)
      
      ' InsertImage is a ToolbarUploadButton type
      Dim insertImage As New ToolbarUploadButton(ToolbarUploadButtonType.InsertImage)
      
      
      ' Add them to the toolbar
      HtmlBox1.Toolbar.Items.Add(fontName)
      HtmlBox1.Toolbar.Items.Add(fontColor)
      HtmlBox1.Toolbar.Items.Add(insertTable)
      HtmlBox1.Toolbar.Items.Add(insertImage)
      
      ' Now, to demonstrate the advanced Toolbar.Items management, we 
      ' will insert a button just before the new row.
      
      ' First, get the row instance
      row = HtmlBox1.Toolbar.Items.GetByType(ToolbarItemType.RowSeperator)
      
      ' Get the index of the row
      Dim index As Integer = HtmlBox1.Toolbar.Items.IndexOf(row)
      
      ' Insert a new button just before the row
      Dim subscript As New ToolbarButton(ToolbarButtonType.Subscript)
      HtmlBox1.Toolbar.Items.Insert(index-1, subscript)
   End If
End Sub

In This Section

Using the Property Builder

Describes how to use the built-in Property Builder to completely configure the HtmlBox without writing code.

Configuring Toolbar Layout

Describes the techniques that can be used to easily configure the items on a toolbar.

Configuring Style

Describes the techniqes that can be used to easily configure the style of the HtmlBox.

Using Helper Properties

Describes using the high-level "helper properties" to easily customize elements such as font names available in the drop down.