Intersoft WebGrid Documentation
Client-side Binding
See Also Send comments on this topic.
Intersoft WebGrid > WebGrid Features Overview > Displaying Data > Client-side Binding

Glossary Item Box

WebGrid is strongly focused on enterprise web development which has been evolved to adopt new web technologies such as cloud computing, software-as-a-service (SaaS) and other Web 2.0 related technologies.

Featuring a rock-solid client binding architecture, WebGrid Enterprise™ 7 is the most revolutionary release yet which has undergone major revamp and re-engineered to meet the high performance standards demanded by today's web application.
The following sections discuss Intersoft's approach to client data binding, its new technologies and benefits, and how it resolves performance bottleneck without trading-off fundamental features.

This topic contains the following sections:

Introduction to client-side binding

Client-side binding is a mechanism that processes data operation and binding life-cycle 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 WebGrid and most ASP.NET server-side controls perform data binding in the server-side since .NET Framework already offer rich base class libraries to perform these operations efficiently - such as data sorting, filtering, paging and other data access-related functions available in dataset, data table and data view.

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. As a result, it could bring a potential performance problem that impact user experience in overall.

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

The following diagram illustrates the new WebGrid's architecture and client binding life cycle.

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

Innovative VirtualRendering

VirtualRendering'is Intersoft's state-of-the-art client rendering framework that enables WebGrid 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 Grid.

As a result, WebGrid doesn't require a row to be rendered from scratch which could lead to performance issues. Instead, it renders a row based on "delta algorithm" to produce high rendering quality in superior performance.

One of the outstanding achievements of VirtualRendering™ is its small size of the client scripts required to activate the client binding feature. Unlike traditional approaches that could bloat the client files up to half a megabyte, WebGrid 7 adds only as little as 60KB for data binding processing, data shaping and rendering.

Benefits

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:

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

The chart above compares several modes in various Grid scenarios. Lower graph is better, which means smaller response size.

 

Data footprint size comparison on transactional operation

Lower graph is better, which means smaller response size.

 

Data footprint size comparison based on various Grid functions and data load mode is set to "AllData"

Lower graph is better. Notice that client binding with service mode have zero data footprint, since the data functions will be done entirely in client side.

 

Response time comparison on AJAX operation (based on data footprint in first illustration above)


Lower graph is faster. The time measurement is per second.

*) 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 and Limitations

WebGrid 7 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 WebGrid. The following features have been tested - and have been further enhanced to some extent -to fully support client binding operation mode:

 

WebGrid 7 is focused on complete support for client binding in flat Grid mode, to ensure high reliability with existing APIs and feature and best performance in various scenarios. The following features are not supported in version 7, although the architecture has been properly designed to support implementation for those features in the next version:

Exporting is not supported in version 7 when binding mode is set to either WCF, WebService or Astoria. It is due to the datasource is handled externally from other external source, then return the data to Client-side directly to be processed. As for exporting, the data source needs to be on the Server-side in order to export the data and perform additional Server-side binding and processing.

The Differences with Server-side 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 WebGrid 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:

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 WebGrid1_InitializeRow(object sender, RowEventArgs e)
{      
   if (e.Row.Type == RowType.Record)      
   {          
      WebGridCell hasAttachment = e.Row.Cells.GetNamedItem("HasAttachment");          
      WebGridCell isUnread = e.Row.Cells.GetNamedItem("IsUnread");          
      WebGridCell priority = e.Row.Cells.GetNamedItem("Priority");          
      WebGridCell size = e.Row.Cells.GetNamedItem("Size");          
      if (hasAttachment.Value.ToString() == "True")              
         hasAttachment.Text = "./images/Attachment.gif";          
      else              
         hasAttachment.Text = "./images/wg_blank.gif";          
      if (isUnread.Value.ToString() == "True")              
         isUnread.Text = "./images/message.gif";          
      else              
         isUnread.Text = "./images/wg_blank.gif";          
      if (priority.Value.ToString() == "1")              
         priority.Text = "./images/high.gif";          
      else              
        priority.Text = "./images/wg_blank.gif";          
      size.Text += " KB";      
   }
}

Since InitializeRow is no longer invoked, the above codes will not be executed. To achieve the same post-processing in client binding mode, handle the OnInitializeRow client-side event. Thanks to Intersoft???s client framework architecture that mimics server-side object model, you can easily convert the C# codes to Javascript such as shown in the following:

C# Copy Code 
function WebGrid1_OnInitializeRow(id, row)
{       
   if (row.Type == "Record")       
   {            
      var hasAttachment = row.Cells.GetNamedItem("HasAttachment");            
      var isUnread = row.Cells.GetNamedItem("IsUnread");            
      var priority = row.Cells.GetNamedItem("Priority");            
      var size = row.Cells.GetNamedItem("Size");            
      if (hasAttachment.Value.toString() == "true")                
         hasAttachment.Text = "./images/Attachment.gif";            
      else                
         hasAttachment.Text = "./images/wg_blank.gif";            
      if (isUnread.Value.toString() == "true")                
         isUnread.Text = "./images/message.gif";            
      else                
         isUnread.Text = "./images/wg_blank.gif";            
      if (priority.Value.toString() == "1")                
         priority.Text = "./images/high.gif";            
      else                
         priority.Text = "./images/wg_blank.gif";            
      size.Text += " KB";        
   }
}

With above codes, you can achieve custom requirements with identical results between client and server binding mode.

See Also

©2012 Intersoft Solutions Corp. All Rights Reserved.