Server Side Paging in WebScheduler Timeline view

Performance and scalability are among our strongest focus in WebScheduler v3 release. Since Timeline view is capable to show a wide range of data (from minutes to quarters), loading all the data at once will significantly degrade the server and client performance and ultimately slowing down the application responsiveness in overall. The problem is even more noticeable when the loaded data is relatively huge and when Quarter view mode is used.

WebScheduler 3 addresses the performance bottleneck from top to bottom by introducing smart client paging (EventPageSize),  ViewPort paging, and server paging. The smart client and ViewPort paging are designed to provide paging solution for the client-side which dramatically improves user experiences. I’ve discussed the client paging features in my previous blog post.

In this post, we’ll learn the new server paging capability in WebScheduler 3, and how you can implement it in your application. Let’s take a clear and deep down look at it.

Concept

Designed to be an enterprise-ready scheduling component, we’ve added numerous new features in WebScheduler 3 to control the data retrieval mechanism. One of the most powerful features is server paging.

Server paging is an innovative feature built to eliminate sluggish performance due to the large data download while working in Timeline view mode. With server paging enabled, WebScheduler will download only a small chunk of data based on the viewport during initial load and intelligently requests more data as users scroll downward. This means reduced page load time and increased overall application responsiveness.

Not only that – you can also combine the server paging with smart client paging, JSON serialization and other features to boost your Scheduling application performance even more.

The following screenshot shows the WebScheduler with server-side paging enabled. Notice that it will load data on demand as needed.

Benchmark Result

To compliment this post with a more realistic performance comparison, I decided to do some simple testing and provided the screenshots that show the data and response time benchmark of server-side paging. In this benchmark, I’m using HighPerformanceScheduler sample which is included in the WebScheduler’s sample.

Also keep in mind that the HighPerformanceScheduler sample is using database with 3000+ records of events with 66 resources. All events are purposely recorded within 1 month to load test the WebScheduler performance in Timeline month view.

Using HttpWatch Professional 6.1, we can inspect the data size and the content returned from server. Notice that WebScheduler with server paging enabled loads only 176KB of data. That’s nearly 10x smaller when comparing it with server paging disabled which yielded 1553KB (1.5MB).

In addition, the server paging also significantly reduces data transfer time. For instances, assuming if you have 100kb/s internet connection, the load time with ServerPaging enabled will be done in approximately 1.7 seconds. Contrary, you will need to wait at least 15 seconds or more without ServerPaging.

The beauty of server paging is that it also keeps your browser light and responsive by rendering only a small amount of data at a time. Instead of loading all 3000 events at once, WebScheduler makes efficient use of resources by loading required events on demand when the page is scrolled downward.

You might be wondering how WebScheduler detects which data to be loaded in the next request. That is where smart client paging and ViewPort paging comes to rescue. To learn more on the new performance improvements in WebScheduler 3, please see the video below.

Implementation

And here’s the best part. Taking advantage of this powerful feature isn’t rocket science – thanks to the WebScheduler’s bare-metal architecture. All you need to do is simply enabling the EnableServerPaging property in ViewSettings under the TimelineView property group.

Note: Server paging feature is only applicable when the client paging is set to ViewPort or Both. For certain scenarios with smaller data (less than a thousand of records in a month view), the server paging may not be necessary enabled so that the complete data can be transmitted in a single page load. In such scenarios, the client paging will perform data rendering immediately.

That’s all for now. I’d love to hear any comments, feedback or thoughts about this feature. Feel free to drop your comments here or post it to our forum.

Warm Regards,
Budianto Muliawan

Timeline view’s Client Paging in WebScheduler 3

Hello everyone, Happy New Year 2010! In this post, I’m going to discuss one of the most exciting features that we added in the recently released WebScheduler. As you may already aware, WebScheduler 3 is strongly focused on performance and usability, especially when used in enterprise applications where they require to display large dataset in consistently fast performance. The new Client Paging feature in WebScheduler 3 elegantly addresses many of these performance issues.

In the following section, we’ll learn how client paging work specifically in Timeline View (the other views will be discussed in future blog posts). We introduce several client paging modes which can help improving overall application response based on your scenarios.

Let’s start by enabling the client paging in Timeline view. We’ve made it extremely easy to use, so that you can enable the feature by simply setting EnableClientPaging property to true. The property can be found in ViewSettings, then expand TimelineView property.

After enabling the client paging, the next step is to choose the client paging mode that is more suitable to your application scenario. WebScheduler 3 introduces three client paging mode to choose from:

1. Paging based on number of events
   Called EventPageSize mode, this paging mode restricts the numbers of event displayed in each Timeline cell. If the total number of events exceeds the value of the EventPageSize property, an arrow indicator will appear notifying that more events are available. Click on the arrow indicator to reveal the complete events in the Timeline cell.To use this paging mode, simply set the ClientPagingMode property to EventPageSize.

   
   

