Virtual Group Paging with Client Binding – In Depth

As we’ve just released WebUI Studio 2009 R2 service pack, you can now download and try many exciting new features that we included in the release. Read more about the new release here.

One of the much anticipated new features is the virtual group paging capability that we shipped in the service pack, which I’ve discussed in my previous blog post. In this post, I’ll show you the step-by-step walkthrough to use the virtual group paging along with client binding in your application.

The following walkthrough presumes you have been familiar with the client binding and batch update feature that introduced in the initial WebGrid 7 release. To save time and space, this walkthrough will be focused only on the new group paging features. If you would like to see the walkthrough for client binding and batch update, please refer to WebGrid 7 online documentation.

Configuring WebGrid for Virtual Load and Group Row Paging

In this walkthrough, I’m going to use the ClientBinding_SmartBatchUpdate.aspx sample that shipped in the initial WebGrid 7 release. To work with the sample, launch the C# Samples which is accessible from WebGrid 7 program group in the start menu.

Once you got the sample ready in your Visual Studio IDE, click on the WebGrid instance and open Property Window.

The sample used classic paging mode, so our first step is to change the paging mode to VirtualLoad since the group row paging is an integral part of VirtualLoad paging. To set the paging mode, expand LayoutSettings and set the PagingMode property to VirtualLoad. See below.

The next step is to enable the group row paging, customize the group row paging size, and optionally enable the preload group totals as well as other client binding related settings.

Still in the Visual Studio’s Property Window, expand the ClientBindingSettings property. You’ll find most of the client-binding related settings centralized in this property group. Enable the group row paging by simply setting its property to true and configure other settings to follow the screenshot below.

We’re done with the WebGrid-level configuration.

Configuring WebGrid LINQ Provider

After configuring the WebGrid to use proper client binding settings and group row paging, the next step is to configure the new LINQ provider in your application.

To use WebGrid LINQ provider in your application, add the ISNet.Data.Linq assembly from WebGrid installation folder to your application’s Bin folder. If you’re installing using default setting, the new assembly should be located in C:\Program Files\Intersoft Solutions\WebUI Studio for ASP.NET\WebGrid.NET 7.0\Bin.

Note that this is a new assembly shipped in the service pack installer. Download the latest service pack installer here, or obtain the assembly in the provided samples in the last section.

Handling Data Operations with LINQ-to-SQL Classes

Since we’re using client binding mode with WebService datasource, we need to specify the ServiceUrl property to the path of the web service that handles data operations requested by WebGrid. The sample used in the walkthrough is using WebService.asmx.

In this walkthrough, we’re going to define the service methods used to perform data selection and batch update. The select method is defined in SelectMethod, while the batch update method is defined in BatchUpdateMethod. The property settings can be seen in the screenshot below.

After wiring the service methods, the final step is to write each web method in the web service that corresponds to the specified service methods above.

Open the code-behind file of the web service to your Visual Studio IDE by right clicking on App_Code\WebService.asmx.cs then choose View Code.

Write the code for the data selection such as below.

[WebMethod]
public object GetPagedBugs(DataSourceSelectArguments selectArguments)
{
    BugTrackerModelDataContext context = new BugTrackerModelDataContext();
    context.DeferredLoadingEnabled = false;

    WebGridDataProvider provider = new WebGridDataProvider(context.Bugs.AsQueryable());
    object data = provider.Select(selectArguments);

    if (data != null)
         return data;

    throw new InvalidOperationException("Unsupported operation type!");
}

So simple, isn’t it?

As I’ve mentioned in my previous post, the Select method of the WebGrid’s LINQ provider automatically handles all data operations – from data paging, grouping, filtering, aggregate computation, group header selection, and group row paging.

I’ve also mentioned that the LINQ provider supports data transaction operations too – such as Insert, Update, Delete and BatchUpdate. The following code shows how to perform batch update using the new data provider.

[WebMethod]
[GenerateScriptType(typeof(Bug))]
public TransactionResult UpdateBugs(List changes)
{
    BugTrackerModelDataContext context = new BugTrackerModelDataContext();
    WebGridDataProvider provider = new WebGridDataProvider(context.Bugs.AsQueryable());

    return provider.BatchUpdate(changes);
}

It’s as simple as that – thanks to the bare-metal architecture built on the client binding, batch update, virtual load paging and the LINQ data provider to produce this level of component integration.

Now save your changes and view your page in the browser. Try to group the column by Operating System and you should see something like the following.

So far, you have learnt how to enable group row paging, customize the page size, activate group total preloading, and use the new LINQ data provider to simplify client-binding data operations. Your next step is to test the new features and implement them in your web apps.

Download Samples

In case you haven’t got the chance to download the full service pack installer, you can quickly download and install the latest bits right from your Update Manager. However, it’s highly recommended that you to go through downloading the full installer to enjoy numerous new and enhanced samples that we included in the release.

