Introducing WebSlidingMenu

It has been a while since my last blog post. In this post, I want to introduce you to Intersoft’s  new ASP.NET control that we shipped in 2010 release. Called WebSlidingMenu, it is a unique navigation control with superb navigation experience. With WebSlidingMenu, you can swiftly move from one page to another page in fewer clicks. WebSlidingMenu is one of the controls that included in WebEssentials suite. Click here to learn more about WebEssentials.

WebSlidingMenu offers a hierarchical navigational concept in drill-down mode. As a navigation control, WebSlidingMenu is perfectly suitable for a complex structured navigation as it allows users to drill-down to a specific menu and navigate to the specific item instantly.

In this post, I will deep dive on each feature  of the WebSlidingMenu.

Data Binding

Data binding is one of the control basics that generally populates the items based on the given data source. WebSlidingMenu provides an intuitive DataBinding Editor makes it easy for you to connect the WebSlidingMenu control to your existing XML documents.

The WebSlidingMenu’s Data Binding Editor is shown in the following screenshot.

Notice that you can define the data binding node in hierarchical to easily match your XML data structure. Click here to learn more about WebSlidingMenu’s data binding concept.

Load-on-Demand

Performance is always an issue as users demanded intuitive and responsive user experience even with large set of data. We, at Intersoft Solutions are fully aware of this problem and offer an innovative load-on-demand feature in WebSlidingMenu.  You can enable the load on demand feature by simply enabling the LoadOnDemand property.

You can check the WebSlidingMenu’s load on demand sample here.

Header Template and Item Template

Sometimes having text as a display is not enough, you need a better layout like images or maybe some HTML tables or even server side controls. In WebSlidingMenu, you can create the header and item display that you want by choosing the appropriate mode like text, text and image or inline.

The following illustration shows the WebSlidingMenu configured with inline mode in the Header and Item. You can also check the sample here.

Auto Height

In certain scenarios, you often need to specify dynamic height for each item. The easiest  way to do this is setting the height of each item individually, which is not a good practice. WebSlidingMenu provides a more elegant approach with its Auto Height feature. All you need to do is simply setting the AutoHeight property to true. WebSlidingMenu will automatically determine the height for each item to fit the item’s content. Please refer to the following screenshot for clearer picture.

You can try the online demo here.

Summary

In this post, I have covered only some of the best features available in WebSlidingMenu. Please click here to learn more, and here for more online demos.

If you haven’t downloaded WebUI Studio, click here to grab your 30-day free trial and test drive WebSlidingMenu for yourself. Feel free to unleash your creativity and spice up your applications with stunning navigation experiences. For questions, feedbacks or suggestions, please post it in Intersoft’s community.

Warm Regards,

Gordon Tumewu
WebEssentials Team

Using Multiple Calendars in WebCalendar

Continuing my posts about Intersoft WebCalendar control for ASP.NET, I have described how to configure the holiday collection in WebCalendar, and how to get selected dates and perform multiple selection. If you missed the blog posts, please check it out here.

In this post, I will show you about how to configure WebCalendar to multiple calendars in multiple columns. Let’s start configuring the WebCalendar.

Unlike similar calendar controls, WebCalendar enables you to display multiple calendars. This behavior is controlled by the NumberOfCalendarDisplayed property.

When multiple calendars feature is enabled, only 1 calendar will be active when users switched to the year view or decade view.

The following screenshots show the multiple calendars feature in WebCalendar using different type of view mode.

As you can see from the above screenshots, WebCalendar’s default behavior is to display the multiple calendars in one column. To enable multiple columns option in WebCalendar, we can customize the CalendarItemWidth property to set the width of each calendar, and the Width property to control the WebCalendar’s width.

As an example, I will show you how to display a whole year calendar in 4×3 configurations.
Please follow the steps below.

1. Set the NumberOfCalendarDisplayed property to 12.
2. Set the CalendarItemWidth to 170px. The CalendarItemWidth is 1/4 from the entire WebCalendar’s width.
3. Set the CalendarItemHeight to 180px. The CalendarItemHeight is 1/3 from the entire WebCalendar’s height.
4. Set the Width property to 680px. We can get the Width property value from multiply the total column with CalendarItemWidth’s value.
5. Set the Height property to 540px. We can get the Height property value from multiply the total row with CalendarItemHeight’s value.

Here is the result from the above WebCalendar configurations.

Now you have learned how to use WebCalendar to display multiple calendars in multiple columns. If you have any question, feedbacks or comments, feel free post them to our community forum. You can also check the online demos of WebCalendar here.

Warm Regards,
Budianto Muliawan
Intersoft Software Architect

WebExpander with Google Maps

