Using Helper Properties

The HtmlBox control exposes several high-level "helper properties", which can be used to quickly configure many aspects of the HtmlBox. The following high-level properties are addressed.

• HtmlBox.FontNameList property
• HtmlBox.FontSizeList property
• HtmlBox.FontFormattingList property
• HtmlBox.FontStyleList property
• HtmlBox.SpecialCharacterList property
• HtmlBox.ColorPaletteType property
• HtmlBox.RightClickBehavior property

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 styles using coding techniques.

HtmlBox.FontNameList property

The FontNameList provides default values to the "font name" drop-down. Simply manage the collection exposed by this property to change the font names available on the editor.

[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. State will be maintained for additional postbacks.
   if(!Page.IsPostBack)
   {
      // First make sure you have added a FontName item (this is included in the default configuration,
      // so typically you will not need this line of code.
      HtmlBox1.AddToolbarItem(ToolbarItemType.FontName);
      
      // Now clear out the default fonts and add new ones.
      HtmlBox1.FontNameList.Clear();
      HtmlBox1.FontNameList.Add("Courier");
      HtmlBox1.FontNameList.Add("Times New Roman");
      HtmlBox1.FontNameList.Add("Arial");
      HtmlBox1.FontNameList.Add("Verdana");
      HtmlBox1.FontNameList.Add("Comic Sans MS");
   }
}

