To get a better picture, let’s assume we have three WebCallout instances in a page where each callout is bound to each image element to be shown. The scenario that we’d like to achieve here is to show a callout on an image and automatically hide the other callouts that may still be displayed in the previous show.

Certainly the above scenario can be achieved using traditional way by handling the OnShow client-side event where custom codes are required to hide the other callouts. The new “group name” feature is a much more elegant approach to achieve this scenario, where you can simply specify the group name of all callout instance to an identical value.

For a quick instance, I have three callout instances where each callout is bound to a car image. Each callout will be shown when its associated image is hovered. Ultimately, you’ll see all the three callouts displayed at the same time when you hover on each car image quickly – which isn’t the behavior that users desire. To prevent this to happen, now I simply set all the GroupName property of all callout instances to “automobile”. Please see the following screenshot.

Here’s an example of the WebCallout markup declaration used in the above sample:

<ISWebDesktop:WebCallOut ID=”WebCallOut1″ runat=”server” Height=”69px” Width=”300px” TargetControlId=”chrysler” Title=”Chrysler 300 Touring” GroupName=”automobile” ContentMode=”UseTemplate”>

<ContentTemplate>

……. create the WebCallout template here…….

</ContentTemplate>

</ISWebDesktop:WebCallOut>

That’s all for now, hopefully this new time-saving feature is useful for your web development. Please visit our forum for feedback and questions.

Best regards,

Budianto Muliawan

New Client Side Events

1. OnCalendarCellClicked
   This client side event will be invoked when a calendar date is clicked.

New Client Side API

1. SetCallOutWidth(width)
   This method is used to set the width of WebScheduler’s callout. Please note that the “width” parameter should be integer.
2. SetCallOutHeight(height)
   This method is used to set the height of Webscheduler’s callout. Please note that the “height” parameter should be integer.

New Properties

1. UseAgendaDetailsCollection
   This property indicates whether WebScheduler should use the AgendaDetailsCollection property instead of the default/built-in details. For an instance, we can hide the default details completely by simply setting the UseAgendaDetailsCollection property to true and leave the AgendaDetailsCollection empty. This property exist in ViewSettings >> AgendaView. To learn more, please head to Customize Agenda View in WebScheduler.
2. DisplayViewOnMyCalendarLink
   This property indicates whether “View on my calendar” button should appear or not in Agenda view. This property exist in ViewSettings >> AgendaView. To learn more, please refer to Customize Agenda View in WebScheduler.
3. DateHeaderMode
   This property determines which date header mode that should be used in Timeline view. When displayed, this property introduces 5 options. Since WebScheduler build 220, there are 2 new options (DayNameAndDateNumber and ShortestDayNameAndDateNumber) added to DateHeaderMode. This property can be found  in ViewSettings >> TimelineView. To learn more, please refer to Customize date header in WebScheduler Timeline View.

That’s all for now — hopefully you find these new features and enhancements useful for your scheduling web application development. As usual, please feel free to post your questions, thoughts or feedback about WebScheduler in our forum.

Best Regards,
Budianto Muliawan

New Properties

• ToolBarSettings >> SerializationMode, determines the serialization mode used for toolbars definition. When set to Client, the page output will be much reduced. Read the complete explanation here. 
• ToolBarSettings >> SynchronizeCommandLatency, determines the latency used to synchronize the toolbar commands with the format of selected content. When users navigate through contents that has different format, the toolbar commands will be synchronized to the selected content. This property determines the latency used before the synchronization action is invoked.
• PreventScriptInjection, determines whether WebTextEditor should detect whether the content contains script injection. If this property is enabled, all script tags and its content will be removed when the content is saved.
• ShowCallOutOnMediaInsert, determines whether callout should be automatically displayed when a media is inserted as editor content.
• ShowMediaActionOnMediaSelect, determines whether media action should be displayed when a media is selected.

New client-side events