You can find the new samples that I used in the walkthrough here. To try it, simply copy the entire folder into the root project of WebGrid C# Samples. I’ve excluded the references to WebGrid and other framework assemblies to reduce the download size, although I decided to include the ISNet.Data.Linq assembly for your convenience.

Enjoy and happy developing!

All the best,

Jimmy.

Introducing Virtual Group Paging In WebGrid 7

We’ve been heavily focusing on performance and scalability aspects in the last two versions of WebGrid. As you may have already aware, WebGrid Enterprise 7 introduces numerous noteworthy new features such as client binding, JSON serialization, virtual rendering, efficient batch update and more – which elegantly address performance issues commonly found in enterprise applications.

The next release of WebGrid will still be strongly focused in various areas of performance to deliver even better data visualization component that is not only rich, but also speedy and highly scalable. Many of the new enhancements in the next release are designed to support combination of multiple advanced features, such as using client binding together with virtual load paging, grouping and data aggregates.

This post details some of the key enhancements to give you an insight for the usage in your applications.

Preload Group Totals

WebGrid 7 introduces a new client binding model where the data rendering is performed in the client-side instead of server-side. While there are many benefits with client binding, it falls short when it comes to extensive data aggregation such as calculating group totals on several hundreds or thousands of records.

The upcoming release will include a new capability to preload the group totals during server-side data fetching process, and hence eliminating the needs to compute heavy aggregation in the client-side, while maintaining the data footprint in a good balance.

This new feature also works along side with virtual load paging, which makes more sense on the “preloading” factor. Your users would definitely like the ability to see all group totals without have to expand each group to retrieve the rows. See the following screenshot for details.

When using ServerDataSource type, the group totals will be automatically computed without additional user codes. Simply enable the PreloadGroupTotals property in ClientBindingSettings should do the job.

This new feature is also consistently supported by other client binding data source such as Web Service and WCF Service. Read the explanation in the latter section.

Group Row Paging

One of the advanced features that truly sets WebGrid apart from other Grids is its VirtualLoad™ paging capability. When enabled, virtual load retrieves only the first subset of data and then smartly loads the rest records as users scroll downward. The virtual load also uniquely supports grouping condition by displaying only the group headers and group totals in the first load. When users expanded a group row, WebGrid loads the child rows on demand via AJAX callback and then seamlessly inject it into the group row element. This gives users the feel of working with desktop apps.

Everything is good until your users accidentally grouped a data resulting with large amount of rows per group. It becomes worse when the Grid is working in client-binding since the rendering operation is done in the client-side. Imagine looping through thousands of records to perform string-extensive operations, the browser itself naturally refuse to complete the operation. And hence, you’ll get a prompt that ask you whether you want to stop or continue the script. Although you can choose to continue the script, it will still take several seconds to complete. This is certainly not a desirable result for most of today’s users who expecting applications with rich experiences.

Toward that end, we’re researching a solution that will not only address the performance issue permanently, but also works consistently across existing features and certainly with an intuitive user experience. As the result, group row paging is born.

With the new group row paging capability, you no longer have to worry how much data your Grid is presenting, whether they are grouped or not, whether they are filtered or not, WebGrid will display your data in the same timely fashion – consistently. To understand how group row paging works, please see the following image which also shows the new group row paging user interface.

The above sample is using GroupRowPageSize=10 configuration, which means only 10 records should be fetched in a time. As shown above, the new group row status enables users to easily understand the current state of the group row. It’s especially useful when the GroupRowPageSize is set to a larger value such as 100 (50 is the default) as users can see the current status without have to scroll back and forth to the group header. The new status bar also serves as command bar and allows room for improvements in the future, such as adding more buttons related to the group’s context.

Compared to the original sample without group row paging, the same group with 1,000+ rows now loads in a fraction of second, and that’s about 100x faster. The group row paging will consistently support multiple groups and other grouping-related features too.

It’s also noteworthy to mention that other useful features such as data editing, batch update, and row selection persistence will continue to work flawlessly along with group row paging.

Virtual Load Support For Web & WCF Service

Still around client binding and virtual load, we’ve now added virtual grouping (means virtual load + grouping) support for WebService and WCF Service as well. In the current release, the grouping process will invoke a Select command against the underlying WebService and retrieve all groups and rows from the database, which ultimately transmit 1-2MB size of data to the client. In most cases, you’ll get a server-side exception when the data exceeded 2MB because .NET’s JSON Serialization limits it to only 2MB by default.

In the next release, WebGrid will automatically send a new SelectGroup option in the select arguments when it attempts to perform grouping, or perform data selection in grouping conditions. This will allow developers to handle the group retrievals based on the select operation mode in the server-side and returns only the groups information to the client.

