Author Archives: erikaa

New in ClientUI 4: Innovative Range Slider Bar Control

As mentioned in this post, ClientUI 4 was included as part of WebUI Studio 2010 R2 released on December 2010. You can visit ClientUI product information here or read this article to see what’s new in ClientUI 4.

Introducing UXRangeSliderBar

UXRangeSliderBar is one of the new controls included in ClientUI 4, and can be used to select a range of values by moving two thumbs along the slider bar track area.

In previous post, I’ve described a property finder scenario where users can select property size and price range to find a list of properties. You can use UXSliderBar to easily select the property size. You can also use UXRangeSliderBar to select the price range for this property finder application. When it comes to selecting a range, usually two input boxes are needed, and you need to validate that the value of one input box shouldn’t exceed the other. Using UXRangeSliderBar, the two thumbs are carefully designed not to exceed the other, thus providing the built-in validation for a range input control.

Blog1

<StackPanel>
    <TextBlock FontSize="26">Property Finder</TextBlock>
    <Intersoft:FieldLabel>
        <Intersoft:FieldLabel.Header>
            <TextBlock Width="100" TextWrapping="Wrap"
                       Text="Select Size (in sq ft.)"></TextBlock>
        </Intersoft:FieldLabel.Header>
            <Intersoft:UXSliderBar Width="400" TickPlacement="BottomRight"
                                   Minimum="500" Maximum="1000"
                                   LargeChange="100" SmallChange="10"
                                   IsMoveToPointEnabled="True"
                                   Value="{Binding
                                   PropertyFinder.PropertySize,
                                   Mode=TwoWay, ValidatesOnDataErrors=True,
                                   ValidatesOnExceptions=True}"/>
    </Intersoft:FieldLabel>
    <Intersoft:FieldLabel>
        <Intersoft:FieldLabel.Header>
            <TextBlock Width="100" TextWrapping="Wrap"
                       Text="Select Price (in 1000 USD)"></TextBlock>
        </Intersoft:FieldLabel.Header>
        <Intersoft:UXRangeSliderBar Width="400" TickPlacement="BottomRight"
                                    TickFormat="C0" Minimum="100"
                                    Maximum="700" LargeChange="100"
                                    SmallChange="10"
                                    SelectionStart="{Binding
                                    PropertyFinder.StartPrice,
                                    Mode=TwoWay, ValidatesOnDataErrors=True,
                                    ValidatesOnExceptions=True}"
                                    SelectionEnd="{Binding
                                    PropertyFinder.EndPrice,
                                    Mode=TwoWay, ValidatesOnDataErrors=True,
                                    ValidatesOnExceptions=True}"/>
    </Intersoft:FieldLabel>
    <Button Content="Search" Width="100" Margin="0, 20, 0, 0"></Button>
</StackPanel>

The range of values in UXRangeSliderBar is specified using SelectionStart and SelectionEnd properties. The value of SelectionStart property is marked by the first thumb, while the value of SelectionEnd property is marked by the second thumb. To select a range of value, you can move the thumb, press the registered keyboard keys, or click the track area and handle buttons. These user interactions use the value of LargeChange and SmallChange properties specified in UXRangeSliderBar.

  • Move the thumbs.

    You can change the range of values by moving the thumbs along the track area. Additionally, you can maintain the value span by pressing the Shift key while moving the thumb. In this case, both thumbs will move together.

  • Use keyboard keys.

    Similar to UXSliderBar, the Up, Down, Left, Right, PageUp, PageDown, Home, and End keys are already registered to UXRangeSliderBar commands. When one of these keys are pressed, UXRangeSliderBar will check the active thumb to determine whether the start or end value will be changed. For example: in the above scenario, when the first thumb is active and you press the Left key, the value of SelectionStart will be subtracted with the value of SmallChange property, which is 10. So, now the selection will start from $290 to $500.

    When you press the Up, Down, Left, or Right keys, the value of SmallChange property will be used to change the range selection. When you press PageUp or PageDown keys, the value of LargeChange property will be used to change the range selection.

    When you press the Home or End key, UXRangeSliderBar will not check the active thumb, but will automatically change the value of SelectionStart and SelectionEnd properties to Minimum or Maximum properties respectively. So, in the above scenario, if you press Home key, the SelectionStart will be set to $100, thus the selection will start from $100 to $500.

  • Click the track area.

    When the track area is clicked, the area clicked will determine whether the start or end value will be affected. When you click the pink or blue area, the value of SelectionStart will be subtracted or added with the value of LargeChange property. When you click the green or purple area, the value of SelectionEnd property will be subtracted or added with the value of LargeChange property.

    Blog_Range1 
    For example: when you click on the green area, the value of SelectionEnd will be subtracted with the value of LargeChange property, which is 100, so now the selection will start from $300 to $400.

  • Click the handle buttons.

    By default the handle buttons are not displayed in UXRangeSliderBar. To display the handle buttons, you can set HandlesVisibility property to Visible. Two arrow-shaped buttons will be displayed at the left and right side of UXRangeSliderBar.

    When the handle buttons are clicked, UXRangeSliderBar will check the active thumb to determine whether the start or end value will be added or subtracted with the value of SmallChange property.

    Blog_Range2

    If the second thumb is active and you press the right handle button, the value of SelectionEnd property will be added with the value of SmallChange property, which is 10, so now the selection will start from $300 to $510.