• OnKeyDown, will be invoked when there is a key down input in editor.
  

  function WebTextEditor1_OnKeyDown(controlId, keyCode)
  {
       var rte = ISGetObject(controlId);
       //implement your codes here
  }

• OnMediaSelected, will be invoked when a media is selected. Users can input media to editor content from Media Gallery. When the media is selected, this event will be invoked when specified.
  

  function WebTextEditor1_OnMediaSelected(contolId, element)
  {
       var rte = ISGetObject(controlId);
       //implement your codes here
  }

• OnBeforeResize and OnAfterResize, will be invoked before and after editor is resized using the footer resize element.
  

  function WebTextEditor1_OnBeforeResize(controlId)
  {
       var rte = ISGetObject(controlId);
       //implement your codes here
  } 
  
  function WebTextEditor1_OnAfterResize(controlId)
  {
       var rte = ISGetObject(controlId);
       //implement your codes here
  }

• Integrated file-uploader client side events, which are OnBeforeUpload, OnUploaderValidate, OnUploading, OnAfterUpload, OnCancelUpload, OnUploaderInitialize, OnUploaderError, OnUploaderFileAdded, and OnUploaderFileRemoved. When WebFileUploader is integrated to WebTextEditor and users perform specific action related to it, the above events will be invoked when specified.

New client-side APIs

• SetValueToCurrentPosition, used to set value on the last active cursor position. When users navigate through the content and lost focus from editor, a specific value can be added to editor. When this API is used, the value will be added to the last active cursor position before users lost focus from editor.
  

  var rte = ISGetObject(“WebTextEditor1”);
  rte.SetValueToCurrentPosition(“new value”);

• SetFocus, used to set focus to WebTextEditor. When watermark is enabled, this function will remove the watermark and set focus to editor content.
  

  var rte = ISGetObject(“WebTextEditor1”);
  rte.SetFocus();

• ToggleToolBar, used to toggle or un-toggle a specific toolbar.
  

  var rte = ISGetObject(“WebTextEditor1”);
  var toolbar = rte.ClientToolBar[1];
  rte.ToggleToolBar(toolbar, false);

• ResetEditorState, used to reset the editor state to default state. This API will set the content to empty, close the task pane, reset the state of commands in all toolbars, reset the undo and redo collections, and reset the integrated uploader status.
  

  var rte = ISGetObject(“WebTextEditor1”);
  rte.ResetEditorState();

• HideCallOut, used to hide the callout. You can specify whether the hide action will be performed using animation.
  

  var rte = ISGetObject(“WebTextEditor1”);
  rte.HideCallOut(false); //hide callout without animation

• RegisterIFrameBehavior and UnregisterIFrameBehavior, used to register and unregister the behavior attached to IFrame element of WebTextEditor. When WebTextEditor element is removed and placed in various elements in the page, the behavior attached to the IFrame element will be lost. These new APIs can be used to re-register or unregister the behavior when needed.

If you have installed WebUI Studio 2009 R1 SP1, you can read the complete version history of the enhancements and fixes in Intersoft WebUI Studio 2009 R1 SP1 Release Notes.pdf.

DetailsView control is used to demonstrate this capability. After it is bound properly to Employees table, users can navigate through employee data using the navigation links provided. Data can be bound to WebTextEditor when it is used as item or edit template. Simply set the Content property to the related data.

<asp:TemplateField HeaderText="Notes" SortExpression="Notes">
   <ItemTemplate>
      <ISWebTextEditor:WebTextEditor ID="WebTextEditor1" runat="server" Height="200px"
      	   Width="500px" Content='<%# Bind("Notes") %>'>
         <ViewSettings EnableHTMLView="false" EnableSplitView="false" />
         <ToolBarSettings ToolBarMode="None" />
         <RootTextEditor ReadOnly="true">
         </RootTextEditor>
      </ISWebTextEditor:WebTextEditor>
   </ItemTemplate>
   <EditItemTemplate>
      <ISWebTextEditor:WebTextEditor ID="WebTextEditor1" runat="server" Height="200px"
	    Width="500px" Content='<%# Bind("Notes") %>'>
         <ViewSettings EnableHTMLView="false" EnableSplitView="false" />
	 <ToolBarSettings ToolBarMode="Minimal" />
         <TaskPaneSettings>
 	    <MediaGallery Enabled="false" />
 	 </TaskPaneSettings>
      </ISWebTextEditor:WebTextEditor>
   </EditItemTemplate>