Our experiment shows that virtual grouping using Web Service or WCF Service is at least 4x faster and much more efficient than using ServerDataSource, especially when the processed data is huge. That is possible because developers have granular control over the data selection process, and in this case selecting only the groups from the backend directly without have to deal with the data rows.

The following code snippet demonstrates how it works.

if (selectArg.OperationType == SelectOperation.SelectGroup)
{
     var groupResults = dataSource.GroupByMany(selectArg.GroupByExpression);     
     return ProcessGroupRows(groupResults, selectArg);
}

Notice that the select operation type and group expression will be provided in the select arguments to allow developers to handle their data selection. The above sample is using LINQ to SQL to process the grouping request, which returns only the group rows required by WebGrid.

The two-minutes video below shows the improved performance and the user experiences when virtual load, group row paging, client binding and batch update are enabled together.

Furthermore, the new PreloadGroupTotals and GroupRowPaging feature that we discussed earlier can also be used with WebService/WCF Service data source type. In the client-side, WebGrid will perform the data rendering in consistent fashion, such as the new group status interface and the group loading behaviors.

WebGrid LINQ Data Provider

In addition to the performance and UX improvements, we’ll also ship LINQ to SQL data provider for WebGrid in the next service pack release. The new data provider greatly simplifies the codes to perform data operations using LINQ to SQL, specifically when paired together with WebGrid’s client binding.

The WebGrid LINQ data provider minimizes complexity and slashes dozen line of codes into one line. See the following comparison.

The following is the original codes that we shipped in our WebGrid 7 samples.

And here’s the new approach using WebGrid LINQ Data Provider.

One code rules it all – that’s what I really like about this new data provider. The generic-based class architecture enables you to easily instantiate the provider on any of your data model by simply passing the data type – making development more efficient and fun!

In this first version, the WebGrid LINQ provider will automatically handle the following select operations during client binding:

• Data Selection
• Sorting
• Filtering
• Grouping
• Paging and Total Rows Count
• Group Selection
• Group Row Paging
• And yes, group totals too.

In addition to data selection, the provider also includes full-featured transaction operations, such as:

• Insert
• Update
• Delete
• Batch Update

And now comes the best part, the LINQ data provider is free for all WebGrid licensees. To start using it in your application, simply add reference to the new assembly named “ISNet.Data.Linq” which can be found in WebGrid’s installation folder. When the enhancements are rolled out in the next service pack, I’ll post more blogs to cover how to use them in more details.

Summary

This blog post gives you an insight and early look on some key enhancements that we’re currently working on for the next WebGrid release. Customers who wish to test drive these new enhancements, please obtain the nightly build (and yes, we have prepared some new samples too!) by directing your email to our Support Team.

We hope customers to participate in the beta testing and give feedback, so we can review and take account your feedback before wrapping up the final features. You can send your feedback to Feedback Team for private discussion (if your feedback includes confidential information related to your apps etc), or to Community Forum for open, shared discussion.

All the best,
Jimmy.

First look: WebGrid Enterprise 7 R2

As announced in our recently released newsletter, WebUI Studio 2009 R2 will ship with an even refined WebGrid featuring a vast array of new features that you’ve been asking for months. This post will further unveil the new amazing stuff that we’ve made available in WebGrid 7 R2.

If the previous release was focused much on performance and major functionality features, then the upcoming release balances it well with bunch of visual goodness and impressive user interface features that you would love to use.

Well, let’s get it started!

Three new sleek visual themes

Designing a professional theme isn’t as easy as it seems to be – especially on the scale of WebGrid which contains dozens, if not hundreds, of user interface elements to be styled. Unlike the previous themes, each new theme now includes the styles for context menu, edit controls, ribbon, and pivot charting UI in addition to the table styles.

With the recent release of Windows 7, I suppose many of you, as professional developers, must have running on Windows 7 already. If you loved what you see in Windows 7, then you gotta love WebGrid’s new Windows 7 theme. See the screenshot below.

If you have been seeing too much of blue-tone colors, you may want to try something bold – giving a different and unique feel to your applications. You can now choose either a glassy, bold black theme, or a clean, metallic silver theme.

The following images show the pivot charting interface using the black theme and the tables using silver theme – all designed by our professional artists. Click on the image to see the large version.

Best of all, it only takes a property set to switch your existing theme into one of these beautiful themes. And since the themes are built into the default styles, WebGrid doesn’t produce any additional CSS output and thus keeping your page slim and fast as it was before.

Win7-style column action UI

An enterprise Grid no longer suffice with only advanced functionalities. Today’s users demand more – great enterprise features and also intuitive user experiences making their daily tasks even easier and simpler.

That said, WebGrid 7 R2 introduces a nice UI feature to do just that – new column action interface similar to Windows 7 Explorer. We’re glad to be able to make it happen in this release due to huge demand and requests from our valued customers.