Enabling Drag Range Behavior

As described above, you can maintain the value span by pressing Shift key while moving the thumb. You can do that if you want to maintain the $200,000 value span when moving the thumb.

Another alternative is to enable the drag range behavior using IsDragRangeEnabled property. When enabled, you can drag the track area between two thumbs and both thumbs will move together.

Blog_Range3

<Intersoft:UXRangeSliderBar TickPlacement="BottomRight" TickFormat="C0" 
			    Minimum="100" Maximum="700" LargeChange="100" 
			    SmallChange="10" SelectionStart="{Binding 
			    PropertyFinder.StartPrice, Mode=TwoWay, 
			    ValidatesOnDataErrors=True, 
			    ValidatesOnExceptions=True}" 
			    SelectionEnd="{Binding 
			    PropertyFinder.EndPrice, Mode=TwoWay, 
			    ValidatesOnDataErrors=True, 
			    ValidatesOnExceptions=True}" 
			    IsDragRangeEnabled="True" />

Enabling Snap to Tick Behavior

You can enforce user to select only round value for the price range by enabling IsSnapToTickEnabled property. When enabled, the thumb will snap to the closest tickbar item when it is moved. If you move the first thumb to the left, it will snap to $300, $200, and $100.

<Intersoft:UXRangeSliderBar TickPlacement="BottomRight" TickFormat="C0" 
                            Minimum="100" Maximum="700" LargeChange="100" 
                            SmallChange="10" SelectionStart="{Binding 
                            PropertyFinder.StartPrice, Mode=TwoWay, 
                            ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            SelectionEnd="{Binding PropertyFinder.EndPrice, 
                            Mode=TwoWay, ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            IsSnapToTickEnabled="True" />

When you press Shift key while moving one of the thumb, both thumb will move together to maintain the value span. When snap to tick behavior is enabled, both thumbs will snap to the closest tickbar item when one of them is moved.

You can still enable precision selection by pressing Ctrl key. Try to move the thumb while pressing the Ctrl key. The thumb will not snap to the closest tickbar item, but moves along with the cursor position, as if this behavior is not enabled.

Enabling Move to Point Behavior

You can use IsMoveToPointEnabled property to enable move to point behavior where you can click on any position in the slider bar track area and the thumb will move immediately to the location of the click. You can to click at $700 directly and the second thumb will move directly to the location of the click. Let me remind you again, that the area of the click determines the thumb that will be moved.

If you press Shift key while clicking at $700 directly, both thumbs will move directly together and the selection will now start from $500 to $700.

<Intersoft:UXRangeSliderBar TickPlacement="BottomRight" TickFormat="C0" 
                            Minimum="100" Maximum="700" LargeChange="100" 
                            SmallChange="10" SelectionStart="{Binding 
                            PropertyFinder.StartPrice, Mode=TwoWay, 
                            ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            SelectionEnd="{Binding 
                            PropertyFinder.EndPrice, 
                            Mode=TwoWay, ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            IsMoveToPointEnabled="True" />

