Creating a Custom 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 call a JavaScript function. This function can be either (1) one of the PowerWEB TextBox for ASP.NET client-side API calls, (2) your own JavaScript function which you've already defined on the page or in an external js file, or (3) a code block that you set programatically. For this topic, the first and last options are addressed.

• Creating a custom button which calls a client-side API.
• Creating a custom button which calls a code block.

Creating a custom button which calls a client-side API

The client-side API exposes many of the functions that PowerWEB TextBox for ASP.NET uses internally. You can create a custom button to call one of these functions. For this example "pwInsertText" is demonstrated, which inserts text into 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)
   {
      // Create a custom button
      ToolbarButton b = new ToolbarButton(ToolbarButtonType.Custom);
      
      // Set the function name to call when clicked.
      b.OnClickFunctionName = "pwInsertText('text inserted from button!', false, true)";
      
      // 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 button
      Dim b As New ToolbarButton(ToolbarButtonType.Custom)
      
      ' Set the function name to call when clicked.
      b.OnClickFunctionName = "pwInsertText(""text inserted from button!"", false, true)"
      
      ' Add the button to the toolbar
      HtmlBox1.Toolbar.Items.Add(b)
   End If
End Sub

Creating a custom button which calls a code block

It is also useful to call your own custom function instead of using the client-side API. This can be easily done by setting ToolbarButton.OnClickFunctionName to the name of the function you wish to call, and ToolbarButton.OnClickFunctionCode to the actual function code, as demonstrated below.

[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 button
      ToolbarButton b = new ToolbarButton(ToolbarButtonType.Custom);
      
      // Set the function name to call when clicked.
      b.OnClickFunctionName = "myFunc()";
      
      // Set the function code block itself
      string func = "";
      func += "function myFunc()\r\n";
      func += "{\r\n";
      func += "alert('hey, you called myFunc');\r\n";
      func += "}\r\n";
      b.OnClickFunctionCode = func;
      
      // 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 button
      Dim b As New ToolbarButton(ToolbarButtonType.Custom)
      
      ' Set the function name to call when clicked.
      b.OnClickFunctionName = "myFunc()"
      
      ' Set the function code block itself
      Dim func as String = ""
      func = func & "function myFunc()" + vbCrLf
      func = func & "{" + vbCrLf
      func = func & "alert(""hey, you called myFunc"");" + vbCrLf
      func = func & "}" + vbCrLf
      b.OnClickFunctionCode = func;
      
      ' Add the button to the toolbar
      HtmlBox1.Toolbar.Items.Add(b)
   
   End If
End Sub

In This Section