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!

Continuing my blog series on our upcoming release, I’m pleased to share the final part of WebDesktop’s development for HTML5 and CSS3. In my previous posts, I’ve shared the development progress of converting WebDesktopManager controls into HTML5. You can check the previous posts here: Part 1 and Part 2. In this final part of my post, I’m going to cover the new features for the rest of WebDesktop controls such as WebDesktopManager, WebDialogBox, WebPaneManager, WebSplitter, WebNotification and many others.

In version 4, WebDesktop has been refined to fully support the latest web standards. This allows you to use many of the advanced WebDesktop features in your next-generation web applications and at the same time leveraging cutting-edge technologies such as HTML5 and CSS3. With our latest innovation of “Windows 8 ready” Component Designer, you can easily configure every properties and styles using the latest Visual Studio 2012.

WebNavPane

WebNavPane is one of the many UI controls demanded by application developers. Unfortunately, the existing WebNavPane was designed for HTML4 which mainly uses table for layouting. The first time when we convert WebNavPane to HTML5, we encountered issues with the layout such as shown below:

As you can see, WebNavPane’s border doesn’t get rendered properly and the container becomes smaller. After improving the control to support HTML5, the layout and rendering now shows a perfect results, such as shown below:

Furthermore, we’ve also added a metro style in the latest WebNavPane. This control has been redesigned and developed to fully inherit the styles in Windows 8. And of course, we’re ready to give the best UI in styles and performance in the latest Windows 8.

WebCallOut

Previously, we’ve discussed about the layout issues occurring in WebCallOut when it is set to HTML5 in the beginning. The rendering is completely messed up and the pointer is also offset from the correct position. After numerous improvements made, we’re happy to introduce metro styling in the latest WebCallOut. The metro styles consist of Metro Orange, Metro Silver and metro Simple such as shown below:

WebExplorerPane

We’ve extremely improved WebExplorerPane from its layout. Rendering its layout in HTML5 is much more complex than HTML4. However, we’ve managed to overcome these obstacles and proudly introduced the new metro style in the latest WebExplorerPane.

It perfectly renders and matches the “Windows 8-ready” styling starting from its layout, font color and style and many others.

WebDesktopManager

As we’ve discussed in previous Part 2, there are numerous enhancements in the window and desktop rendering. Since the new specification in HTML5 introduces a number of limitations of TABLE usage, therefore we’ve decided to remove all TABLE usage and use DIV instead.

WebDesktop 4 has added 3 new features to give users freedom in perform styling over WebDesktopManager. Now, the icon in Taskbar is no longer depending on window or shortcut. They can be determined by defining the TaskBarImage property in WebDesktopWindow or WebDesktopShortcut.

You can perform styling to container when using complex image border type. In the previous version, the container’s style will not be assigned in the container itself when using complex image. Starting from WebDesktop 4, you can easily perform styling by setting the ApplyContainerStyle property to true.

WebDialogBox

The changes made in WebDialogBox is almost similar to WebDesktopWindow. By inheriting WebDesktopWindow’s structure, WebDialogBox is rendered using DIV instead of TABLE. With HTML5, the rendering of each browser will be more consistent and more solid than HTML4. WebDialogBox also supports CSS3 for its styling.

Introducing Metro theme for WebDesktop

Since the invention of “Metro” design language, Microsoft has been redesigning all its software products toward the modern UI design, including the recently released Microsoft Windows 8. As a leading tool vendor, we’re pleased to be the among the first to support Metro design language.

That said, our designer team has designed a comprehensive Metro theme that can be easily applied to all existing WebDesktop controls such as WebDesktopManager, WebDialogBox, WebTab and so on. Each control theme is thoughtfully designed to get the right look and feel particularly when it comes to contrast colors. See the screenshot below.

The following screenshots show the Metro theme running on WebDesktop 4. Remember, these are real web applications built on ASP.NET, and run on your favorite browsers.

The new WebDesktop 4 will be available in the upcoming R2 release which is going to be shipped anytime soon in this December 2012. Be sure to stay updated with the next announcement.

Cheers,
Handy

Apparently, Internet Explorer has a serious flaw in performance when a script is trying to add styles programmatically while loading, and at the same time when layouting is performed by other scripts.