This behavior also works along with snap to tick behavior. So when both snap to tick and move to point behavior are enabled, you can click on any position in the track area and the thumb will snap to the closest tick bar item.

Enabling Auto Tooltip

While moving the thumb along the track area, you might find it difficult to determine what value you are hovering. You can display a tooltip near the thumb that contains the value of the hovered position using AutoTooltipVisibility property. You can specify AutoTooltipPosition, AutoTooltipFormat, AutoTooltipHorizontalDirection, and AutoTooltipVerticalDirection for additional configuration.

When you press Shift key while moving the thumb or when drag range behavior is enabled, a tooltip will be displayed near each thumb. You can know exactly that you are selecting $350 to $550 as the price range, as seen in the following shot.

Blog_Range4

<Intersoft:UXRangeSliderBar TickPlacement="BottomRight" TickFormat="C0" 
                            Minimum="100" Maximum="700" LargeChange="100" 
                            SmallChange="10" SelectionStart="{Binding 
                            PropertyFinder.StartPrice, Mode=TwoWay, 
                            ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            SelectionEnd="{Binding PropertyFinder.EndPrice, 
                            Mode=TwoWay, ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            AutoTooltipVisibility="Visible" 
                            AutoTooltipFormat="C0"/>

Configuring Minimum and Maximum Range Span

When you choose a wide price range, say from $100,000 to $700,000, it could return lots of search results. In UXRangeSliderBar, you can specify a maximum range span allowed to narrow down the search result. You will be prevented from selecting a range of values exceeding the maximum range span specified.

For example: if MaximumRangeSpan property is set to 300, you can only select up to $300,000 difference in UXRangeSliderBar. If the selection starts at $300, you can only move the second thumb to $600. You can’t move the second thumb to a value larger than that.

<Intersoft:UXRangeSliderBar TickPlacement="BottomRight" TickFormat="C0" 
                            Minimum="100" Maximum="700" LargeChange="100" 
                            SmallChange="10"  SelectionStart="{Binding 
                            PropertyFinder.StartPrice, Mode=TwoWay, 
                            ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            SelectionEnd="{Binding PropertyFinder.EndPrice, 
                            Mode=TwoWay, ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            MaximumRangeSpan="300"/>

You can specify the minimum range span allowed using MinimumRangeSpan property. By default to allow unlimited range span selection, the MinimumRangeSpan property is set to 0 and MaximumRangeSpan property is set to NaN.

Conclusion

In this post, you have learned the various ways to change the range of values in UXRangeSliderBar, the behaviors related to it, the auto tooltip, and the minimum/maximum range span.

To try it out yourself, feel free to browse through the samples here. To see all available features, see UXRangeSliderBar Overview. If you have questions or feedback about UXRangeSliderBar, feel free to post them to our community forum.

Cheers,

Erika

New in ClientUI 4: Intuitive Slider Bar Control

ClientUI 4 is the latest version of our flagship development suite for the Silverlight and WPF platform. To learn more about ClientUI, you can read this post or visit ClientUI product information here. To see what’s new in ClientUI 4, see this article.

Introducing UXSliderBar

UXSliderBar is one of the new controls included in ClientUI 4. UXSliderBar is mainly used to select a value from a range of values by moving the thumb along the slider bar track area.

For example: in the following property finder scenario, users can select a property size starts from 500 to 1000 square feet. Surely, you can use textbox to input the property size that you want. However, there are at least two advantages for using UXSliderBar. First, users will automatically know the range of property size available and easily select a value by moving the thumb. Second, you, as developer, can prevent users from inputting the wrong value in the textbox and thus, eliminate the needs to implement input type validation, should textbox is used instead.

Blog1