So what exactly is column action? It’s a small visual hint that appears when you hover on a column. When clicked, certain options that applicable to the column’s context will be displayed. The column action essentially allows user to conveniently access on column-related actions through a single click. Haven’t got the big picture yet? Try it in your Vista or 7’s Explorer, or see the following shot.

The above sample shows the basic column action, which displays WebGrid’s built-in context menu by default. The column action style can also be customized – which is also well styled in existing and new themes.

Another interesting capability that you will really love is the possibility to customize the entire column action behavior. For a quick instance, how about showing customized predefined date filtering commands? Or possibly an embedded calendar allowing users to select a date and see all files modified by that date?

Well, all the above scenarios can be elegantly done by overriding the new OnColumnAction event. And even better, you can do beyond that and anything that only your creativity limits. The following image shows the new WebGrid sample that displays a custom context menu in the column action UI.

I hope you’ve got your appetite boosted thus far 🙂 More impressive features are following.

New WebCalendar Custom Editor

In addition to many UX enhancements, this new WebGrid release also revisits some basic and common functions such as editing controls. Although we already have built-in Calendar edit type since version 3, it quickly decline on user’s expectations due to its outdated UX and navigation. As the result, the new WebCalendar custom editor is now introduced.

The new WebCalendar custom editor is based on our flagship WebScheduler’s calendar, which runtime is loyalty free when integrated with WebGrid. The WebCalendar provides numerous advanced features not available in the built-in Calendar edit type – such as multiple months display, show week numbers, strong localization support, date format customization and much more.

The new WebCalendar editor also has revolutionary navigation built into its main UX. Instead of showing a long list of years to choose from, WebCalendar groups the years and show them in the main WebCalendar’s user interface – allowing users to conveniently navigate between months, years and decades in a more intuitive way. And the best of all, it shows 2x faster than the built-in Calendar – thanks to the lightweight component design.

WebTextEditor Integration

Rich text editing integration is probably one of the most requested features since 2004 when we first pioneered the custom editor architecture that introduces robust interfaces to manage existing server-side controls as WebGrid’s edit control. One of our goals was to create a truly rich editing environment where users can write rich formatted text, perform spell checking, uploading files asynchronously – all within the WebGrid’s sophisticated inline editing environment.

The vision of rich text editing integration is successfully completed in WebGrid 7 R2 with the addition of new WebTextEditor custom editor.

Released in 2009 R1 earlier this year, WebTextEditor is perhaps the world’s most advanced rich text editing component where all functions are so thoughtfully designed and highly integrated – that includes inline spell checker, built-in media gallery, natural UX design and real-time file uploading (hey, you can even see the progress in the sleek-designed status bar) as well as dozens of innovative features not available else where! And the best part is that you can now enjoy all these powerful features inside WebGrid’s inline editing.

To give you a big picture on the editor integration, please see the following screenshot taken from the new reference sample.

Since the WebTextEditor is a pure ASP.NET server-side control, you can easily customize everything – from the design aspects, behaviors to any single feature. When integrated to WebGrid, notice that it’ll automatically add the “Update” and “Cancel” command in the toolbar.

Also please be noted that WebTextEditor is sold separately as a standalone product, which is part of WebUI Studio 2009 Suite/Subscription. If you’ve got an active subscription, rest assured you’ll enjoy the new editor integration support without any additional costs when it comes out.

And More

There are so much more that can’t be detailed in this single post. Some noteworthy top-requested features are improved designer, context menu customization, new client-side events for batch update and UI customization, advanced column filter, and XHTML document type support.

By now, you have learnt some of the top features available in the upcoming WebGrid release. I also hope that it won’t be taking too long to pass the new bits to your hand so you can get started with all these exciting new features.

Got questions, comments or feedback? Please post it in the blog’s Comments section. Thank you!

All the best,
Jimmy.

Physical database update in smartBatchUpdate

Last month, I’ve posted an in-depth discussion on SmartBatchUpdate, a new major feature that we’re going to introduce in the next major version of WebGrid. While the previous post is more focused on the UI/X aspects, this post will focus more on the server-side, its programmability and behind-the-scene process on the batch update.

SmartBatchUpdate™ provides sophisticated implementation to automate the batch updating process to the physical database.

The automatic updating feature significantly reduces development time – as you are not required to write any codes to perform the batch update, or very minimal efforts when you need to customize the updating process in more advanced scenarios. To understand the physical updating concept better, please see the following illustration.

Understanding Batch Update Process

As shown in the illustration above, the physical update has several processes such as detailed in the following:

• Automatic object updates

This setting is enabled by default. This feature will attempt to automatically apply the submitted pending changes to the intermediate data source that hold the objects during the binding process.

For instance, when WebGrid is bound to DataSet or DataTable, your pending changes will be applied and then mapped to your data source. This enables you to simply call a line of code to perform the physical updates via DbAdapter.