</asp:TemplateField>

As item template, the related Notes data will be displayed in WebTextEditor. As item template, users are unable to edit the content. Read-only status can be set in WebTextEditor when it is used as item template.

When users click Edit, the related Notes data will be displayed in WebTextEditor. Users can easily modify the content and save the update.

Several benefits of client-side instance creation include zero server-side footprint which means less page output and faster page load performance. It’s also very useful in dynamic, on-demand runtime scenarios where the callout needs to be displayed based on certain results. For instance, create a callout with flexible error message to notify the error in user’s input.

In this post, I’ll guide you how to create callout instance programmatically from the client-side. First, make sure the required callout script is registered in your page. If there is no WebDesktop’s control existed in your ASPX page, you should register callout script by calling EnsureWebCallOutScripts method in the Page_Load server-side event which is shown below.

protected void Page_Load(object sender, EventArgs e)
{
      WebCallOut.EnsureWebCallOutScripts(this);
}

Note that the above code is not required if you already have one or more WebDesktop controls in your page, such as ToolBar, Menu, DialogBox or others.

The next step to create callout from the client-side is by invoking CreatAtClient client-side method. See the step-by-step guide below.

1. Drop a ASP.NET TextBox to your page. This textbox will become the callout’s target control which means the callout will appear when your mouse is hover on the textbox.
2. Drop a HTML Button. Attach the onclick client side event and set it to Button1_onclick function such as shown below.
   

   <input id="Button1" onclick="return Button1_onclick()" type="button" 
   value="Create WebCallOut client side" />

3. Create Button1_onclick function to create the callout.
   

   <script language="javascript">
   function Button1_onclick()
   {
       var callout = new WebCallOut("WebCallOut1");
       callout.TargetControlIdResolved = "TextBox1";
       callout.Text = "Hello World";
       callout.CreateAtClient();
   }
   </script>

That’s it. Now run your page and you will see something similar to the screenshot below.

In the first page load, notice that there will be no effect on the textbox since the callout is not yet created. Now, click on the button and then hover on the textbox to see the callout in action. See the screenshot below.

That’s all — you should be now able to create callout instances programmatically whenever you need it in the client — without requiring server postback. Hopefully this little feature is handy and useful in your web development.

If you have questions or feedback on this feature or other callout-related stuff, please feel free to post your questions in our forum.

Best Regards,
Budianto Muliawam

To use WebSpellChecker in standard ASP.NET controls, simply pay attention on these two properties, TargetControlId and TargetControlIdValue. The properties are explained in the following.

• TargetControlId
  This property is required to determine the target control for spell check.For instance, TargetControlId should be filled with “TextBox1” value if you would like to spell check on TextBox1 control.
• TargetControlIdValue
  This property determines the client-side property of the element from which WebSpellChecker should obtain the value for spell check. It’s important to note that the value or content property should be accessible from client-side.For instance, if WebSpellChecker is targetting TextBox server side control, then the TargetControlIdValue property should be set to “value” instead of “Text”.

When WebSpellChecker is not integrated to WebTextEditor or editable IFrame, it will use the built-in DialogBox interface instead of “red wave underline highlight” mode. For further information about WebSpellChecker interface mode, you can find read the detail explanation in here.

To integrate WebSpellChecker to a ASP.NET TextBox, please follow the step-by-step guide below.