<StackPanel>
    <TextBlock FontSize="26">Property Finder</TextBlock>
    <Intersoft:FieldLabel>
        <Intersoft:FieldLabel.Header>
            <TextBlock Width="100" TextWrapping="Wrap" 
                       Text="Select Size (in sq ft.)"></TextBlock>
        </Intersoft:FieldLabel.Header>
            <Intersoft:UXSliderBar Width="400" TickPlacement="BottomRight" 
                                   Minimum="500" Maximum="1000"                                    
                                   LargeChange="100" SmallChange="10" 
                                   IsMoveToPointEnabled="True" 
                                   Value="{Binding 
                                   PropertyFinder.PropertySize, 
                                   Mode=TwoWay, ValidatesOnDataErrors=True, 
                                   ValidatesOnExceptions=True}"/>
    </Intersoft:FieldLabel>
    <Intersoft:FieldLabel>
        <Intersoft:FieldLabel.Header>
            <TextBlock Width="100" TextWrapping="Wrap" 
                       Text="Select Price (in 1000 USD)"></TextBlock>
        </Intersoft:FieldLabel.Header>
        <Intersoft:UXRangeSliderBar Width="400" TickPlacement="BottomRight" 
                                    TickFormat="C0" Minimum="100" 
                                    Maximum="700" LargeChange="100" 
                                    SmallChange="10" 
                                    SelectionStart="{Binding 
                                    PropertyFinder.StartPrice, 
                                    Mode=TwoWay, ValidatesOnDataErrors=True, 
                                    ValidatesOnExceptions=True}"
                                    SelectionEnd="{Binding 
                                    PropertyFinder.EndPrice,
                                    Mode=TwoWay, ValidatesOnDataErrors=True, 
                                    ValidatesOnExceptions=True}"/>
    </Intersoft:FieldLabel>
    <Button Content="Search" Width="100" Margin="0, 20, 0, 0"></Button>
</StackPanel>

You might note that UXRangeSliderBar is used in this scenario, but we’ll discuss about that in the next post :)

I’ve mentioned that you can easily select a value in UXSliderBar by moving the thumb along the slider bar track area. Besides that, you can use a variation of keyboard keys registered to UXSliderBar commands or click the slider bar track area and handle buttons. These user interactions will use the value of LargeChange and SmallChange properties specified in UXSliderBar.

  • Use keyboard keys.

    Some key gestures are already registered to UXSliderBar commands. When you press Up, Down, Left, or Right keys, the value of UXSliderBar will be added or subtracted with the value of SmallChange property. For example: in the above scenario, the value of UXSliderBar is 700.When you press the Right key, the value of UXSliderBar will be added with the value of SmallChange property, which is 10. So, the value of UXSliderBar now is 710.

    When you press PageUp or PageDown keys, the value of UXSliderBar will be added or subtracted with the value of LargeChange property. So, if the value of UXSliderBar is 710 and you press the PageDown key, the value of UXSliderBar will be subtracted with the value of LargeChange property, 100. So, the value of UXSliderBar now is 610.

    When you press Home or End key, the value of UXSliderBar will be set to the Minimum or Maximum property respectively. If you press End key, the value of UXSliderBar will be set to 1000 and the thumb will move to the end of the slider bar.

  • Click the slider bar track area.

    You can also click the track area at the left or right side of the thumb. When you click the blue area, known as DecreaseButton, the value of UXSliderBar will be subtracted with the value of LargeChange property. When you click the purple area, known as IncreaseButton, the value of UXSliderBar will be added with the value of LargeChange property.

    Blog2

  • Click the handle buttons.

    By default the handle buttons are not displayed in UXSliderBar. To display the handle buttons, you can set HandlesVisibility to Visible. Two arrow-shaped buttons will be displayed at the left and right side of UXSliderBar.

    When you click the handle buttons, the value of UXSliderBar will be added or subtracted with the value of SmallChange property.

    Blog3

Enabling Snap to Tick Behavior

When moving thumb to select a value, it is possible that you select a fractional value, such as: 700.346, which is rather uncommon for a property size. I think you would want a rounded value for that, right? In this case, you can enable IsSnapToTickEnabled property.

<Intersoft:UXSliderBar Width="400" TickPlacement="BottomRight" Minimum="500" 
                       Maximum="1000" LargeChange="100" SmallChange="10"                                                                      IsSnapToTickEnabled="True" Value="{Binding 
                       PropertyFinder.PropertySize, Mode=TwoWay, 
                       ValidatesOnDataErrors=True, 
                       ValidatesOnExceptions=True}"/>

When this property is enabled, the thumb will move to the closest tickbar item. So, as you move the thumb to the right, it will snap to 600, 700, 800, and so on.