In more advanced scenario, such as when WebGrid is bound to unstructured data source or custom object, you can disable this feature by setting the AutomaticObjectUpdates property in BatchUpdateSettings to false.

In addition to single table support, this feature is also designed to support nested hierarchical tables that linked through Referential Integrity. This feature makes advanced scenarios possible such as cascading inserts and other scenarios related to hierarchical tables.

Please note that WebGrid doesn’t perform physical update in this process.

• BatchUpdate server side event.

WebGrid provides a new server side event named OnBatchUpdate, which is invoked when the pending changes are required to be submitted to physical database.

When bound to data source other than data source controls, developers can handle OnBatchUpdate server side event to write the codes required to update the changes into physical database.

When bound to updatable data source controls – such as AccessDataSource, ObjectDataSource, and others – WebGrid will handle all physical updates automatically, given that ReturnValue is true in OnBatchUpdate event. The ReturnValue is true by default, which can be set to false to cancel automatic physical updates.

OnBatchUpdate server side event provides BatchUpdateEventArgs in the event argument, which is useful for developers who would like to customize the physical updating process, such as in the case of custom object binding.

• Partial errors support.

In addition to solid batch update architecture and automatic object updates, SmartBatchUpdate™ is also equipped with support for partial errors, making it the most advanced and reliable solution for client-side data editing application.

Partial errors occurred when one or more changes are failed to be updated while there are also some successful updates. Partial errors will not occur when all changes are failed.

With partial errors support, user can make changes with confidence, without have to worry that error in one of the changes will cause all changes to fail. This means that WebGrid is able to isolate erroneous changes, and continue to update the next changes that are unrelated to the previously failed changes update.

The following image shows a WebGrid with partial errors response. The error detail for each failed updates are shown in the message box, making it easy for end user to review and revise the errors.

 

For more control over partial errors response in the client side, you can handle the OnBatchUpdateSuccess client side event and access the rowErrorXml parameter to get the error detail on each failed update.

Various Datasource Support in Batch Update

WebGrid Enterprise 7 supports physical database updates in various scenarios, such as when bound to different type of datasource, hierarchical tables configuration, and more. The following list describes the supported scenarios in more details:

• Traditional Binding (ADO.NET DataSet and DataTable)

When bound to ADO.NET-compatible data source such as DataSet and DataTable, you will need to write codes in OnBatchUpdate server side event to update the changes to database.

However, the required codes should be very minimal as ADO.NET already implemented batch update at data access level. Developers will then be able to simply invoking a single Update method to process all changes, which were previously mapped during Automatic Object Updates process.

The following C# codes show how to update all changes that bound to a DataTable object.

void WebGrid1_BatchUpdate(object sender, BatchUpdateEventArgs e)
{
CustomersTableAdapter daCustomer = new CustomersTableAdapter();

DataTable dt = (DataTable)WebGrid1.GetCachedDataSource();

daCustomer.Update(dt); // updates all changes to database

}

• Declarative Binding (Datasource Control such as SqlDataSource)

Data source control is the most ideal data binding concept in ASP.NET that provides clear abstraction between UI and data logic. Introduced in .NET 2.0, data source control allows you to bind data in declarative markup, saving you from tedious tasks and lengthy codes.

SmartBatchUpdate™ takes advantage of data source control to the fullest. When you connect WebGrid to an updatable data source control, you don’t need to write codes to handle the physical updates.

• Hierarchical Traditional Binding (ADO.NET DataSet)

Similar to Traditional Binding, you are also required to handle OnBatchUpdate server side event to write codes to perform database updates.

Thanks to the automatic identity’s mapping through referential integrity, WebGrid performs all the complex logics behind the scene, so that you only need to write a few lines of codes to update the dataset.

• Hierarchical Declarative Binding (ISDataSource)

As in flat WebGrid declarative binding, SmartBatchUpdate™ supports hierarchical WebGrid that is bound to ISDataSource control in the same way and consistent fashion.

With ISDataSource control, you are not required to write codes in order to perform physical update into the underlying database.

It is important to ensure that your ISDataSource instance has been properly configured to return new identity for each table in the event of insert.

• Custom Object

In addition to built-in .NET data sources, batch update is also designed to support advanced enterprise scenarios, such as using the feature in conjunction with custom object data binding.

When bound to custom object collection – such as a list of Customer objects – you can disable automatic object updates feature. In this case, you are responsible to write codes to perform physical updates according to your business logic/model.

In the same way as in other data sources, you handled OnBatchUpdate server side event to provide codes to perform physical update.

Conclusion

With multitude of batch update features and data source support, WebGrid 7 provides the most comprehensive features for all data editing needs – taking account compatibility with hundreds of existing features as well as support for new scenarios. As Web developers, you got the power, flexibility and speed that you need to build your next-generation, Web 2.0-ready applications.