1. Drag and drop ASP.NET TextBox control and TextBox control with ID’s TextBox1 will appear.
2. Drag and drop HTML Button control and Button control with the ID’s Button1 will appear. This button is used to start the spell checking from TextBox’s value.
3. Drag and drop Intersoft WebSpellChecker control and WebSpellChecker control with ID’s WebSpellChecker1 will appear.
4. Set WebSpellChecker’s TargetControlId to TextBox1 and TargetControlIdValue to value.
5. Attach onclick client side event to Button1 and set it to CheckSpell function.
   <input id=”Button1″ type=”button” value=”button” onclick=”CheckSpell()” /><script language=”javascript” type=”text/javascript”>
   function CheckSpell()
   {
   var sp = ISGetObject(“WebSpellChecker1″);
   sp.CheckSpell();
   }
   </script>
6. Integration is finished.

The above sample can be found here. Other samples about WebSpellChecker and the explanation can be found in Intersoft’s live sample.

If you have any questions or feedback, please don’t hesitate to post your questions in Intersoft Forums.

Best Regards,
Budianto Muliawan

In this research, I’m running on Windows 7 Professional, IIS 7.5, Visual Studio 2008 SP1, and HttpWatch Professional installed with WebGrid Enterprise’s samples.

The Challenges

Using the Enterprise sample with all features enabled, the total size of client resources — including javascript and styles —  is around 1.2 mb with all compression disabled. This would be a potential issue for users in remote area with slower internet connection.

Without compression, the client resources size is around 1.2 mb.

The Solutions

SmartWebResources’ Compression Technology

SmartWebResources™ technology not only introduces unique architecture for hassle-free deployment, it also comes with built-in compression feature with a reasonable result. Simply put the key below in your web.config to enable the compression:

<add key="ISNet.WebUI.ISRes_Compressed" value="true" />

The result will look like the screenshot below.

The SmartWebResources’ squeezes client resources to 680 kb, saves roughly 60%.

IIS 7 Dynamic Compression

The latest IIS now offers easy customizability in more user friendly format. Unlike its previous version, compression can be enabled without having to edit a certain .config file. You can enable/disable the compression directly in the IIS Manager.

If you wish to learn more about IIS 7’s compression, please click here.

The default compression level is 7. The compression level in IIS is, fortunately, customizable although you won’t find this setting anywhere else in the documentation.

To change the compression level in IIS 7, run the following syntax from command line:

[WinDir]System32inetsrvappcmd set config /section:httpCompression
/[name='gzip'].staticCompressionLevel:[CompressionLevel]

The acceptable value for compression level is 1 – 10. Setting the compression level to 10 will instruct the IIS to use the best compression quality which produces the smallest output. While it’s great to be able to compact the client resources and deliver very small output to client, it requires a more powerful server for heavier processing and overhead.

In my opinion, the default level is the best option for web applications that run on moderate servers. It doesn’t compress as much as level 9 or 10, but offer less overhead on the server.

IIS 7 Compression (level 7)

Conclusion

If you have the direct access to the deployment server which used IIS 7, IIS compression is definitely the best solution to keep your applications speedy with low client resources footprint. However, if you’re hosting your web applications in a shared server, or if you don’t use IIS 7 yet, then SmartWebResources compression is your best choice. It may not compress as much as IIS, but it still offers reasonable compression result with much lower server overhead.

You can enable this feature instantly by setting the EnableMailMerge property available in MailMergeSettings. The collection of recipients can be specified as data bound collection or custom collection. When data bound collection is used, the datasource control id can be specified as DataSourceID property.

<ISWebTextEditor:WebTextEditor ID="WebTextEditor1" runat="server" Height="80%" 
Width="100%" DataMember="DefaultView" DataSourceID="AccessDataSource1">

When custom collection is used, the collection can be added to Recipients collection.