To eliminate the performance issue, all styles in WebMenuBar should be defined as CssClass instead of using server-side predefined styles.

For comparison, I have attached two samples (with and without CssClass). Run the samples and compare the performance difference between them.

Note: This technique also works on standalone WebToolBar which causes the same issue.

Regards,
Handy.
Support Engineer.

The layout issue in WebTab can be easily fixed to support XHTML by tweaking the default styles available in WebTab. For instance, removing padding, margin and overflow property from the FrameStyle will fix the main layout of the control.

With this workaround, you can use WebTab control along with its built-in features in XHTML pages without issues.

Hint: When complex image is used, you need to maintain and customize the style appropriately.

Please refer to the sample to see how it works.

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

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

WebDragDropExtender allows you to add drag and drop behavior between server or HTML controls. When implementing drag and drop behavior to WebScheduler, you can use any controls as DragControl as long as the drag behavior has been implemented in that control. In this blog, WebGrid is used as DragControl, as the drag behavior is a built-in implementation in WebGrid.

First, add WebScheduler and WebGrid to a page. Ensure all the events and data is displayed properly in both controls before you continue to the next step.

Both WebScheduler and WebGrid are configured to display data

In WebScheduler, the AllowDropFromExtender property needs to be enabled and the editing capabilities need to be enabled as well.

Next, add WebDragDropExtender control to the page. Add WebGrid in DragControls collection and WebScheduler in DropControls collection of WebDragDropExtender.

The following steps are needed to add WebGrid in DragControls collection:

1. Choose DragControls property and open WebDragControl Collection Editor dialog box.
2. Set WebGrid’s ID as the value of ControlID property.
3. Choose AdvancedProperties and AdvancedProperties dialog box will be opened.
4. Check Enable special integration with Intersoft control checkbox and check Allow dragging on checked rows checkbox. Note that WebGrid should have rowchecker-typed column.
5. Press OK in both dialog boxes.
   

   WebDragControl Collection Editor dialog box

�
The following steps are needed to add WebScheduler in DropControls collection:

1. Choose DropControls property and open WebDropControl Collection Editor dialog box.
2. Set WebScheduler’s ID as the value of ControlID property.
3. Type the following attributes: Type=Custom,ComponentType=WebScheduler,DropableOnCell=True, in AdvancedProperties property.
4. Press OK.
   

   WebDropControl Collection Editor dialog box

�
Finally, add OnDragStart and OnDragDrop client-side events in WebDragDropExtender control. 

Add the following code in OnDragStart client-side event. The code will reinitialize drop controls every time the drag behavior started. This is needed because the selected view mode in WebScheduler might be different every time a drag behavior started, e.g: when user first drags a row and drop it to WebScheduler, the active view mode is Day view. Then, he changes the view mode to Month view. In this case, the drop controls needs to be reinitialized in order for the drag and drop behavior to work perfectly.

function DragStart(controlId, e)
{
      var obj = ISGetObject(controlId);
      obj.ReinitializeDropControls();
}

In OnDragDrop client-side event, you can implement the drop action according to your scenario. In this case, we will implement the code to add a new event according to the active view mode.

function DragDrop(controlId, e, dropObject)
{
  if (dropObject.IsSubObject)
  {
     var dropItem = dropObject.SubObjectContext;

     if (dropItem.ItemType == "Cell" || dropItem.ItemType == "AllDayCell")
     {
        var s = ISGetObject("ws1");

        var subject = e.DragObject.Data.Rows[0].GetCell("Subject").Text;
        var startTime = "";
        var endTime = "";
        var allDayEvent = false;
        var resourceID = "1"; //currently hardcoded
        var el = dropItem.Element;

        switch (s.ViewSettings.SelectedViewMode)
        {
           case "Day":
           case "Week":
              if (dropItem.ItemType == "AllDayCell")
              {
                 allDayEvent = true;
                 startTime = endTime = s.GetDateTimeByCellElement(el, "Date");
              }
              else
              {
                 startTime = s.GetDateTimeByCellElement(el.children[0], "DateTime");
                 endTime = AddMinutes(startTime, 30);
              }

              if (s.IsInSplitViewMode)
                 resourceID = s.GetResourceByCellElement(el.children[0]).ResourceID;

              break;

              case "Month":
                 allDayEvent = true;
                 startTime = endTime = s.GetDateTimeByCellElement(el, "Date");
              break;
        }

        CreateNewEvent(resourceID, subject, startTime, endTime, allDayEvent);

        return true;
     }
  }
  return false;
}