When snap to tick behavior is enabled, you can still enable precision selection by pressing Ctrl key. Try to move the thumb while pressing the Ctrl key. The thumb will not snap to the closest tickbar item, but moves along with the cursor position, as if this behavior is not enabled.

Enabling Move to Point Behavior

Now, what if I want to select 900 as the property size? This might be what you think; either moves the thumb, press Up key several times, or click the track area continuously. Well, let me save your time a bit by introducing IsMoveToPointEnabled property.

<Intersoft:UXSliderBar Width="400" TickPlacement="BottomRight" Minimum="500" 
                       Maximum="1000" LargeChange="100" SmallChange="10"                                               IsMoveToPointEnabled="True" Value="{Binding 
                       PropertyFinder.PropertySize, Mode=TwoWay, 
                       ValidatesOnDataErrors=True, 
                       ValidatesOnExceptions=True}"/>

When this property is enabled, you can click on any position in the slider bar track area and the thumb will move immediately to the location of the click. You can click on 900 tickbar item and the thumb will move immediately there.

Well, I understand clicking right on the tickbar item will not be that easy and I probably would need a couple of try for that. That is the reason why you should enable both snap to tick and move to point behavior. When these properties are enabled, you can click near the tickbar item and the thumb will snap to it.

Enabling Auto Tooltip

While moving the thumb along the slider bar track area, you might find it difficult to determine what value you are hovering. You can display a tooltip near the thumb that contains the value of the hovered position using AutoTooltipVisibility property. You can specify AutoTooltipPosition, AutoTooltipFormat, AutoTooltipHorizontalDirection, and AutoTooltipVerticalDirection for additional configuration.

Let’s say you want to select a discount value using UXSliderBar. You can display the percentage value you’re selecting in the tooltip.

<Intersoft:UXSliderBar TickPlacement="BottomRight" TickFormat="P0" 
                       Maximum="1" LargeChange="0.2" 
                       AutoTooltipVisibility="Visible" 
                       AutoTooltipFormat="P0"/>

Blog4

Displaying Value Range Track

In the discount slider bar, it can be useful to display the active selection track. You can see how much discount applied to a product simply by seeing the value range track. In UXSliderBar, the value range track is indicated by a blue-colored track that starts from the value of Minimum property to the selected value of UXSliderBar. You can display the value range track using ValueRangeVisibility property.

<Intersoft:UXSliderBar TickPlacement="BottomRight" TickFormat="P0" 
                       Maximum="1" LargeChange="0.2" 
                       ValueRangeVisibility="Visible" 
                       Value="0.5"/>

Blog5

Conclusion

In this post, you have learned the various ways to change the value of UXSliderBar, the behaviors related to it, the auto tooltip, and the value range track.

To try it out yourself, feel free to browse through the samples here. To see all available features in UXSliderBar, see UXSliderBar Overview. If you have questions or feedback about UXSliderBar, feel free to post them to our community forum.

Cheers,

Erika

Using WebListBox in Line-of-business Scenarios

WebListBox is one of the controls included in WebEssentials collection. To learn more about WebEssentials, you can read this post or visit WebEssentials product information here.

As explained in the previous post, WebListBox can be used as input control and navigation control. In this post, I will discuss two of the most common line-of-business (LoB) scenarios where WebListBox can be useful.

Using WebListBox as Input Control

Let’s say you have an employee form where employees can choose their origin country in a list box. Of course, you can always use .NET ListBox to list all of the country options in the employee form, such as shown in the following screenshot.

With WebListBox, you can display the countries in more compelling presentation. For instance, it would be nice to have the country’s flag image in addition to the text.

Let’s start with the data binding and see how easy it is to bind an XML data to a WebListBox. Consider you have a Country data in XML, such as shown below.

<Countries>
  . . .
  <Country Id="49" Name="United Kingdom" Image="UnitedKingdom.png">
  </Country>
  <Country Id="50" Name="United States" Image="UnitedStates.png">
  </Country>
</Countries>