private void BindCustomCollection() 
{ 
   List<ISEmployee> employees = new List<ISEmployee>(); 
   
   ISEmployee emp = new ISEmployee(); 
   emp.EmployeeID = 1; 
   emp.FirstName = "Nancy"; 
   emp.LastName = "Davolio"; 
   emp.Address = "Bridge Street"; 
   emp.City = "London"; 
   emp.Country = "UK"; 
   employees.Add(emp); 

   emp = new ISEmployee(); 
   emp.EmployeeID = 2; 
   emp.FirstName = "Andrew"; 
   emp.LastName = "Fuller"; 
   emp.Address = "Wood Street"; 
   emp.City = "Washington"; 
   emp.Country = "USA"; 
   employees.Add(emp); 

   WebTextEditor1.MailMergeSettings.Recipients = employees; 
}

When the collection of recipients are ready, you need to specify the labels. Labels are used to indicate parts of the content that will be replaced with the related data in the data context. You can specify as many labels as needed in the template. Each label contain the following properties:

• Label (mandatory): specifies the text used as label.
• DataMember (mandatory): specifies the field or property in data context that will be used to replace the label text.
• FormatString (optional): specifies the format string of the label. This property can be specified if you want to have a specific format on dates or numbers.

The collection of labels can be added in MailMergeSettings >> Labels property.

The labels will be added to Insert Merge Label dropdown in main toolbar. Users can easily select an item from this command in main toolbar and it will be added to editor. Users will not be able to modify the labels manually in the editor window.

Users can preview the mail merge result in Preview tab. The labels will be automatically replaced with the related data in the data context and users can navigate through the data using the previous and next commands in toolbar.

Users can also send the mail using Send Mail Merge command. Some related properties that need to be configured are:

• EmailField: specifies the field or property in data context that contains email data.
• From: specifies the email of sender.
• IsHTML: specifies whether or not the email should be sent as HTML format.
• MailPriority: specifies the priority status of the email.
• SMTP: specifies the SMTP server.
• SubjectExpression: specifies the subject of the email. Labels can be included as the value of this property and they will automatically be replaced with related data when the email is sent.

WebTextEditor provides various server-side events that will be invoked when the emails are about to be sent. If you have specific scenarios that need custom actions, these events can be used to implement those actions.

• OnBeforeSendMail event is invoked the emails are sent.
• OnMailMerge event is invoked when each email is merged with the related data from data context.
• OnMailMergeCompleted event is invoked when all emails have been merged with the related data from the data context.
• OnSendMail event is invoked when each email is about to be sent.
• OnSendMailCompleted event is invoked after all emails are sent.

If you set AutomaticSendMail property to False, you can specify your own configuration and send mail process in OnSendMail event.

protected void WebTextEditor1_SendMail(object sender, ISNet.WebUI.WebTextEditor.WebTextEditorSendMailArgs e) 
{ 
   //specify your own configuration 
   e.Cancel = true; // needed to cancel built-in send mail process 
}

After all emails are sent, you might need to display specific custom status in WebTextEditor or perform other custom actions in client-side. In this case, you can use OnSendMailCompleted client-side event. In this event, the failed emails data will also be passed as parameters. So, in cases where emails are failed to be sent to recipients, you can perform custom actions to handle the scenario.

<script type="text/javascript"> 
   function OnSendMailCompleted(controlId, failed, failedEmails) 
   { 
      var editor = ISGetObject(controlId); 

      if (failed > 0) 
      { 
	 // you can implement custom action to handle this scenario 
      } 
      else 
 	 editor.SetStatus("All emails are successfully sent at " + new Date() + "."); 
} 
</script>

If you have feedback regarding this feature, feel free to drop a comment or create a new discussion in our new Forum.

In the screenshot below, you can notice 3 navigation buttons (Delete Event, Edit Event, and View on my calendar) as well as 2 details (Location and Description). These settings are the default view configuration in WebScheduler, and not customizable before the enhancements.

In WebScheduler SP1, we have added 2 new properties in AgendaViewSettings which allows you to customize agenda view’s navigation and detail information.

These new properties are:

