Our months of hard work finally paid off. It’s finally here. With excellent craftsmanship and fine attention to detail, we’re very proud to announce the all-new and powerful WebUI 2016. The entire WebUI lineup consisting of highly-advanced 40+ web components now finally receives a truly deserved facelift.

Accessing the New WebUI Live Experience

For so long, customers have enjoyed our live WebUI demos through http://live.intersoftsolutions.com. While this experience is adequate, being redirected to another site for a hands-on experience just won’t cut it anymore. So we decided to integrate the new samples right our website. That’s right, now you can experience the new WebUI samples with the gorgeous unified modern theme, right from our website.

Don’t worry, we’ve put these buttons everywhere, so you can easily access them from various pages in WebUI, although it is very much recommended to access them from /WebUI. Should you miss this experience and open the old live samples, you’ll be greeted with the following dialog box.

Without further ado, let’s get right onto the new WebUI Live Experience.

The Home Screen

Right when you launch the new Live Experience, you’ll be greeted with a nice and modern blurred background, showcasing the flagship products of WebUI. This experience works best on modern desktop browsers supporting HTML5 and CSS3.

If you click on products such as WebDesktop and WebEssentials, you can also find a grid of sub-components in them.

WebGrid

When you launch WebGrid for the first time, you’ll be greeted with the First Experience.

This first experience sample demonstrates many of the top UI features available in WebGrid, combined with some unique features such as column freezing, filter suggestion and more.

Some of the top features demonstrated in this sample are:

