Creating a Custom Dialog Button

While PowerWEB TextBox for ASP.NET includes a default set of pre-configured Toolbar items (enumerated by the ToolbarItemType enumeration) it also allows easy creation of custom buttons which can be used to open a dialog (simply by setting the ToolbarDialogButton.Dialog.Text property).

NOTE! In order for the "built in" font style functionality to properly work (for example, setting HtmlBoxDialog.Font.Name) your HTML content must use the "pwdialogstyle" stylesheet class (which is the stylesheet class automatically applied to dialogs used by the HtmlBox). If you are defining your own styles for the dialog content, you do not need to do this.

The following code demonstrates a simple dialog button which opens an "About" box.

[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)
   {
      // Create a custom dialog button
      ToolbarDialogButton b = new ToolbarDialogButton(ToolbarDialogButtonType.Custom);
      
      // Set the text of the dialog to whatever content you would like to display.
      string text = "";

      // Note, the "pwdialogstyle" css class is used, so if dialog font properties are set they will work properly
      text += "<p class='pwdialogstyle'>"; 
      text += "<h1>About Us</h1>";
      text += "<p>Hello, we are here to provide you with the<br>";
      text += "highest quality Internet applications. If you need<br>";
      text += "more information, contact us using the information below</p>";
      text += "FakeTech Inc<br>";
      text += "111 Phoney Road<br>";
      text += "Madeupville NY, 13441<br>";
      text += "555-555-1212<br>";
      text += "info@faketech.com<br><br>";
      text += "</p>";
      b.Dialog.Text = text;
      
      // Add the button to the toolbar
      HtmlBox1.Toolbar.Items.Add(b);
   }
}

[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
      ' Create a custom dialog button
      Dim b As New ToolbarDialogButton(ToolbarDialogButtonType.Custom)
      
      ' Set the text of the dialog to whatever content you would like to display.
      Dim text As String = ""

      ' Note, the "pwdialogstyle" css class is used, so if dialog font properties are set they will work properly
      text = text & "<p class='pwdialogstyle'>"
      text = text & "<h1>About Us</h1>"
      text = text & "<p>Hello, we are here to provide you with the<br>"
      text = text & "highest quality Internet applications. If you need<br>"
      text = text & "more information, contact us using the information below</p>"
      text = text & "FakeTech Inc<br>"
      text = text & "111 Phoney Road<br>"
      text = text & "Madeupville NY, 13441<br>"
      text = text & "555-555-1212<br>"
      text = text & "info@faketech.com<br><br>"
      text = text & "</p>"
      b.Dialog.Text = text
      
      ' Add the button to the toolbar
      HtmlBox1.Toolbar.Items.Add(b)
   End If
End Sub

You can also call a function from the dialog.

[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)
   {
      // Create a custom dialog button
      Dim b As New ToolbarDialogButton(ToolbarDialogButtonType.Custom)
      
      ' Set the text of the dialog to whatever content you would like to display.
      Dim text As String = ""
      text = text & "<p>Click the button below to insert text from a dialog.</p>"
      text = text & "<input type='button' value='click' onclick='pwInsertText(""Blah"", false, true)' ID="Button1" NAME="Button1">"
      b.Dialog.Text = text
      
      ' Add the button to the toolbar
      HtmlBox1.Toolbar.Items.Add(b)
   }
}

[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
         
      ' Create a custom dialog button
      ToolbarDialogButton b = new ToolbarDialogButton(ToolbarDialogButtonType.Custom);
      
      // Set the text of the dialog to whatever content you would like to display.
      string text = "";
text += "<p>Click the button below to insert text from a dialog.</p>";
      text += "<input type='button' value='click' onclick='pwInsertText(\"Blah\", false, true)' ID="Button1" NAME="Button1">";
      b.Dialog.Text = text;
      
      // Add the button to the toolbar
      HtmlBox1.Toolbar.Items.Add(b);
   
   End If
End Sub

In This Section

Using HtmlBox Skins: Describes how skins can be applied to enhance the HtmlBox and how to create your own skins.
Creating a Custom Button: Describes how to create a custom button to call a JavaScript function.
Creating a Custom Dialog Button: Describes how to create a custom button which launches a dialog when clicked.
Creating a Custom Menu Button: Describes how to create a custom button which opens a menu when clicked.
Creating a Custom DropDown: Describes how to create a custom dropdown box.
Creating a Custom Toolbar Image: Describes how to create a custom toolbar image.
Creating Custom Toolbar Text: Describes how to create custom toolbar text.
Customizing File Uploads: Describes the built in upload support and how it can be customized.
Integrating Spell Checking: Provides steps of how to use a spell checker with the editor.
Integrating with Mail Applications: Provides information on how to integrate the HtmlBox with PowerTCP Mail for .NET to create mail applications which are capable of mailing HTML email messages.

Send comments on this topic.

Documentation version 3.2.0.0.