1. DisplayViewOnMyCalendarLink
   This property determines whether “View on my calendar” button should appear in the view or not. By default this property is set to True.To hide the “View on my calendar”, simply set the property to False. The result should look like the below screenshot.
   

   “Delete Event” and “Edit Event” button can be customized through DataEditing property. For instance, set AllowEdit property to False will hide the “Edit Event” button.

2. UseAgendaDetailsCollection
   You can customize the information details that will be displayed in agenda view through the new AgendaDetailsCollection property. For the collection to take affect,  you would need to set UseAgendaDetailsCollection property to true, which instructs WebScheduler to use the details collection instead of the default/built-in details.For an instance, we can hide the default details completely by simply setting the UseAgendaDetailsCollection property to true and leave the AgendaDetailsCollection empty. The result looks like the following.

   

   The next question would be how to specify custom detail information to be included in agenda view. It is easy as WebScheduler already provide the object model, which can be achieved from both server and client-side.

   The following Javascript code shows how you can add custom detail information in the client-side during Initialization event. Note that the OnInitialize client-side event is only available in SP1 release.

   function OnInitialize(controlId)
{
var WebScheduler1 = ISGetObject(controlId);
var agendaDetailsCollection = WebScheduler1.AgendaDetailsCollection;

   var obj = new WebSchedulerAgendaContentDetail();
obj.Caption = "Place";
obj.DataMember = "Location";
agendaDetailsCollection.Add(obj);

   var obj2 = new WebSchedulerAgendaContentDetail();
obj2.Caption = "Information";
obj2.DataMember = "Description";
agendaDetailsCollection.Add(obj2);

   var obj3 = new WebSchedulerAgendaContentDetail();
obj3.Caption = "Important";
obj3.DataMember = "Mode";
agendaDetailsCollection.Add(obj3);
}

   In the code snippet above,  I filled AgendaDetailsCollection with 3 details (Location, Description, and Mode) which I would like to show in agenda view. Here is the result.

   

AgendaViewSettings can be found in WebScheduler >> ViewSettings

That’s all about agenda view customization enhancement. I hope you enjoyed our new enhancements and get your works done faster!

If you have questions or feedback on  these enhancements, please don’t hesitate to comment on my post.

Warm Regards,
Budianto Muliawan

If you view source in the page, you will find the following toolbar definition in the xml output.

<ToolBar>
   <WebTextEditorToolBar Text="Formatting" Category="Formatting">
      <ToolCommands>
	 <WebTextEditorToolCommand Text="Bold" DisplayMode="Image" 
	    Image="/WebTextEditor/ISRes.axd?E/tb_bold.gif" ToggleGroupName="Bold" />
	 <WebTextEditorToolCommand Text="Italic" CommandType="Italic" 
	    DisplayMode="Image" Image="/WebTextEditor/ISRes.axd?E/tb_italic.gif" 
	    ToggleGroupName="Italic" />
	 <WebTextEditorToolCommand Text="Underline" CommandType="Underline" 
  	    DisplayMode="Image" Image="/WebTextEditor/ISRes.axd?E/tb_underline.gif" 
	    ToggleGroupName="Underline" />
	 ...
	 ...
      </ToolCommands>
   </WebTextEditorToolBar>
</ToolBar>

The page output will automatically increase if you have more toolbars and more tool commands. We have made many enhancements in the latest WebTextEditor included in Intersoft WebUI Studio 2009 R1 SP1 installer. One of the enhancements is to significantly reduce the page output size due to the huge toolbar definition.

In ToolBarSettings category, we introduced a new property, SerializationMode. To prevent breaking changes with the previous implementation, the default value is set to Server. In this case, toolbars and its tool commands will be specified in server-side and serialized to client-side for UI rendering.

The other value of SerializationMode property which is added in SP1 is Client. When Client is selected, the toolbars and its commands will be created in client-side, thus reducing the large toolbar definition that previously affects the page output. You can view the page source and see that the toolbar definition is no longer included in the xml output. On the other hands, all toolbar functionalities and behaviors remain the same, thus maintaining the stability achieved in both modes.

