Target Group Feature in WebCallOut

The latest WebCallout control introduces a new capability to target a group of elements. Although it may seem simple, it’s indeed a nice time-saving feature which eliminates a lot of codes. With this group targeting feature, you can easily specify the “group name” of multiple WebCallOuts in the page. The callout instances with same “group name” will only appear once per show.

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

Enhancements in WebScheduler 2 SP1

Striving to deliver the world’s best WebScheduler product, we continue to enhance and add more new features based on your feedback with the objectives to provide more advanced scheduling functionality — making your web development faster and easier than ever. In this post, I will share some new features and enhancements that we’ve made in the latest service pack. These new enhancements and features are included  in Intersoft WebUI Studio 2009 R1 SP1 or the latest build of WebScheduler released this month.

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, Events, and Client-side API added in WebTextEditor

As published previously, we have released WebUI Studio 2009 R1 SP1 which includes many enhancements, especially to WebTextEditor and WebScheduler 2. Specifically in WebTextEditor, some new properties, client-side events, and client-side API are included.

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.

Bind Value to WebTextEditor When Used As Template

WebTextEditor can be used as editing tool in many scenarios. If you have details view or other data list control, WebTextEditor can be used as the item or edit template and the related data can be displayed in WebTextEditor.

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.

WebTextEditor used as edit template

When used as either template, WebTextEditor configuration can be customized based on your requirement. Please browse to this sample in Intersoft Live Demo to try it yourself.

Create WebCallOut control in client-side

One of the most requested features for WebCallOut that we’ve received in the past months is the ability to create callout control in the client side programmatically. If you haven’t heard about WebCallOut, it is a nice replacement for standard tooltip, which allows you to display contextual information in an eye-catching, stylish callout interface. To learn more, please head to WebCallOut product page.

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