There are so much more about batch update that I can’t detail here. I believe it’s best for you to try and experience it yourself when the beta bit is out sometime next week.

In my next post, I’ll try to delve more on new client-side binding technology along with its dozens of breakthrough features. Stay tuned!

All the best,
Jimmy.

2009’s Preview Part II – The Grid Duo

If you haven’t read my previous posts, I recommend you to read Part I – DataSource controls for Silverlight before reading this post.

In this second part of 2009’s product preview, I will be covering two of the upcoming products which are going to be the key differentiator between us and the others, in terms of innovation and advanced solution. Here I’m excited to introduce The Grid Duo, the next-generation data presentation component for Silverlight and ASP.NET.

Wait a second. You might think that you read it wrong because I mentioned ASP.NET while you recalled it wasn’t listed in our 2009 roadmap. You’re absolutely right! Think of that as our new year’s resolution for you 🙂

Data Presenter for Silverlight 2

In our November 2008’s newsletter, we’ve touched a bit on Data Presenter in the Editorial section. This blog post is the first to discuss the next-generation presenter component in depth — from its concept to features.

Data Presenter embraces a new breed of concept that completely redefines the way users work with information. Unlike standard GridView which limits users to work with data in tabular format, Data Presenter lets users to work with data in various kind of views. Data Presenter includes five built-in views, and also provides flexibility for you to add any number of views that you desire. That’s the main reason behind the unique Data Presenter name, instead of common Grid term.

View information your way.

Intersoft Data Presenter is the only and the first in the industry that implements the concept of hybrid views into a single presenter control. Data Presenter is all about data visualization, making your data easier to work with, easier to understand, and makes more sense to your users.

Data Presenter consists of DataPresenterManager which is the main component that manages all child views, and five built-in views which are IconPresenter, ListPresenter, GridPresenter, HierarchyPresenter, and CoverflowPresenter.

While these five built-in presenters are best used together with DataPresenterManager, they can also be used independently (stand alone). The presenter’s architecture has been designed in such way so that it can automatically pull datasource and synchronize the state with the DataPresenterManager when it’s configured in integrated mode.

Each presenter is represented by its icon in the DataPresenterManager’s header which can be easily activated by clicking on it. It also provides a built-in, intuitive slider bar to let users easily navigate from a view to another. We’ve also added a nice zooming feature especially for IconPresenter, so that when you drag the slider bar within the presenter’s slide range, it will perform smooth-zoom and auto-arrange the layout to fit the available screen estate. See the following screenshot for more details.

Automatic smooth zooming for IconPresenter.

As in the good tradition of every Intersoft’s components — every styles, behaviors and layout are fully customizable. For instances, you can specify the minimum and maximum size for the zooming, the space between each item, and so on.

Piece-of-mind with bare-metal performance

Developers often worry that their applications will hit bottleneck one day, as their application’s users and data growth. As such, you really have to make sure and put concern on the components that you consume —  especially data visualization component such as Grid — whether they can handle large data in acceptable performance.

Intersoft’s Data Presenter is rigorously crafted to meet the high standard in performance, and is our top objective before any other features. As a result, Data Presenter invented a new technology that enables you to display information in consistent performance, regardless of how many records that you bound it to.

That said, our benchmark test shows a huge difference between Data Presenter and other non-optimized Silverlight’s controls. For instance, when we load only 500 items into a WrapPanel and run it, the browser hanged for 30 seconds on first load. When we tried scroll the view, the browser crashed (or possibly hanged for a long time, but we had to kill the process before it eats up all resources). That’s not to mention the huge amount of memory that the controls allocated.

Thanks to Data Presenter’s new technology (we have not finalized the name yet), all presenters that ship with Data Presenter will not suffer this performance bottleneck. Our test shows that loading Data Presenter with 5,000 items is done below a second, and used only approx. 10MB memory. The scrolling is extremely smooth and is done interactively (realtime scrolling as you drag the scroll thumb).

I think it’s also important to pinpoint that the memory usage is at consistent rate (eg, 10MB) even during scrolling, or interaction with the Grid, unless you add more views or data to the Grid afterward.

Of course, the best way to believe is by experiencing it yourself. I hope it won’t be too long until we finalized the feature-sets for Jan ’09 CTP and samples.

Say no to tedious codes — be more productive with codeless databinding

In my previous post, I have explained about our data access strategy to help streamlining Silverlight development specifically for LoB applications.

These datasource controls will be fully supported by all Intersoft’s Silverlight databound controls. That’s where each piece of puzzle is solved and connected.

Data Presenter supports these datasource controls end-to-end. That means, you can connect Data Presenter to any of the datasource controls without have to worry on the processes and behaviors differences.

With the datasource controls and databound UI controls that support it, you can bind UI controls declaratively. Without having to write codes, that means you can be more productive and be able to complete your development dramatically faster.