2. Paging based on screen viewport
   Called ViewPort, this paging mode will render all events based on the currently visible viewport. This means that even if you have hundreds of resources, WebScheduler will present your events in consistently fast performance. When scrolled down, WebScheduler seamlessly render the complete events of the new visible viewport. As the result, this advanced paging mode significantly improves overall responsiveness and user experiences.
   You should consider using this paging mode if you have fairly large number of resources bound to your WebScheduler.

   To activate this mode, set the ClientPagingMode property to ViewPort.

   

   

3. The combination of both event size and viewport paging
   This mode combines the best of both EventPageSize and ViewPort client paging for the most efficient event rendering. With this mode, the events will be rendered based on the visible viewport and also be restricted based on the number of allowed events. This mode is best used for applications with considerably large number of resources and events bound to WebScheduler.

   To enable this mode, set ClientPagingMode property to Both.

   

<!–[if gte mso 9]> <![endif]–><!–[if gte mso 9]> Normal 0 false false false EN-US X-NONE X-NONE <![endif]–><!–[if gte mso 9]> <![endif]–> <!–[endif]–>Timeline events are displayed when paging arrow indicator is clicked

At this point, you should have learnt the new key features in WebScheduler 3 that elegantly address critical performance limitations in web-based scheduling application. So if you’ve got large, enterprise data to be presented in scheduling interface, go ahead, download and try WebScheduler 3, and impress your users big time!

Last but not least, you can find out more information on WebScheduler 3’s new features here and the live demos here. For questions and feedback, please drop by our forum.

Happy scheduling!

Warm Regards,
Budianto Muliawan.

Timeline view enhancements in WebUI Studio.NET 2008 R2 SP1

Timeline view feature first appearance is in WebScheduler 2.0 under WebUI Studio.NET 2008 R2. Now with the release of WebUI Studio.NET 2008 R2 SP1, there are couple of new advanced features in Timeline – all the more reasons for you to upgrade.
These are the Timeline’s major new features and enhancements:

1. Timeline views.
2. Timeline drilldown capability, up to five levels.
3. Drag & drop enhancement.
4. Enlarge Editing Form’s description textbox.

Timeline views
Here is the fantastic feature from Timeline that you can rely on. Right now Timeline includes 4 views that you can choose based on your scenario. To give you better ideas about this feature, I will show you the views one by one.

Timeline Month view
In this view, you will be able to see the event(s) / schedule within 1 month showing day per day. Using drilldown function you can have Quarter view from Month view. I will explain about how you can achieve Quarter view in Timeline drilldown section.

Timeline Month view

Timeline Week view
Week view is just like Month view, the difference is in Week view, and you will only see the event / scheduler within 1 week. The Week view speciality is there are 2 week option that you can choose, FirstDay and WeekNumber.

FirstDay option, the days of the month will be divided by 7 so each month will have 4 weeks. Week FirstDay starts on date 1 every month. Each week will have 7 days, especially on the fourth week, the days is vary depends on how many days in the selected month (for example, if it is January, then the fourth week will have 3 days, starts from 29 to 31).

firstday-weekview

WeekNumber option, the week appearance will follow the selected week number. For example, the current WeekNumber is 10 so the appearance days will be March 2nd to March 8th.

weeknumber-weekview

Timeline DayHourly view
This is the default view in Timeline. In this view, you can see the event(s) / schedule from hour to hour within NumberOfDays and range of time.

Timeline DayHourly

Timeline Day15Minutes view
As said in the title, this view allows you to see the event(s) / schedule from 15 minutes to 15 minutes of the selected date.

Timeline Day15Minutes

Timeline Quarter view
This is a new view that we introduce in SP1. It displays the schedule within quarter from day to day. You can activate it by “zoom out” from month view.

Quarter view

Timeline drilldown
With a lot of views in Timeline to support many different scenarios, we came up with a new idea to simplify the views management. For instance, the initial view of the Timeline is set to Month mode. Next, what if users would like to switch to Week mode to see the events data in more details? The answer is “runtime data drilldown”, which allows users to perform “zoom in” or “zoom out” in a single click.

“Zoom in” means narrowing the view into more details whereas “zoom out” means widening the view into more general. So clicking on “zoom in” in Month view will switch the Timeline to Week view, Week view will switch to DayHourly and finally DayHourly will switch to Day15Minutes view. Clicking “zoom out” is the contrary.

drilldown

Drag and drop enhancement
As you might already aware, Timeline’s row is very flexible. It can be resized based on the amount of the events.  Using drag and drop, we can update the Timeline’s event from Resource A to Resource B. So, in order to have a good drag and drop capability, the dragged Timeline’s event should be placed in the right position of the rows. To accommodate this requirement, we have enhanced the drag and drop mechanism to ensure the dragged Timeline’s event to appeared in the correct row.

Drag and Drop

Enlarge EditingForm’s description textbox.
Users often write a quite lengthy description for their events. In this SP1, we have enhanced the Editing Form to make it easier for users to write long description. The enhanced EditingForm.aspx now includes new “maximize” icon beside the description caption. Simply click on the icon to enlarge the description’s textbox.

Enlarge description textbox

I hope you enjoy the enhancements that we’ve made into WebScheduler 2.0 SP1. Let me know if you have any questions or feedback about Timeline view and related features.

Regards,
Budianto.