Similar to .NET ListBox, you can declaratively bind an XML data source to WebListBox using DataSourceID property. You can also specify the data member properties such as text and value data member. Unlike .NET ListBox, WebListBox provides more data member properties, such as NameFieldDataMember, TextFieldDataMember, ValueFieldDataMember, and ImageFieldDataMember. You can set these properties to the related attribute member in the XML data, for example, set TextFieldDataMember property to Name which will bind the text of each item in WebListBox to the Name attribute in the XML data. You can also set the ImageFieldFormatString property to specify the image folder path of the image field, e.g.: ./images/{0}.

The following code shows how to bind WebListBox to XMLDataSource and use the provided data member properties such as ImageFieldFormatString for easy data binding.

<ISWebEssentials:WebListBox ID="wlbCountry" runat="server" DataSourceID="XmlDataSource1"
     DefaultStyleMode="Minimalist" Height="200px" ImageFieldDataMember="Image"
     ImageFieldFormatString="./images/{0}" NameFieldDataMember="Id" TextFieldDataMember="Name"
     ValueFieldDataMember="Id" Width="150px">
     <LayoutSettings DisplayMode="TextAndImage" ImageSize="25, 15" ItemHeight="25" 
     ScrollMode="ScrollBar" />
</ISWebEssentials:WebListBox>

To show the text and image in WebListBox’s item, you can set DisplayMode property to TextAndImage. You can also specify the size of the image using ImageSize property. The following screenshot shows the result of the above WebListBox configuration. Compared to .NET ListBox in the earlier screenshot, the following employee form using WebListBox looks more intuitive and compelling.

Note that you can navigate through the country options using up and down arrow keys when the EnableKeyboardSupport property of the WebListBox is enabled.

Using WebListBox as Navigation Control

In addition to using WebListBox as input control, you can also use WebListBox as navigation control since it has been enhanced to include navigation functionality. When WebListBox is used as navigation control and users select an item in WebListBox, he will be redirected to a specific URL based on the item’s TargetURL property value.

In this post, I will show you how to use WebListBox as a navigation control in a travel agent website where users can browse and navigate through a list of hotels.

Consider the following XML data as the data source. It contains the name, image, and website URL of each hotel. You can bind this data to WebListBox using the data binding related properties, like described in the above Employee Form scenario.

<Hotels>
   <Hotel Id="1" Name="Oberoi Vanyavilas" Image="oberoi-vanyavilas.jpg" URL="http://www.oberoihotels.com/">
   </Hotel>
   <Hotel Id="2" Name="Triple Creek Ranch" Image="triple-creek-ss.jpg" URL="http://www.triplecreekranch.com/">
   </Hotel>
   . . .
</Hotels>

Besides the NameFieldDataMember, TextFieldDataMember, ValueFieldDataMember, and ImageFieldDataMember properties, you can also specify the TargetURLFieldDataMember property to indicate the field data member used as target URL of each item.

In the above XML data structure, the URL attribute specifies the website URL for each hotel. You can set the URL as the value of TargetURLFieldDataMember property. In addition, you also need to specify the TargetWindow property. When users click on an item in WebListBox, the target URL of the item will be opened in the target window, which is specified in TargetWindow property. The complete WebListBox configuration can be seen in the following code.

<ISWebEssentials:WebListBox ID="WebListBox1" runat="server" Height="99%" Width="100px"
     DefaultStyleMode="Natural" EnableKeyboardSupport="true" DataSourceID="XmlDataSource1"
     TextFieldDataMember="Name" ImageFieldDataMember="Image" ImageFieldFormatString="./images/{0}"
     ValueFieldDataMember="Id" NameFieldDataMember="Id" TargetURLFieldDataMember="URL" SelectedIndex="0">
     <LayoutSettings ItemHeight="80" ScrollMode="Scroller" DisplayActiveItemIndicator="true"
     TargetWindow="paneContent" DisplayMode="TextAndImage" ImagePosition="AboveText" ItemAlignment="Center" />
</ISWebEssentials:WebListBox>

To adjust the WebListBox layout with its navigation functionality, you can set several properties in LayoutSettings group, such as DisplayMode, ImagePosition, ItemAlignment, ItemHeight, and ScrollMode property.

WebListBox also includes a unique feature that shows a callout-style indicator to mark the active item, which is particularly useful in navigation scenario. To enable this feature, you set the DisplayActiveItemIndicator property of the WebListBox to True.

The following screenshot illustrates the result of the WebListBox as described in the above code.

