WebCombo 5 is strongly focused on enterprise web development which has evolved to adopt the latest web technologies such as cloud computing, software-as-a-service (SaaS) and other Web 2.0 related technologies. Featuring a powerful client binding architecture, WebCombo 5 is the most revolutionary release yet which has been significantly revamped to meet the high performance standards demanded by today’s web applications. This topic discusses the new client-side data binding feature in WebCombo, describes its new technologies and benefits, and explains how it resolves performance bottleneck without trading-off the essential features.

This topic contains the following sections:

Introduction to the Client Data Binding

Client-side binding is a mechanism that processes data operation and perform data binding entirely in the client-side. Data binding consists of a series of data processing operation that takes a raw-form of data and shapes it into a logical object, which is then rendered into user interface. Client-side binding simply means that data binding should be performed in the client-side (also known as browser), rather than in the server-side (ASP.NET).

All previous versions of WebCombo and most of the ASP.NET server-side controls perform data binding in the server-side. Server-side binding normally sent HTML markup as the final output, which is directly recognized by browsers with very minimum overhead in the client side. In certain scenarios such as in data listing that consist of many rows and cells, the HTML markup result could become huge and takes longer time to transfer from the server to client. Consequently, it could bring potential performance problems that impact user experiences in overall.

Unlike server-side binding, the client-side binding often returns raw data which has significantly smaller size compared to the HTML markup. WebCombo 5 incorporates JSON (Javascript Object Notation) as its data exchange format for all data operation in WebCombo.

The following diagram illustrates the new WebCombo’s architecture and client binding life cycle.

As seen in the above illustration, WebCombo is built on the top of solid client binding architecture which processes data operation entirely in the client-side – from the data dispatching, data filtering, binding to rendering.

The Benefits of Client Data Binding

At the heart of the WebCombo's client binding architecture is VirtualRendering, a state-of-the-art client rendering framework that enables WebCombo to render data rows efficiently, while at the same time delivering identical user interface as in server-side rendering. This rendering technology is one of the key components in Intersoft’s client binding architecture that transform logical data object into user interface elements.

The uniqueness of Intersoft’s rendering technology lies in its ability to perform rendering with very minimum overhead. This is made possible with sophisticated state management that automatically synchronizes its current state as user interacts with the WebCombo control in the runtime.

Client-side binding provides comprehensive solution for developers to accomplish many advanced scenarios and tasks which were previously difficult or not possible to be achieved. The following list explains several key benefits of client-side binding:

Data footprint reduction by over 90%. When operating in client binding mode, WebCombo returns raw data in JSON format which is significantly smaller compared to HTML markup. In many scenarios, WebCombo has been proven to reduce data footprint consistently by over 90%. For more information, please refer to Performance Benchmark and Comparison in the section below.
Superior performance and increased response time. With re-engineered architecture to support client binding extensively, WebCombo yields better performance and increased response time as it skips several default behaviors, data processing and rendering that used to be produced from server side.
More responsive and intuitive user experiences. The nature of client-side binding – which exchange data in its raw format, enables WebCombo to receive data faster from the server. Consequently, end users will get more responsive user experience even in relatively slower network connection.
Connect to external site or service-based datasource (“Cloud” support). With solid client binding implementation, developers can bind WebCombo to data source from an external location such as Web service, Windows Communication Foundation (WCF) service, or ADO Data Service.
Future proof – supporting more service-oriented development methodology. Intersoft’s approach to client-side binding is an agnostic implementation that completely independence from the server-side object model. This enables WebCombo to perform data binding based on any raw forms of data in JSON format. The JSON data can be produced by a server hosted by ASP.NET, PHP, or other platforms. Based on the understanding of Intersoft’s client binding implementation, it also enables developers to achieve completely unbound scenarios as well as future development methodologies such as ASP.NET MVC and Windows Azure.

Performance Benchmark and Comparison

The following charts illustrate the performance comparison between server-side and client-side binding in several aspects, such as data footprint and network connection type. This section also shows the comparison between different modes of client-side binding.

Data footprint size comparison on AJAX operation based on various Grid configurations

Response time comparison on AJAX operation

*) Performance benchmark is tested on Intel® Core™ 2 Duo 2.4Ghz processor with 2 GB memory.
**) Tested samples are using the combination of Northwind’s Customers and Orders data table.

Supported Features

WebCombo 5 features unique client binding architecture that addresses performance bottleneck as well as introduces numerous benefits, without trading-off essential Grid features. Intersoft’s ClientBinding is designed to work in concert with key and fundamental features already implemented in WebCombo.

The following features have been tested and enhanced to fully support the client binding operation mode:

Core features such as querying and paging (load more operation).
Multiple Columns
Wildcard Searching
Multiple Selection
Linked WebCombo
Add Item
Data Format String
Entry Mode
All layout settings such as round corner and default style

The Differences with Server Data Binding

This section provides information on how client-side binding differs to server-side binding in terms of data processing and event life cycle. The details will also help you in upgrading existing implementation that used server-side binding into client-side binding properly.

Server-side binding processes data binding, initialization and rendering in the following way:

Client-side binding includes a special ServerDataSource mode to enable you to quickly leverage existing server-side infrastructure while taking advantage of many benefits introduced by client binding. This means that you can still connect WebCombo to a server-side data source – such as SqlDataSource, ObjectDataSource, LinqDataSource – or data source object assigned in InitializeDataSource event; while performing data binding operation in the client side.

Client-side binding using ServerDataSource mode processes data binding, initialization and rendering in the following way:

As you can see in the illustrated diagram above, client-side binding mode stripped several processes from the data binding, initialization and rendering process in server-side.