[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 make sure you have added a FontName item (this is included in the default configuration,
      ' so typically you will not need this line of code.
      HtmlBox1.AddToolbarItem(ToolbarItemType.FontName)
      
      ' Now clear out the default fonts and add new ones.
      HtmlBox1.FontNameList.Clear()
      HtmlBox1.FontNameList.Add("Courier")
      HtmlBox1.FontNameList.Add("Times New Roman")
      HtmlBox1.FontNameList.Add("Arial")
      HtmlBox1.FontNameList.Add("Verdana")
      HtmlBox1.FontNameList.Add("Comic Sans MS")
   
   End If
End Sub

HtmlBox.FontSizeList property

The HtmlBox.FontSizeList provides default values to the "font size" drop-down. Simply manage the collection exposed by this property to change the font sizes available on the editor.

[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. State will be maintained for additional postbacks.
   if(!Page.IsPostBack)
   {
      // First make sure you have added a FontSize item (this is included in the default configuration,
      // so typically you will not need this line of code.
      HtmlBox1.AddToolbarItem(ToolbarItemType.FontSize);
      
      // Now clear out the default font names and add new ones.
      HtmlBox1.FontSizeList.Clear();
      HtmlBox1.FontSizeList.Add("1");
      HtmlBox1.FontSizeList.Add("2");
      HtmlBox1.FontSizeList.Add("3");
      HtmlBox1.FontSizeList.Add("4");
      HtmlBox1.FontSizeList.Add("5");
   }
}

[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 make sure you have added a FontSize item (this is included in the default configuration,
      ' so typically you will not need this line of code.
      HtmlBox1.AddToolbarItem(ToolbarItemType.FontSize)
      
      ' Now clear out the default font sizes and add new ones.
      HtmlBox1.FontSizeList.Clear()
      HtmlBox1.FontSizeList.Add("1")
      HtmlBox1.FontSizeList.Add("2")
      HtmlBox1.FontSizeList.Add("3")
      HtmlBox1.FontSizeList.Add("4")
      HtmlBox1.FontSizeList.Add("5")
   
   End If
End Sub

HtmlBox.FontFormatting List property

The HtmlBox.FontFormattingList provides default values to the "font formatting" drop-down. Simply manage the collection exposed by this property to change the font formatting types available on the editor.

[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. State will be maintained for additional postbacks.
   if(!Page.IsPostBack)
   {
      // First make sure you have added a FontFormatting item (this is included in the default configuration,
      // so typically you will not need this line of code.
      HtmlBox1.AddToolbarItem(ToolbarItemType.FontFormatting);
      
      // Now clear out the default font formatting types and add new ones.
      HtmlBox1.FontFormattingList.Clear();
      HtmlBox1.FontFormattingList.Add("Heading 1", "<H1>");
      HtmlBox1.FontFormattingList.Add("Heading 2", "<H2>");
      HtmlBox1.FontFormattingList.Add("Heading 3", "<H3>");
   }
}

[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 make sure you have added a FontFormatting item (this is included in the default configuration,
      ' so typically you will not need this line of code.
      HtmlBox1.AddToolbarItem(ToolbarItemType.FontFormatting)
      
      ' Now clear out the default font formatting types and add new ones.
      HtmlBox1.FontFormattingList.Clear()
      HtmlBox1.FontFormattingList.Add("Heading 1", "<H1>")
      HtmlBox1.FontFormattingList.Add("Heading 2", "<H2>")
      HtmlBox1.FontFormattingList.Add("Heading 3", "<H3>")
   
   End If
End Sub

HtmlBox.FontStyleList property

The HtmlBox.FontStyleList provides default values to the "font style" drop-down. Simply manage the collection exposed by this property to change the font formatting types available on the editor. The HtmlBox.FontStyleList accepts two types of font style definitions, either classes (i.e. "mystyle") defined in an external CSS, or actual style definitions ("color:blue;font-name:courier");

[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. State will be maintained for additional postbacks.
   if(!Page.IsPostBack)
   {
      // First make sure you have added a FontStyle item
      HtmlBox1.AddToolbarItem(ToolbarItemType.FontStyle);
      
      // Now clear out the default font formatting types and add new ones.
      HtmlBox1.FontStyleList.Clear();
      HtmlBox1.FontStyleList.Add("My Style", "mystyle"); // Assume defined in external CSS
      HtmlBox1.FontStyleList.Add("Red Bold", "color:red;font-weight:bold;");
      HtmlBox1.FontStyleList.Add("ALL CAPS", "text-transform:uppercase;");
   }
}

[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 make sure you have added a FontStyle item
      HtmlBox1.AddToolbarItem(ToolbarItemType.FontStyle)
      
      ' Now clear out the default font formatting types and add new ones.
      HtmlBox1.FontStyleList.Clear()
      HtmlBox1.FontStyleList.Add("My Style", "mystyle") ' Assume defined in external CSS
      HtmlBox1.FontStyleList.Add("Red Bold", "color:red;font-weight:bold;")'
      HtmlBox1.FontStyleList.Add("ALL CAPS", "text-transform:uppercase;")'
   
   End If
End Sub

HtmlBox.SpecialCharacterList property

The HtmlBox.SpecialCharacterList provides default values to the "special character picker" button. Simply manage the collection exposed by this property to change the special characters available on the editor.

[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. State will be maintained for additional postbacks.
   if(!Page.IsPostBack)
   {
      // First make sure you have added a SpecialCharacter item (this is included in the default configuration,
      // so typically you will not need this line of code.
      HtmlBox1.AddToolbarItem(ToolbarItemType.SpecialCharacter);
      
      // Now clear out the default special characters and add new ones.
      HtmlBox1.SpecialCharacterList.Clear();
      HtmlBox1.SpecialCharacterList.Add("&lt;"); // <
      HtmlBox1.SpecialCharacterList.Add("&gt;"); // >
      HtmlBox1.SpecialCharacterList.Add("&©"); // ©
   }
}

[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 make sure you have added a SpecialCharacter item (this is included in the default configuration,
      ' so typically you will not need this line of code.
      HtmlBox1.AddToolbarItem(ToolbarItemType.SpecialCharacter)
      
      ' Now clear out the default special characters and add new ones.
      HtmlBox1.SpecialCharacterList.Clear()
      HtmlBox1.SpecialCharacterList.Add("&lt;") ' <
      HtmlBox1.SpecialCharacterList.Add("&gt;") ' >
      HtmlBox1.SpecialCharacterList.Add("&©") ' ©
   
   End If
End Sub

HtmlBox.ColorPaletteType property

The ColorPaletteType property enables you to choose a color palette type which is used throughout the editor. The choices are:

• Standard - The standard 140 color palette (default).
• WebSafe - Expanded 216 web-safe palette.
• Condensed - Abbreviated 40 color palette. Good for low bandwidth scenarios.

[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. State will be maintained for additional postbacks.
   if(!Page.IsPostBack)
   {
      // Change the color palette to Condensed
      HtmlBox1.ColorPaletteType = ColorPaletteType.Condensed;
   }
}

[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
         
      ' Change the color palette to Condensed
      HtmlBox1.ColorPaletteType = ColorPaletteType.Condensed
   
   End If
End Sub

HtmlBox.RightClickBehavior property

The RightClicBehavior property enables you to choose a what happens when a user right-clicks on the editor. The choices are:

• Nothing - No menu is displayed at all.
• HtmlBoxMenu - A menu tightly integrated with the HtmlBox is displayed (default).
• WindowsMenu - Default windows menu is displayed.

[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. State will be maintained for additional postbacks.
   if(!Page.IsPostBack)
   {
      // Change the right click behavior to nothing
      HtmlBox1.RightClickBehavior = RightClickBehavior.Nothing;
   }
}

[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
         
      ' Change the right click behavior to nothing
      HtmlBox1.RightClickBehavior = RightClickBehavior.Nothing
   
   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.