When users select one of the hotels in the left pane, the navigation process will be invoked and the related URL will be displayed in the right pane. You don’t need to add any script or server side code, because the navigation process is handled by WebListBox automatically.

Conclusion

In this post, you have learned how to implement two of the most common LoB scenarios using WebListBox. The first is to use WebListBox as input control, and the other as navigation control. You can download the samples here, or click here to play with WebListBox samples from online demos.

For more information about WebListBox and its features, please visit WebListBox product page. If you have further questions or feedback, feel free to post them in Intersoft community forum.

Cheers,

Erika

Customize Visible Hours in WebScheduler

One of the feature request we often received in the past is the ability to specify the visible hours in Day, Week, and Split views. By default, the hours in these views start from 00:00 to 23:59. You can now customize the visible hours to start and end at specific hours.

To customize the visible hours, simply specify the visible start hour using ViewSettings >> VisibleStartTime property and visible end hour using ViewSettings >> VisibleEndTime property. These configurations are applied globally, means Day, Week, and Split view will use the same visible hours.

The following screenshot shows scheduler that starts from 9 AM and ends at 7 PM. Note that work week styles are still applied at the specified hours.

visible hours

<ViewSettings SelectedViewMode="Week" SelectedDate="03/11/2008 10:00:00" 
   VisibleStartTime="t0900"VisibleEndTime="t1900">
</ViewSettings>

 

Event rendering will be adjusted according to these settings. For example: the visible start time is set to 09:00 AM and visible end time is set to 07:00 PM. All events that fall within the date range will be rendered. Any events that start at 08:00 AM and ends at 10:00 AM will be rendered from 09:00 AM to 10:00 AM following the visible start time. The original duration of that event will not be altered; it can still be seen from the detail callout.

visible hours_event

The total of events that occur in a date is displayed as the tooltip of the date in the calendar area. When there is only one event that occurs in the specified date, the title of the event is displayed as the tooltip. When custom visible hours are specified, some events might not be included in the hour area. Although some events are hidden, users can still see the total of all events that occurs in the date in the tooltip of the date in the calendar area.

visible hours_calendar

If you have any feedback regarding this feature or you think this feature could be further enhanced, feel free to drop your comments or post your opinion in our forum. We’d be glad to hear them. Happy scheduling, everyone!

Detail Box Paging in WebScheduler

In previous version of WebScheduler, detail box will be displayed when you click More in Month view. In the latest version, detail box is also used in other views (Day, Week, and Split views) when client paging is enabled. In Day, Week, and Split views, detail box will be displayed when users click paging arrow indicator in hour area.

Detail box will adjust its height based on the number of events that occurs in the event block. If there is a lot of event, it is easier and more convenient to enable paging in the detail box.

To enable paging in detail box, simply set LayoutSettings >> EnableDetailBoxPaging property to True. The page size can be specified in LayoutSettings >> DetailBoxPageSize property, which by default is set to 5. This means the detail box will hold maximum 5 events on every page. Note that when detail box paging is enabled, all views that uses detail box will use the configuration.

Detail Box Paging

Client Paging in Day and week view

As explained in previous posts, WebScheduler 3 focused on performance and usability improvements. To improve the performance when rendering events, especially when large dataset is used, Client Paging feature is introduced in WebScheduler.

In Day and Week view, events that occur on the same period are rendered as overlapping events. However, when too many events occurred on the same period, it is difficult for user to see and differentiate these events, as seen in the below screenshot.

client paging day and week view2

Client paging can be enabled in Day and Week view using ViewSettings >> DayView | Week View >> EnableClientPaging property. Client paging is view dependent, which means it can be enabled in one view and disabled in other views.

Both Day and Week views have the same layout structure, which divided to all-day area and hour area. Client paging applied to each area are implemented differently, following the nature layout of the area.

Client Paging in Hour Area

Before we continue, let’s synchronize the term. Events that occur in the same period is called overlapping events and all of the events are considered as one event block. In the below screenshot, event blocks are marked by yellow and purple square. Each event block is divided to several columns, will further called overlapping blocks (marked by pink square), depends on the start time and duration of overlapping events in the event block.

client paging in hour area2