In the 2010 R1 release, Intersoft introduces a new ASP .NET collection control under the WebEssentials suite. Further information about WebEssentials can be found here. One of the controls in the WebEssentials is WebExpander. In this post, I will show you how to mashup Google Maps service with WebExpander to display contact list address. The following screenshot illustrates the above scenario. You can achieve the above scenario by customizing the WebExpander’s Mode and Flow property, and use custom inline template for the WebExpander’s header and content section. You also need to implement WebExpander’s OnClick client side event to call the Google Maps service. I have provided a working sample which you can download at the end of this post. Now, let’s start customizing the WebExpander.

• Customize the Mode property I’m going to set the Mode property to Fixed.
• Customize the Flow property I’m going to set the Flow property to Right because I want the Google Maps service to expand to the right of the header.
• Customize WebExpander’s header and content section As you can see from the above screenshot, there are two sections in the WebExpander. The list of contacts and the Google map address of the selected contact. The list of contacts is the header section and the Google map is the content section. The following code shows the customization of the header and content section using custom template.

  <ISWebEssentials:WebExpanderItem Name="WebExpander1_item0" 
      State="Expanded">
      <headertemplate>
          <div style="margin-left: 10px; padding-top: 12px;
              font-family: Segoe UI;">
          <div style="background-repeat: no-repeat;
              background-position: left center;
              height: 50px; padding-left: 50px; font-size: 12px;
              background-image: url('images/photo1.png');">
              <div style="line-height: 80px; font-size: 12px;
                  font-weight: bold;
                  line-height: 80px;">
                  Patrice Johnson</div></div>
          <div style="height: 18px; line-height: 18px;
              padding-top: 2px; font-size: 11px;">
              191 North Cowley Drive</div>
          </div>
      </headertemplate>
      <contenttemplate>
          <div id="canvas_map_0" style="width: 623px;
              height: 483px;">
              <div style="text-align: center;
                  padding-top: 240px;">
                  Loading Map ...</div>
          </div>
      </contenttemplate>
  </ISWebEssentials:WebExpanderItem>

  The content section is set using a predefined size to hold the Google Maps service.

• OnClick client side event The Google Maps service API is called in the WebExpander’s OnClick event handler. In order to get the correct map size, you should ensure that the content section is fully expanded before calling the Google Maps API.

  function WebExpander1_OnClick(ctrlId, itemName)
  {
      var exp = ISGetObject(ctrlId);
      var itemObj = exp.Items.GetNamedItem(itemName);
  
      var intervalExpandObj = setInterval(function ()
      {
          if (itemObj.State == "Expanded")
          {
              clearInterval(intervalExpandObj);
              intervalObj = null;
  
              var idx = itemName.substring(itemName.length - 1);
  
               //Function to call Google Maps API
              ShowMapByAddress(parseInt(idx));
          }
      }, 50);
  }

Once you have finished configuring the WebExpander, you will get something similar to the above screenshot. In summary, I have explained some WebExpander features such as mode, flow, custom template, and client side API which you can use to create a mashup service between WebExpander and Google Maps. For further information about WebExpander features, please visit WebExpander product page here. As mentioned earlier, you can download the sample for this post here. You can also explore other WebExpander samples in the online demo here. If you have questions or feedback about this post or anything related to WebExpander control, feel free to post it to Intersoft community forum. Regards, Glenn Layaar Intersoft Member

Page Index Indicator Using WebProgressBar

In the 2010 R1 release, Intersoft introduces a new ASP .NET collection control under the WebEssentials banner. One of the controls in the collection is WebProgressBar. Further information about WebEssentials can be found here.

In this post, I will show how to use WebProgressBar to indicate the page index in a paged form scenario.

The following screenshots show page index information in a paged form using WebProgressBar.

You can achieve such scenario with WebProgressBar in several simple steps. The basic idea is to customize the Mode and Orientation property of the WebProgressBar, and provide a client side event to update the WebProgressBar’s Value with the latest page index.

For your information, I have provided a working sample which you can download at the end of this post.

Now, let us start customizing the progress bar.

• Customize the Mode property
  I am going to set the Mode property to Determinate with MaxValue property is set to the number of page in the form. I will also set the Value property of the progress bar to the initial page index value. In this sample, I set the MaxValue property to 4 and Value property to 1. 

  <ISWebEssentials:WebProgressBar ID="ProgressBar1" runat="server"
  
  Mode="Determinate" Value="1" MaxValue="4" DefaultStyleMode="Default">
  
  </ISWebEssentials:WebProgressBar>

• Customize the Orientation property
  Since, we would like to show the progress bar in vertical position, let us set the Orientation property of the progress bar to Vertical.
• Update the Value property in GoPrev and GoNext client side method
  As the page index changed, we also need to update the value of the progress bar. You can update the value programmatically in the client side event using SetValue client side API. In this sample, I am going to update the progress bar value during page transition client side method.

  function GoPrev() {
  	if (curPage > 1) {
  
  		curPage -= 1;
  
                  ...
  
                  var progBar = ISGetObject("ProgressBar1");
  		progBar.SetValue(curPage);
  	}
  
  }
  