The following example shows how you can easily display data from an ADO.NET Data Service into DataPresenter, through AstoriaDataSource control.

Declarative databinding in Silverlight

As I mentioned in my previoust post, the AstoriaDataSource holds the key answer to the overall databound UI controls strategy, in terms of features and extensibility. For a quick example, let’s think on some basic data-features such as column sorting, filtering, grouping and paging. Without a consistent interface such as one introduced in AstoriaDataSource, most of data-features can’t be performed as they don’t have direct capability to get the data shape it needs for the data presentation.

This is exactly how our data access strategy — the datasource controls model and databound UI controls that support it — fit in and completely address Silverlight development challenges. That said, most features in GridPresenter can perform automatically without additional user’s codes when it’s bound to AstoriaDataSource. These features include all data-view features such as sorting, filtering, grouping; data-navigation features such as paging, virtual loading; as well as data-editing features such as inserts, updates and deletes.

Feature-complete GridPresenter

GridPresenter is one of the key components of Data Presenter that provides comprehensive functions for displaying data in tabular layout.

GridPresenter sports Vista-style look and feel by default, which can be easily customized through Edit Template in Blend. In addition, GridPresenter combines the best of user experience — by exploiting Silverlight to the fullest — and the industry’s best Grid features such as those available in WebGrid Enterprise for ASP.NET, makes it the most advanced data visualization component for Silverlight platform.

In addition to basic Grid features — such as column moving, resizing, drag and drop column — GridPresenter is also powered with advanced features such as multiple selection and Excel-style column freezing. See the following screenshot to get a better picture.

Stylish GridPresenter with multiple selection and frozen columns feature.

There are still so much about Data Presenter and Grid Presenter that I can’t cover in this single post. I’ll leave it for later when the CTP is available for download, so you can experience and test-drive it as well.

WebGrid Enterprise 7 for ASP.NET

As I mentioned earlier, we originally didn’t plan a new version of WebGrid in the R1 milestone as we already plan for numerous brand-new products for both ASP.NET and Silverlight. However, the market demands differently.

We finally decided to add a new version of WebGrid (named WebGrid Enterprise 7) in R1 milestone to address the overwhelming demands specifically on cloud-based computing.

I would say that WebGrid Enterprise 7 is going to be the most significant new version of WebGrid since version 3.0 (the first WebGrid version developed for ASP.NET 1.0). Let’s take a look at the following points for the main reasons.

Believe the unbelievable: Slashed data footprint by over 90%

Ninety percent, are you kidding? Possibly you think that’s over exaggerating, or possibly you think it’s a mistyping. But no — it’s not a joke nor a typo. Let me explain why.

When the first version of WebGrid was released back in year 2003, it’s the first WebGrid in the industry that empowers AJAX to eliminate full page postback. At that time, AJAX name hasn’t been coined, and we called it FlyPostback™ which we still use until today.

The mechanism of data exchange since that first version of WebGrid is using server-side rendering technology. In fact, that hasn’t changed until v6 (the current version) as it’s proven stable and reliable. Server-side rendering also means that the client invokes a request to server, then the rendering is done at the server side, and finally it submitted the results to the client in HTML markup. Since the result itself is in final shape, the processing in client side is very minimal. The trade off is that the HTML markup sent from the server is considerably huge, and can be feel slower on users with narrow-band Internet connection.

WebGrid Enterprise 7 is completely re-architected to meet the performance standards and low footprints that today’s users demanded. WebGrid Enterprise 7 now offers a new option to use JSON as the data exchange format instead of HTML. The result? Unbelievably amazing.

The following screenshot compares WebGrid’s footprint size that is sent from server after a sorting operation. I’m going to use a sample that we shipped in our live sample so you can also check it out yourself, let’s pick GroupFooterTotal.aspx.

WebGrid using HTML markup as data exchange.

So, using the normal mode, WebGrid sent back HTML markup with size approx. 200KB for 50 rows of data with two grouped columns and group total enabled.

Now — if this data is to be slashed by 90% as I said earlier, then the resulting data that sent back from server should be less than 20KB in size, cutting approx. 180KB. Let’s see the screenshot below for the same sample, but configured to use JSON as its data exchange format.

WebGrid using JSON as data exchange format.

WebGrid 7 with JSON data format returned the data in only 17KB, as shown in the above screenshot. I hope you agree that’s a really 90% slashing! Better yet, the result of both rendering is perfectly identic — from the column header layout, row layout, group rows, to the data formatting. Yes, we have a lot of improvements in this area and also in the WebUI Framework level to make it happen, which I’m going to cover in the third series of this post.

So, you’re wondering — how could this happen? Is JSON the magic word for everything?