The key points of the differences can be summarized in the following:

Physical data connection such as retrieving data from data source control and prepare data binding event will still be invoked in client binding mode. The life cycle is consistent in both first page load and FlyPostBack actions, and works in the same way as in server-side binding mode.
Client binding shapes the raw data into semi-processed data, such as including important data such as value list translation, sorted rows, and more. It doesn’t perform grouping operation.
WebCombo intelligently repackages the data into rowset required only by the current view – taking account paging, filtering and other aspects.
WebCombo sent the repackaged data in JSON format – reducing over 90 percent of data footprint.
Since the actual rendering does no longer occurring in the server side, the initialize events – such as InitializeColumn, InitializeRow and InitializeCell – are no longer raised.

As the data binding is performed in the client side, WebCombo provides new client side events for data post-processing requirements. As such, if you have existing codes that perform initialization in one of the above mentioned events, the codes will no longer work. You’ll need to migrate the codes to the appropriate client-side events.

For example, consider the following C# codes to handle post-processing in InitializeRow server-side event:

C#	Copy Code
protected void wcReportsTo_InitializeRow(object sender, ISNet.WebUI.WebCombo.RowEventArgs e) { e.Row.Cells[0].Image = "images/" + e.Row.Cells[0].Text + ".jpg"; e.Row.Cells[0].CustomObjectAttributes = " width='48' height='48'"; }

Copy Code

    protected void wcReportsTo_InitializeRow(object sender, ISNet.WebUI.WebCombo.RowEventArgs e)
    {
        e.Row.Cells[0].Image = "images/" + e.Row.Cells[0].Text + ".jpg";
        e.Row.Cells[0].CustomObjectAttributes = " width='48' height='48'";
    }

Since the InitializeRow event is no longer raised in client binding mode, the above code will not be executed. To achieve the same post-processing in client binding mode, handle the OnInitializeRow client-side event. Thanks to Intersoft’s framework that provides identical server-side object model in the client-side, you can easily convert the C# code to Javascript such as shown in the following:
Javascript Copy Code
   function wcReportsTo_InitializeRow(id, row)
   {
        row.Cells[0].Image = "images/" + row.Cells[0].Text + ".jpg";
        row.Cells[0].CustomObjectAttributes = " width='48' height='48'";
   }

Javascript	Copy Code
function wcReportsTo_InitializeRow(id, row) { row.Cells[0].Image = "images/" + row.Cells[0].Text + ".jpg"; row.Cells[0].CustomObjectAttributes = " width='48' height='48'"; }

How Client Data Binding Works

WebCombo relies heavily on a solid client data framework in order to perform client binding efficiently, and to support the existing features in various configurations and scenarios. At the heart of the client data binding is the Client Data Object Framework.

Intersoft’s Client Data Object Framework can be illustrated as a lightweight, mini version of Microsoft’s ADO.NET Framework. Client Data Object Framework will be further abbreviated as CDOF in this topic. CDOF includes client-side implementation of DataSet, DataTable and DataView – which acts as the backbone of all client-side data operations in WebCombo. The ISDataSet and ISDataTable represent the main data object which is then used by WebCombo for further processing such as data shaping, formatting, paging and more.

The following illustration describes the overall client binding processing in WebCombo.

As shown in above illustration, WebCombo doesn’t process the data shaping by its own – it relies on the CDOF to obtain finalized data shape, which is then processed further by the VirtualRendering. This unique architecture enables clean separation between data abstraction layer and rendering layer – making it easy to be consumed by WebCombo and other WebUI Studio® controls that requires client binding implementation in the future.

In addition to the overall binding process as shown above, it’s also important to understand the new process model and events life cycle in WebCombo. The following information explains the client binding process life cycle in details:

Rich Client Data Operation

In addition to providing a solid client binding platform, Client Data Object Framework™ (CDOF) also enables many client-side data processing which were previously difficult or not possible to achieve.

The following lists the key features of client-side data processing.

Client-side Data Formatting

One of the most powerful features in CDOF is its comprehensive data formatting function. It supports composite data formatting such as string, date time and number formatting. It also takes account Culture information. You can think it as a client-side implementation of .NET Data Formatting Library.

Client-side Sorting

CDOF implements high-performance client-side sorting that is capable to sort multiple columns in a fraction of seconds.

The client sorting also supports different sorting direction on each column. For instances, sort on Country descending, while ContactTitle ascending. The client sorting is implemented at data access level instead of UI level – enables developers to have greater control over data shaping process. The sorting feature is implemented at ISDataView class.

Client-side Filtering

CDOF features comprehensive filtering support enabling developers to easily perform row filtering at data object level. The client-side filtering implements syntax that is fully compatible with server-side ADO.NET Framework’s filter expression – making it easy for .NET developers to consume client-side filtering features.

The client-side filtering supports the following standard operators:

Equals to (=)
Not equals to (<>)
Greater than or equals to (>=)
Greater than (>)
Less than or equals to (<=)
Less than (<)

It also supports more advanced operators such as:

Like
Contains
Nested Conditioning Group

The following samples show various filter expression supported in CDOF.

Filter Examples	Copy Code
Basic string-type filter expression: [ContactTitle] = ‘Owner’ and [Country] = ‘USA’ Filter expression on various types with group: (([ContactTitle] = ‘Owner’ or [ContactTitle] like ‘sales’) and ([OrderDate] > #1/1/2008# and [OrderDate] < #1/1/2009#)) Number filter expression: [OrderAmount] > 123.45 and [OrderAmount] < 456.78 Filtering out null or empty data: [Region] <> null and [Region] <> ‘’

Filter Examples