• Sleek look and feel with the all-new “Elegant” Default Style. The Default Style feature significantly reduces page output size by eliminating in-line styles. Try to view source and notice there are no styles generated in the page level.
• Improved user interface with a new set of fresh icons, background images and UI elements.
• New context menu engine. Try to right click on the Grid area to experience the new context menu system.
• LiveFreeze™ column freezing feature. The only column freezing implementation that perfectly simulates Excel® freezing behavior.
• Automatic Filter Suggestion. Try to right click on a cell (eg, “Owner”), then choose one of the available filter options. The suggested filter options are based on selected cell’s data type and value.
• Filter Status Indicator. When one or more columns are filtered, notice that the filter indicator status is changed to “Filtered”. This indicator helps end users to understand the current state of filters without has to display filter bar. You can click on the filter status indicator to toggle the filter state.
• SmartWebResources™. This innovative technology enable this sample to run without dependencies to “physical” client resources. All client resources such as scripts and images are retrieved directly from resource assembly.
• Declarative datasource control binding. Notice that there are no codes required for the data binding operation (see C# and VB tab).

Samples Navigation Experience

To navigate between samples, you can easily use the arrows on the left and right-hand side of the screen, or use the menu button on the top-left corner of the screen. This will open the Menu panel and you can easily jump between samples.

If you wish to go back the controls grid, simply click the Home button. Should you encounter any problems or hassles with the samples, feel free to chat with us directly using the live messenger on the bottom-right corner.

WebCombo

This the First Experience when you launch the WebCombo sample.

This sample demonstrates the unified modern theme of WebCombo and many of its key features such as SmartWebResources™ and declarative datasource control binding.

Notice that there are no code required for the data binding operation (see C# and VB tab). Try experimenting with the WebCombo controls in this page to see some unique features in action. For instance, Reports-To is using multiple selection feature combined with image column type.

WebInput

This is the First Experience when you launch the WebInput sample.

This sample demonstrates the unified modern theme of WebInput and its key features.

Some of the new features demonstrated in this sample are:

• Sleek look and feel with the all-new “Elegant” Default Style. The Default Style feature significantly reduces page output size by eliminating in-line styles. Try to view source and notice there are no styles generated in the page level.
• Ordinary input text and multiline input text features, like demonstrated in FirstName, LastName, Address, City, Country fields.
• Display and edit format features, like demonstrated in Birth Date field.
• Other edit format feature, like demonstrated in First Name, Last Name, Phone, Extension fields.

This sample also demonstrate integration between WebInput and .NET Validator Control such as RequiredValidator and CompareValidator.

WebScheduler

This is the First Experience when you launch the WebScheduler sample.

This sample is designed to model a car-rental tracking scenario – demonstrating how WebScheduler performs in real-world enterprise application. Bound to over 3000 events, WebScheduler delivers responsive user experiences regardless of the data size.

The powerful JSON technology and smart client paging rendering significantly improved the overall WebScheduler performance to a new level not possible before. This sample combines both the ViewPort™ and EventPageSize™ Client Paging rendering enabling WebScheduler to load in a flash.

Try to play around with the scheduler. Use the upper right vehicle locator for a quick jump. Click on the visual indicator on the resources area to populate the car information.

WebDesktop

This is the First Experience when you launch the WebDesktop sample.

This reference sample demonstrates the beautiful modern theme and many groundbreaking features in WebDesktopManager such as shortcuts and comprehensive window management. It also showcases the integration of various WebDesktop components to create full-fledge and immersive web applications, which include WebPaneManager, WebToolBar, WebTab, WebDialogBox, WebNotification and more. Try to double click each icon to see the WebDesktop components in action.

WebEssentials

This is the First Experience when you launch the WebEssentials sample.

This reference sample perfectly demonstrates WebEssentials component suite which comprised of 8 innovative controls, ranging from accordion, calendar, slider, to rating. WebEssentials enables you to create interactive and visually engaging modern web applications.

In this Online Resume scenario, WebAccordion is used as the main container, dividing this lengthy form into three sections. WebProgressBar is used to indicate the section completion process. The bar will be filled as users click on next. WebCalendar is used for date input and WebSlider for selecting a specific range. WebSlidingMenu is used on the right FAQ section. Click on a question and the answer is shown in a swift and smooth sliding animation.

Additionally, WebFlyPostBackManager is used to populate the section’s content on demand as users click the next button. In Section 1, WebFileUploader is used for image uploading, demonstrating its seamless AJAX upload experience.

WebTextEditor

This is the First Experience when you launch the WebTextEditor sample.

WebTextEditor is the industry’s first text editor that integrates intuitive writing tools, in-line spelling checker, and sophisticated uploading capability in a single interface – enabling you to rapidly build rich CMS application that delivers breakthrough, unique editing experience to your end users.

This sample demonstrates tight integration with Desktop Manager, Spell Checker, File Uploader and many UI components from WebDesktop to produce sophisticated, state-of-the-art CMS application that ultimately feels like a desktop word processing application.

WebTreeView

This is the First Experience when you launch the WebTreeView sample.

WebTreeView provides rich features that lets you easily create hierarchical data presentation. This powerful control incorporates numerous unique features such as:

• Data Binding
• Tristate checkbox
• Add, edit, and delete node
• Drag and Drop node(s)
• Keyboard Navigation
• Load On Demand
• Layout Manager and Structure Manager
• Auto Postback
• Flexible and highly customizable to meet your design needs
• client-side API – WebTreeView Designer

The above sample utilizes Enable Tristate CheckBox and Keyboard Navigation features.

Explore the Samples

We hope that you liked our new samples. To start taking advantage of our best WebUI release yet, feel free to download the new Premier Studio 2016 here. Happy exploring!

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.

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

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.

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.

WebSpellChecker is designed as a standalone component which you can use independently to target standard ASP.NET controls such as Textbox and IFRAME. In addition, WebSpellChecker can also be easily integrated to WebTextEditor, which seamlessly adds spell checker functionality to the rich text editor. In this post, I’ll explain how easy it is to integrate our spell checker component to rich text editor.  If you haven’t familiar with our spell check features, check out my previous post here.

Integration with WebSpellChecker for spell checking can be done elegantly without having to write codes. To integrate WebTextEditor to WebSpellChecker, simply perform the following steps:

1. Add WebTextEditor and WebSpellChecker instance to your Webform page
2. In WebSpellChecker instance, set the following properties:
   TargetControlId to  The control id of WebTextEditor.
   IntegratedToWebTextEditor to True.

When integrated to WebTextEditor, WebSpellChecker will automatically enable Microsoft Word-style red wave highlight feature. For further information about WebSpellChecker’s mode, please refer to WebSpellChecker documentation or the overview here.

When integrated to WebTextEditor, WebSpellChecker will enable sophisticated navigation experience, and also automatically connect to WebTextEditor’s user interface to provide more advanced spell checking commands.

You can perform spell checking in several ways:

1. Spell checker command in toolbar.
   When WebSpellChecker integration is configured properly, the spell checker command in WebTextEditor’s toolbar will be enabled. Click on this command to start spell checking which activates spell check editing mode. Click on the command again to exit from spell checking mode.

   

2. Auto-navigate spell checker command in status bar. This easy-to-access button provides user with convenient way to perform spell checking. It’s particularly useful when the editor is loading in minimal toolbar configuration where spell checker command may not be available in the toolbar.

   

   When clicked for the first time, WebSpellChecker executes spell checking process and automatically focus on the first misspelled word with suggested word list displayed in intuitive context menu interface. Click on the button again to easily navigate to the next misspelled word.

   

By now you should have learnt how to add spell checker functionality to WebTextEditor. At this point, you might be wondering whether you need to write more codes or spend more efforts to get the fantastic UX shown above. The fact is you don’t need any efforts — it’s all automatic, and yeap, it’s that easy!

If you haven’t used WebTextEditor, but would like to see how it fits in your application, you can download the free 30 day trial here. Enjoy, and thanks for reading!

Warm Regards,
Budianto Muliawan

Intersoft WebSpellChecker is an easy-to-use, yet powerful spell checking component for ASP.NET. In addition to typical spell check features that you expected, WebSpellChecker delivers several innovative features that are not available elsewhere, such as Microsoft Word-style red-wave underline highlight, built-in dialogbox with intuitive design, natural integration with WebTextEditor, wide cross browsers support and more.

In case you’re not aware, WebTextEditor actually includes 3 controls. So you can think it more like a Suite or Collection product. It includes 3 essential components: rich text editor, spell checker and file uploader. That means if you get a copy of WebTextEditor, then you get all three with the price of one. More values for your bucks spent — what could be better in such economic condition?

Speaking on the pricing wise, WebTextEditor is set at a very affordable pricing and is certainly in the range of competitive market price. Unlike other solutions, we deliver a full and real editor functionality without requiring you to buy separate components for spell checking and uploading — an all-in-one suite for all your form editing needs.

Allright, let’s jump into WebSpellChecker in more details.

Intersoft WebSpellChecker is the first spell checker component to provide two modes of spell checking user interface.

1. Red-wave Underline Highlight
   WebSpellChecker introduces more natural, intuitive way to perform spell checking with red wave highlight feature. To correct misspelled words, just right click on each misspell word and choose the correct word from the displayed word(s) in context menu. It makes spell checking faster and easier than ever.

   

   Please note that this red wave highlight feature can only be enabled on editable IFRAME.

2. User-friendly Dialog Box Interface
   This mode will be automatically enabled when the target control is not an editable IFRAME. The dialog box interface includes visual elements that display checked words and the suggestion words list. Just double click on a word in suggestion list or click on the Change button to correct the misspelled word with the selected suggested word, and finally click on Done button to accept all changes and close the dialog box.
   

User interaction on WebSpellChecker can be done through several options available in the context menu interface or in WebDialogBox interface.

Here are the options:

1. Change
   This option is only available in WebDialogBox mode; it is used to change the selected misspelled word with the selected suggested word.
   Alternatively, you can correct the misspelled word by simply double clicking on the suggested word.
   
2. Add to dictionary
   Often times, WebSpellChecker may show specific terms such as scientific or other valid words as misspelled words. This occurred because the specific words don’t exist in dictionary. WebSpellChecker makes it possible for users to add such words into dictionary, so that WebSpellChecker will not mark it as misspelled word again in the future. To add word to a dictionary, simply right click on the specific word and choose “Add to dictionary” option in the context menu.Note that in order to add to dictionary, the dictionary folder’s permission should be granted with write access.
   
3. Ignore
   This command is used in a scenario where user would like WebSpellChecker to ignore a misspelled word so it will be marked as correct word instead of misspelled. If there are other similar words, WebSpellChecker will not mark other instances as correct word. This command is available in both context menu and dialog box interface.
   
4. Ignore All
   Similar with Ignore command, “Ignore all” will mark the misspelled word to correct word. The only difference is “Ignore all” will mark all similar words as correct words, instead of just the selected word.
   

That’s all for now! In my next post, I’ll discuss how you can integrate spell checker into rich text editor easily, and elegantly. To learn more about spell checker features, please head to Spell Checker Features page.

For any questions, feedback, or thoughts, please feel free to comment on my post. Thank you for reading.

Best Regards,
Budianto Muliawan

After configuring HTTPModules and HTTPHandlers needed for WebFileUploader, you can simply integrate WebFileUploader to WebTextEditor by configuring FileUploaderSettings >> Enabled to True.

<FileUploaderSettings Enabled="true" />

There are several properties available in FileUploaderSettings.

When integrated to WebTextEditor, users can use the integrated WebFileUploader in built-in Media Gallery. When enabled, a tool command, Insert from Computer, will be added to Media Gallery toolbar. When it is clicked, a callout that contains integrated WebFileUploader will be displayed. Users will be able to choose a file and upload it to the selected media resource or selected path.

As explained in previous blog, you can specify MediaResource collection where each resource represents a resource where user can perform media search. In each MediaResource object, you can specify AllowUserUpload property to True.

<MediaResources>
   <ISWebTextEditor:WebTextEditorMediaResourceGroup Name="media1" Text="Photos">
      <resources>
         <ISWebTextEditor:WebTextEditorResource Name="Images" Url="Images/" AllowUserUpload="true" />
	 <ISWebTextEditor:WebTextEditorResource Name="Thumbnails" Url="Thumbnails/" AllowUserUpload="true" />
      </resources>
   </ISWebTextEditor:WebTextEditorMediaResourceGroup>
</MediaResources>

When this property is enabled, the media resource will be listed in the upload location combo. If there are more than one media resources that enable AllowUserUpload property, you can specify the default selected location in DefaultUploadMediaResource property. Users can select a location in the combo and upload the media to the selected resource.

Instead of allowing users to upload to media resource collections, you can allow users to upload media to a specific upload path. This can be configured in DefaultUploadPath property. If you have configurations set in media resource collection and DefaultUploadMediaResource property, the upload location in DefaultUploadPath property will be ignored. The configurations in media resources will be used instead.

<FileUploaderSettings Enabled="true" DefaultUploadPath="Images/" />

Note that the upload location combo is not displayed. Users only need to select the file and it will be uploaded to the location specified in DefaultUploadPath property automatically.

Besides the above configurations, you can also specify the maximum number of files that can be uploaded, the types of files that can be uploaded, the size limitation, and whether or not users can cancel the upload progress. WebTextEditor already specifies these configurations by default, but it can be customized easily using the properties in FileUploaderSettings. For details of the property name, see the FileUploaderSettings properties table above.

Although WebFileUploader is used mostly in Media Gallery pane, its usage is not limited to Media Gallery only. When you don’t enable Media Gallery pane, you can still use integrated WebFileUploader. You can enable ShowFileUploaderCommand property to include Attach File command in main toolbar. The command has the same behavior as Insert from Computer command in Media Gallery toolbar.

In this case, since Media Gallery is disabled, you need to specify DefaultUploadPath property.

<TaskPaneSettings>
   <MediaGallery Enabled="false" />
</TaskPaneSettings>

<FileUploaderSettings Enabled="true" DefaultUploadPath="Images/" 
   ShowFileUploaderCommand="true" />

Users can click Attach File command and select the file to upload. The file will be uploaded to the location specified in DefaultUploadPath property. The uploading progress bar and the uploaded file status will still be displayed properly.

If the default upload path used in your application is dynamic, you can specify it programmatically in OnPreInitialize server-side event.

protected void WebTextEditor1_PreInitialize1(object sender, EventArgs e)
{
   // set upload path

   // check whether the specified uploadPath has already exists
   DirectoryInfo dir = new DirectoryInfo(Server.MapPath(uploadPath));
   if (!dir.Exists)
      Directory.CreateDirectory(Server.MapPath(uploadPath));

   // set the upload path as DefaultUploadPath
   WebTextEditor1.FileUploaderSettings.DefaultUploadPath = uploadPath;

   // you can specify other file uploader settings in here
   WebTextEditor1.FileUploaderSettings.FileTypes = "*.zip, *.rar;";
}

The above code will check whether or not the uploadPath has already existed. If not, the folder will be created and then set as DefaultUploadPath. In this event, you can specify the default upload path dynamically based on the requirements of your application. The uploader behavior, including the uploading progress and upload file status, will not changed when this approach is used. Users will still be able to select the file and it will be uploaded to the specified upload path.

Both components can be combined to provide a text editor complete with built-in file uploader. You can configure the available settings provided and use it instantly. Give it a try!

But where will the media be searched in? Currently WebTextEditor only supports folder search, but we have planned to support broader resource type in the future.

WebTextEditor introduces media resource and media resources group collections in MediaResources property. Both the collections allow developers to specify the hierarchy of media resources that is suitable for the scenario without the need to configure it exactly the same as the physical hierarchy. In folder search, each media resource group and media resource objects represent a folder, where media resource will be the sub folder of media resource group.

Let’s say in the physical hierarchy of your computer folders, ProjectImages folder contains three folders: Products, Screenshots, and Others folders. Each folder contains images related to its category. In normal scenario, you can set all three folders as three media resources under one media resource group, Products.

When user searches media in Products group, he will automatically search in all three folders, because they are placed under the same group. If he chooses one specific media resource, for example Screenshots, the search will be performed in Screenshots folder only. This way, the search can be narrowed into a specific folder to improve the result of the search.

Search media in Products group

What if you want to exclude the search in Others folder because the media that you are looking for is related to products and screenshots categories only? This is not possible using the above hierarchy, because you can either search in all three folders or in one of them.

With the flexibility of media resource concept in WebTextEditor, the above configuration can be modified to meet your new scenario. You can specify two media resource groups: Products and Other groups. Products group includes Products and Screenshots media resources, while Others group includes Others media resource. 

 When user wants to exclude the search in Others folder, he can simply chooses Products group and the search will be performed on Products and Screenshots folder only.

Rearrange the hierarchy of media resources

So, it’s very flexible to configure the hierarchy of your media resource according to your requirement. When WebTextEditor is integrated to WebFileUploader, the media resources can be used as the available upload folders as well. This topic will be explained further in the future.

Add media to editor

The search result can be filtered by inputting search text, narrowing the media resource and the result type. When search result is not filtered, it will return all the available media in all the specified media resource. This could result in a very large output, which could affect the performance. That is why MaxMediaRetrieved property is introduced. You can specify the maximum media retrieved in every search action. By default, the value of this property is 100, which means every search action will only returns the first 100 media, even though the search result is larger than that.

Besides that, you can also enable SearchMediaOnLoad property to specify whether or not you want the search to be performed automatically when Media Gallery is first opened. When enabled, this behavior enables user to easily and directly choose the available media to be included in editor.

In conclusion, WebTextEditor includes built-in media gallery, which can be easily configured and very easy to use.