In hour area, the maximum number of overlapping events displayed in an event block is determined by ViewSettings >> DayView | WeekView >> EventBlockSize property. In the above screenshots, 8 overlapping events occurs in the same period (marked by yellow square). If client paging is enabled and EventBlockSize property is set to 2, events rendered in the first two overlapping block will be displayed and the other events will be hidden. A small paging arrow indicator will be displayed at the upper right corner of the block. When the indicator is clicked, detail box that lists all overlapping events included in the event block, will be displayed.

client paging in hour area3

Client Paging in All-day Area

The following screenshot shows overlapping events in all-day area. The start time and duration of each event determines the overall event layout in this area. In the screenshots, eight rows are needed to render all the events.

client paging in all day area

When client paging is enabled, you can determine the maximum number of rows in all-day area using ViewSettings >> DayView | WeekView >> AllDayEventPageSize. If the property is set to 5, events rendered in the first five rows will be rendered and the other events are hidden. A paging arrow indicator is also displayed at the bottom of the area to indicate there are more events that occur in the specified time. When it is clicked, all the hidden events will be displayed.

client paging in all day area2

Feel free to try client paging samples in our live demo and post your questions and feedback in our forum.

Time Interval in WebScheduler

In Day, Week, and Split view, the scheduler part is divided into two areas: all-day area and hour area. In previous version of WebScheduler, the hour area is always displayed in 30-minutes interval and cannot be modified to other time interval options. In version 3, WebScheduler allows you to alter this configuration with various predefined time interval options.

The available time interval options are 10 minutes, 15 minutes, 30 minutes, and 60 minutes, which can be set using ViewSettings >> DayView/WeekView >> TimeInterval property.

15-minutes time interval in Week view

The screenshot shows 15-minutes interval in Week view. In 15-minutes time interval, one hour duration is divided into four rows; each row indicates 15 minutes duration. Note that the height of all events is also adjusted to the active time interval in the view.

The time interval specified in Day view can be different with the one specified in Week view, however since Split view uses the same configurations as Day view, the time interval options specified in Day view will be used in Split view.

When time interval options are listed in context menu, users can easily change the active time interval by selecting one of the options in the context menu. Once it’s changed, WebScheduler will automatically re-render its view and events, adjusting to the selected time interval. To include the time interval options in context menu, simply enable IncludeTimeIntervalInMenu property.

The time interval options listed in context menu can be seen in this screenshot. The active time interval is indicated by a checked sign in front of it. When the property is disabled, these options will not be included in context menu, thus users are not allowed to change the active time interval of the view.

Multiple cell selection is an innovative feature which enables user to block a certain date range and quickly create a new event based on the selection. Now, it is enhanced further to work in conjunction with time interval feature. When users select multiple cells, the duration of selected date range will automatically be adjusted to the active time interval. The duration of the selected date range can be easily seen in the callout header.

You can also set time interval programmatically in client-side, using SetTimeInterval function.

function SetInterval()
{
     var s = ISGetObject("WebScheduler1");
     s.SetTimeInterval("Minutes60");
}

In Build 2, scheduled to be release this end of January 2010, SetTimeInterval API is enhanced, adding one parameter, viewMode. It basically enables you to select which view mode and what time interval to be applied. For example: if the current view mode is Day view and you want to apply the 60-minute interval to Week view, you can use the following code.

function SetIntervalToView()
{
     var s = ISGetObject("WebScheduler1");
     s.SetTimeInterval("Minutes60", “Week”);
}

WebScheduler will smartly detect whether the assigned view is the current view. If it’s not, the scheduler will not be refreshed, thus preventing unnecessary processing. The 60-minutes time interval will be rendered automatically in Week view when users navigate to Week view. If the viewMode parameter is not specified, the new time interval is applied to the active view.

As explained above, WebScheduler’s time interval is view dependent, which means you can have different time interval configuration in different views. However, there are certain scenarios which require synchronized interval settings. SynchronizeTimeInterval property is introduced in Build 2, offering built-in time interval synchronization. This means, when users change the time interval in Day view to 15-minutes and switch to week view, the time interval in Week view will be set to 15-minutes as well, and vice versa.

Using time interval feature implemented in WebScheduler, users can view the schedule easier and more flexible.