Once you have finished configuring the WebProgressBar, you will get something similar to the above screenshot.

In summary, I have discuss some WebProgressBar features such as mode, orientation, and client side API which you can use to indicate the page index in a paged form scenario. For further information about WebProgressBar features, visit WebProgressBar web page here.

As mentioned earlier, you can download the working sample here.

You can also explore other WebProgressBar features in the online demo here.

Regards,

Glenn Layaar
Intersoft Member

Get Multiple Selected Dates with WebCalendar

Calendar is a control that looks simple but very useful in desktop or web development, so there is no question why there are lots of calendar control out there. Those calendar controls usually can select single date or can return single date only.

In certain scenario, there is a requirement where you would like to be able to perform multiple selections or get multiple dates from the calendar control. For example in scheduling scenario, there is a condition that the event will be a range event or occur in custom date (the dates does not align), and many other scenarios that require more than just single selection or single date.

To overcome the above scenarios, WebCalendar control is implemented with “MultipleSelection” feature which can give you a range of date and multiple selections. In this post, I will show you how to enable this feature.

For your information, WebCalendar is part of WebEssentials suite for ASP.NET which contains 8 new controls such as WebAccordion, WebProgressBar, WebListBox, etc. For further information about WebEssentials can be found here.

Enable MultipleSelection in WebCalendar

The default selection behavior in WebCalendar is single selection. In single selection, you can access WebCalendar’s selected date value in SelectedDate property. In multiple selections, you can access WebCalendar’s slected dates value in SelectedDates collection property.

To enable MultipleSelection in WebCalendar, set EnableMultipleSelection property to True.

The following images show SelectedDate, SelectedDates and EnableMultipleSelection property in WebCalendar control.

When multiple selections feature is enabled, you can highlight multiple dates in WebCalendar using mouse. The behavior is the same with performing multiple selections in desktop OS (press, hold and drag the mouse).

Actually, you can also perform the multiple selections using keyboard. In order to use the keyboard action, EnableKeyboardSupport property in WebCalendar should be enabled. You will get the comprehensive multiple selection behavior in WebCalendar with the combination of mouse and keyboard. Like desktop OS, you can highlight WebCalendar’s date with click and drag using mouse, use CTRL, SHIFT, or CTRL + SHIFT to get random selections.

When keyboard support is enabled, you can also start using the directional keyboard keys to move between months and dates in WebCalendar. [Enter] key is used to select a date and [Space] key is used to cycle through the available views (Day, Month, Year) in WebCalendar.

Some illustration of multiple selections in WebCalendar is shown in the following screenshots and video.

For your information the multiple selections feature in WebCalendar is designed to work in Day view mode only.

Get Multiple Selected Dates from WebCalendar

In this post sample, I will show you how to get the previous/old selected dates and the latest/new selected dates from WebCalendar through OnSelectedDateChanged client side events and display the information for user. OnSelectedDateChanged client side event is the client side event in WebCalendar that will be triggered when WebCalendar’s SelectedDate or SelectedDates property value is changed.

First, enable WebCalendar’s EnableMultipleSelection and EnableKeyboardSupport property by set the property value to True then start implementing OnSelectedDateChanged client side event.

The following screenshots show the implementation of OnSelectedDateChanged client side event in WebCalendar.

function WebCalendar1_OnSelectedDateChanged(controlId, oldDates, newDates)
{
	var WebCalendar1 = ISGetObject(controlId); 

	return true;
}

Notice that OnSelectedDateChanged client side event has 3 parameters:

• controlId is the id of the WebCalendar control
• oldDates is the collection of the old selected dates
• newDates is the collection of the new selected dates

Next, I will write simple code that will get the old and new selected date and put them as the div element’s innerHTML like illustrated in the following sample.

Here is the result after the above code implementation.

function WebCalendar1_OnSelectedDateChanged(controlId, oldDates, newDates)
{
    var WebCalendar1 = ISGetObject(controlId); 

    var oldDatesDiv = document.getElementById("oldDatesDiv");	    var newDatesDiv = document.getElementById("newDatesDiv");

    for (var i = 0; i < oldDates.length; i++)
	oldDatesDiv.innerHTML += oldDates[i] + "<br />";
	         for (var j = 0; j < newDates.length; j++)
	newDatesDiv.innerHTML += newDates[j] + "<br />";

    return true;
}

Here is the result after the above code implementation.

In this post, you have learned how to enable multiple selections and get multiple selected dates in WebCalendar. If you have any question, feedbacks or comments, feel free post them to our community forum.

 

Best Regards,

Budianto Muliawan