Now, you can drag a row from WebGrid and drop it to WebScheduler in any cell area that you want. The selected dropped area is indicated by a dashed line border in the cell, enabling user to easily see whether or not the selected droppable area is the correct date and time to drop the object.

WebGridRow is dragged to WebScheduler

When the row is dropped, a new event will be created in the selected cell area. Note that previously abc row is dragged from WebGrid and dropped to 12 PM cell area. After it’s dropped, a new event with abc as its subject, will be created in 12 PM cell area with 30 minutes duration (can be specified in the code).

A new event is created when the row is dropped to WebScheduler

This drag and drop behavior is applicable in view modes that include cells in its layout, so Agenda, Year, and Quarter views are not supported. You can download the sample here. Feel free to give feedback or comments. Have a great day !

Here is the simple steps you need to follow:

– First of all, you simply need to simply drag WebNavPane control and HTML button from Toolbox to the WebForm.

– Then, switch to Source code to create a javascript function called Create_ClientSide(). The code will look like following:

<script type=”text/javascript”>

        function Create_ClientSide()

        {

            var nav = ISGetObject(“WebNavPane1″);

            var navbar = new WebNavBar();

            navbar.Text = “test”;

            navbar.Name = “test”;

            nav.AddBar(navbar);

            var item = new WebNavBarItem();

            item.Text = “1”;

            item.Name = “1”;

            navbar.AddBarItem(item);

            navbar.Click();

        }
    </script>

– Invoke function Create_ClientSide() using onclick event in HTML button. 

<input type=”button” onclick=”Create_ClientSide()” value=”Click to create NavBar from client side” />

– Compile and run the sample.  When you click the button, it will automatically add the NavBar along with its NavBarItem.

Should you have any comment please feel free to give one

Cheers.

]]> http://blog.intersoftsolutions.com/2008/12/create-navbar-and-navbaritem-via-client-side/feed/ 0 http://blog.intersoftsolutions.com/2008/09/resize-editing-form-dialog-box-on-webscheduler/ http://blog.intersoftsolutions.com/2008/09/resize-editing-form-dialog-box-on-webscheduler/#comments Wed, 10 Sep 2008 11:31:28 +0000 http://intersoftpt.wordpress.com/?p=228 WebScheduler.NET 2.0 already supports Extensibility feature that allows user to extend WebScheduler objects. In many cases, user needs to add several additional fields to the editing form. Due to number of the input controls in the editing form, some of the fields might get hidden the limited width and height (scrollbar will automatically appear in this case). To overcome this issue, you can resize the Editing Form dialog box by implementing OnEditingFormShow client side event. Here is the sample code:

function WebScheduler1_OnEditingFormShow(controlId, action, eventView, eventType, newType)
{
         var EditingDialogBox = WebScheduler1.EditingDialogBox;
         if (EditingDialogBox.Window!=null)
         {
                   EditingDialogBox.Window.ResizeTo(900,600);
                   EditingDialogBox.Window.MoveToCenterDesktop(true);
         }
         else
         {
                  EditingDialogBox.Width = "1000";
                  EditingDialogBox.Height = "600";
         }
         return true;
}

Feel free to post your feedback or comment.

Hope this helps,
Dicky.

This article discusses how to retrieve control inside a template container without using FindControl() method. In this case, the container controls are one of the container included in WebDesktop.NET 2.5, such as WebPaneManager, WebDesktopManager, WebTab, etc.

This enhancement frees you from the hassles of writing codes to find the control instance before the control can be accessed. You can now refer the child controls by simply accessing its ID. For instance, txtName.Text = “John”. One thing you will definitely love is that Visual Studio IDE will be able to find the child controls ID automatically. This means less runtime errors and reduced development time.

In WebDesktop.NET 2.5, when you have the identical name for one control id and the other control id that is being casted, it will produce an error. Therefore, you need to remove the local control definition and FindControl() method since it is no longer needed in the latest R2 release.

For more details about the related topic, please refer to our support site.

Regards,

-Martin-