In fact JSON plays only a small rule here, and is no more than a data exchange format, since complex data can be easily wrapped into JSON format in both server and client side. The real stuff behind this improvement is the new technology invented in WebGrid Enterprise 7, called Virtual Rendering™. Virtual Rendering does all the logic to detect the delta changes between each state, and virtualize the way server-side perform the rendering — making it possible to achieve identic rendering results as it is in server-side.

In other words, using JSON alone will introduce a huge trade-off, such as many features that are usually performed in server-side will become unsupported or disabled. For instances, multiple grouping with various group interval mode, group footer total with aggregate function, data formatting that should comply with .NET server-side formatting, and so much more.

I’ve seen a lot of competing products that suffer from this critical trade-off when they implemented JSON support, making their grid completely incapable and useless. This is where WebGrid Enterprise 7, and its innovative client-side technologies, make the difference.

Cloud-ready computing. Without features lost.

Nowadays, software developers have started to take advantage of new paradigm in Web development, such as accessing data over the Web instead of accesing a Web page. Also known as Cloud computing, developers are enabled to consume information from various data sources through API calls, which returns structured format to the client such as SOAP, XML, JSON and RESTful — just to name a few.

WebGrid Enterprise 7 is strongly focused to support Cloud computing. This means that you can start to get data from web service in the client-side, and bind the data to the Grid entirely on client-side as well.

Toward that end, WebGrid’s Cloud computing initiative will offer a comprehensive client platform that enables all data-related operations to be done in the client side, instead of leaving them unsupported. It’s noteworthy to mention about this as we found many of competing products claimed to be Cloud ready, but turns out only basic data display is supported — leaving essential features such as sorting and grouping unsupported.

WebGrid Enterprise 7 is completely re-engineered so that no feature is lost when working in ClientBinding mode. Not even the minor layout features. This means that your favorite WebGrid features — such as multiple sorting, multiple grouping, multiple filtering, preview row, column types, edit types, etc — can still be enabled and simply work the way it should be when you’re using ClientBinding operation mode.

WebGrid Enterprise 7 includes native support for connecting data service that is hosted by one of the following data service type:

• WcfService. Connects to a service that is provided by Windows Communication Foundation site.
• WebService. Connects to a service that is provided by Web Service site (SOAP/XML).
• AstoriaDataService. Connects to Astoria (ADO.NET Data Service).

By native support, that means you don’t have to write lengthy Javascript codes such as calling web service, handling its callback response and manually bind it to the Grid. WebGrid 7 designs it elegantly, so that you can simply put in your service url and select command via property set, and WebGrid takes care the rest.

When using one of the above data service, WebGrid will be using JSON as the data exchange format automatically.

Better yet, WebGrid Enterprise 7 is fully independent and doesn’t require ASP.NET AJAX Framework to make it happen. So you can consume all these powerful features regardless of the version of your development environment.

Client-side Binding + Inline Editing + Batch Update = True Web 3.0

So far, I have explained about Client-side Binding in the sections above. We already have “Inline editing” feature since the first version of WebGrid Enterprise, so I won’t be explaning it too much here.

Basically inline editing is a feature that lets your users perform editing data right inside the cell. To easily determine whether a Grid has inline-editing feature, try to click on a cell and press Enter, then see whether the selection becomes a textbox immediately. If it does, then press Tab and see whether the focus moves to the next cell with its respective editing type displayed.

WebGrid Enterprise 7 is built on the vision to enable so-called True Web 3.0 development. With Web 3.0, end-user demand an experience where the data is loaded on demand and bound on the client side, editing can be made immediately without postback/callback, and finally all changes can be made in batch.

The batch update is one of  the key components in WebGrid 7 that makes Web 3.0 a reality. It enables many scenarios that were not possible to achieve previously, such as making changes to data in offline mode. As a result, end-user no longer have to worry about connection lost, as changes are stored locally in the client-side. When the data changes are completed and need to be synchronized to physical datasource, user simply clicks on a button to submit all changes to server.

There are so much to discuss about batch update, as this powerful feature alone consists of dozens of sub features. For instances, intuitive call-out integration for changes notification, cascading inserts for hierarchical table, automatic object updates, changes preservation over paging, and more. At the time of this writing, the batch update white paper was already written up to 36 pages.

I’ll surely write another post to cover more about batch update. For now, I’ll just include a nice screenshot that show the user interface improvements for this feature.

Batch Update feature in WebGrid Enterprise 7

Conclusion

Both data presenter for Silverlight and major version of WebGrid for ASP.NET are huge milestones and key differentiator toward the ubiquitous, dynamic Web application development to achieve richer and more intuitive data visualization that connected to various datasources over the Web.

No matter which Web development solution that you prefer — either it is Web AJAX or RIA — you can rely on our solutions to provide you with the most advanced, reliable, and the best-performing components.

In the next post, I’ll cover on enhancements and new features that we’ve made on the Framework level such as improvements on FlyPostback, JSON framework, client data access technology and more.

All the best,
Jimmy.