In addition to this enhancement, OnInitializeToolBar client-side event is added to WebTextEditor. In this event, you can customize the tool command sequence, add new tool command, and remove existing tool command. The object parameter passed to this event includes all ToolBar collections in WebTextEditor, such as ToolBar, HTMLToolBar, PreviewToolBar, and FloatingToolBar. Note that these are toolbars collection, not the toolbar instance itself.

<script type="text/javascript"> 
   function WebTextEditor1_OnInitializeToolBar(controlId, args) 
   { 
      var rte = ISGetObject(controlId); 
      //args parameter includes all toolbar collections 
   } 
</script>

The object parameter also has some built-in functions which can be easily used to customize the toolbars collection. Each collection can have more than one toolbar and you can add custom toolbars to the existing collection. Simply use AddToolBar function to add the new toolbar to the toolbar collection.

In the following code, two new toolbar are added to ToolBar collection. One toolbar contains Hyperlink and RemoveLink commands, the other toolbar contains Undo and Redo commands.

<script type="text/javascript"> 
   function WebTextEditor1_OnInitializeToolBar(controlId, args) 
   { 
      var rte = ISGetObject(controlId);

      // add new toolbars 
      var toolbars = [ 
      { 
	 "Name": rte.ID + "_tbLink", "Text": "Link", 
	 "Category": "Custom", "Commands": new Array("Hyperlink", "RemoveLink")  
      },
      { 
	 "Name": rte.ID + "_tbOther", "Text": "Other", 
	 "Category": "Custom", "Commands": new Array("Undo", "Redo")
      }]; 

      args.AddToolBar(args.ToolBar, toolbars); 
   } 
</script>

Since each collection can have more than one toolbar, you can use GetToolBar function to get a specific toolbar object using its category and name. In the following code, category is used to get Custom category toolbar. If there are multiple toolbars in Custom category (such as mentioned above), the first toolbar will be returned. In this scenario, tb variable will contains tbLink toolbar instance.

var tb = args.GetToolBar("Custom");

If you want to get tbOther toolbar instance, you can use category and name to get a specific toolbar as described in the following code. The tb2 variable will now contains tbOther toolbar instance.

var tb2 = args.GetToolBar("Custom", rte.Id + "_tbOther");

A new command can be added using AddCommand function. You need to specify the toolbar where the new command will be added, the new command, and the position index. If the position index is not specified, the command will be added to the last position in the toolbar. The following code will add a new command, Emoticon, to tbOther toolbar.

var command1 = { "Name": "cmdEmoticon", "Text": "Emoticon", 
	"DisplayMode": "Image", "Image": "./Images/smiley1.gif", 
	"Type": "ToggleButton", "ToggleGroupName": "TaskPane", 
	"Items" : new ISArray() };

args.AddCommand(tb2, command1);

RemoveCommand function can be used to remove a command. Simply specify the toolbar and the command that will be removed. The following command will remove RemoveLink command from tbLink toolbar.

var command2 = tb.ToolCommands.GetNamedItem("cmdRemoveLink"); 
args.RemoveCommand(tb, command2);

Another useful function is MoveCommand function, which can be used to move a command to another position within one toolbar. You need to specify the toolbar, the command name, and the destination index. The following code will move Emoticon command from the last position to the first position in tbOther toolbar.

args.MoveCommand(tb2, "cmdEmoticon", 0);

There is other point to note when this enhancement is enabled. In ToolBarSettings, you can specify the ToolBarMode as Custom and specify your own toolbar definition in XML file. In this case, you are required to use Server serialization mode. Another alternative is to specify the toolbars and commands manually in OnInitializeToolBar client-side event.

Click here to download the sample.

We have other enhancements in WebTextEditor that includes new client-side event, new client-side API, new properties and other points as described in Intersoft WebUI Studio 2009 R1 SP1 Release Notes. Stay tune as we will write more about them in the coming blogs.