What is Client Binding?
Data binding, the operation to link raw data to a logical object and render it into
a user interface, takes two forms: Client-side binding and Server-side.
Client-side binding simply means that data binding happens in the browser (the client),
rather than on the server (ASP.NET). Server-side binding typically sends HTML markup
as the final output. However, in cases of substantial data, the HTML markup result
could become huge and cause significant processing times and increased server load.
Unlike server-side binding, client-side binding returns raw data, which is significantly
smaller in size than HTML markup. To further enhance performance, WebGrid 7 incorporates
data transfer operations.
The following diagram illustrates the new WebGrid’s architecture and client binding
WebGrid leverages client-side binding for its ability to help developers accomplish
many advanced tasks that were previously difficult or downright impossible to achieve.
Key WebGrid Client Binding Benefits:
- Reduce data footprint over 90%
WebGrid’s client binding mode returns raw data in JSON format, which is significantly
more compact than HTML markup. WebGrid is proven to consistently reduce data footprints
in many scenarios by over 90%.
- Superior performance and increased response
WebGrid enhances performance and increases response time as it skips several default
behaviors, like data processing and rendering, that server side binding requires.
- Highly responsive and intuitive user experience
WebGrid receives data faster, so the user experience is smoother, faster, and more
productive than server-side binding.
- Future proof with service-oriented development
WebGrid is compatible with any raw data in JSON format, which is supported by ASP.NET,
PHP, and many other platforms. Client-binding’s highly interoperable nature means
completely unbound scenarios, plus any future server-independent platforms, such
as ASP.NET MVC and Windows Azure™ are fully supported as well.
The following charts illustrate the performance comparison between server-side and
client-side binding in several scenarios, including the differences between different
modes of client-side binding.
Built-in Innovative VirtualRendering
VirtualRendering™ is Intersoft’s state-of-the-art client rendering framework that
powers WebGrid’s data rendering. 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 states
as users interact with their data.
To vastly improve performance, WebGrid doesn’t require rows to render from scratch;
instead, it renders rows based on a delta algorithm to produce high rendering quality
with superior performance.
One of the most outstanding achievements of VirtualRendering is the small client
script size. Unlike traditional approaches that bloat client files up to half a
megabyte, WebGrid 7 adds as little as 60KB for data binding processing, data shaping,
Client Data Object Framework
Intersoft’s Client Data Object Framework can be illustrated as a lightweight, mini
version of Microsoft’s ADO.NET Framework. It includes client-side implementation
of DataSet, DataTable and DataView – the backbone of all client-side data operations
in WebGrid. The ISDataSet and ISDataTable represent the main data object which is
then used by WebGrid for further processing such as data shaping, formatting, paging
As shown above, WebGrid doesn’t process data shaping on its own, but relies on Client
Data Object Framework to finalize the data shape, which is then processed further
by VirtualRendering. This unique architecture model provides a clean separation
between the data abstraction layer and rendering layer – making it easy to port
into WebGrid and other WebUI Studio® family components that require client binding.
Client Data Object Framework also enables many client-side data processing operations
not previously possible, such as:
- Client-side data formatting
One of the most powerful features in Client Data Object Framework is its comprehensive
data formatting function. It supports composite data formatting, such as string,
date time, and number formatting, as well as localization. The data formatting feature
is heavily used in client-side binding to display formatted values instead of raw
numbers. For example, if your data service returns 50.9, you can choose to display
the more appropriate $50.90, should your data represent US dollars.
- Client-side data operations
- Sorting: The Client Data Object Framework implements high-performance client-side
sorting and filtering, capable of sorting multiple columns in a fraction of a second,
sorting multiple columns with different sorting directions, and other advanced sorting
operations. As clients-side sorting is implemented on the data access level instead
of the UI level, developers experience greater control over the data shaping process.
- Filtering: Comprehensive client-side filtering supports row filtering at the data
object level. And the client-side filtering implements syntax that is fully compatible
with server-side ADO.NET Framework’s filter expression – making it a snap for .NET
developers to incorporate client-side filtering features.
- Data paging: Conveniently implement client-side paging at the control level or presentation
layer, once the final data shape is available. Client-side paging is implemented
within its own process to provide comprehensive paging options such as VirtualLoad,
Classic paging, and to provide granular control over the paging process and data
In addition to its rich data processing, WebGrid’s advanced client binding also
offers two data loading modes: All Data and Paged Data. Select All Data for the
data service to return all data and Paged Data if the data service returns only
partial data for the current view.
Multiple Transaction Type Support
ClientBinding fully supports transaction operations for multiple data service types
in the same efficient, yet robust process as the data selection process. The ServiceMethods
object includes the following properties:
Similar to SelectMethod, corresponding methods in your data service handle each
data operation. Once the property is set, ClientBinding handles complex serialization
and deserialization processes automatically. As a result, you can develop transaction
methods just by accepting the original and new item objects. Set the object name
in the ItemTypeName property and provide the object’s class structure on the client-side.
Your data is humming at record speeds in just a few clicks.
WebGrid 7’s transaction operations work best with .NET Framework 3.5 data access
technologies such as LINQ to SQL and ADO.NET Entity Framework.
Similar to data transaction operations, implementing data service batch updates
are easily accomplished with WebGrid’s SmartBatchUpdate.
The batch update method signature:
public <batchupdatemethod> TransactionResult <batchupdatemethod> (ListClientRowChanges
The BatchUpdateMethod property is also available through ServiceMethods object,
which you specify according your data service web method. In client-binding mode,
WebGrid automatically submits all changes by invoking the specified web method from
BatchUpdateMethod. WebGrid submit all changes in an object collection of List<clientrowchanges>.
Easily loop data changes and perform physical updates by setting the modification
Multiple Client Data Sources and Data Services
WebGrid’s advanced client binding supports three types of client data sources.
- Service-based, such as Web service, Wcf service, ADO Data Service.
Sometimes nothing but a server-side data source will do. In those cases, WebGrid
- Datasource controls, such as AccessDataSource, LinqDataSource, ObjectDataSource,
- Datasource object, which is assigned in InitializeDataSource event (also known as
Leverage existing infrastructures while taking advantage of many client-side binding
benefits, such as improved performance and a reduced data footprint.
Server-side data source type is the smartest and swiftest way to take advantage
of client-side binding. You don’t need to create web service or data service as
WebGrid seamlessly connects to server-side data source for data retrieval, which
is then repackaged into lightweight format for further client-side processing.
Service-based Data Source
Whether it’s WebService, Wcf Service, or ADO.NET Data Service, quickly snap in your
WebGrid to a service, simply specify the service address in the provided ServiceUrl
property and the web method for data retrieval in the SelectMethod property. It’s
It will automatically activate full client-side operation mode when your data service
returns all data. It also fully supports paged data retrieval for optimized performance,
data transaction operations such as insert, update, delete, and SmartBatchUpdate.
Note: The current version of Astoria doesn’t support the complete paging
feature, yet. Use AllData loading mode for the AdoDataService type.
Client-side Data Source
The Client Data Source type allows you to assign a completely custom client-side
data source. WebGrid won’t load data automatically for this setting, but this type
is especially useful for retrieving data from external sites or data services not
supported by ClientBinding. For example, you may have a requirement to fetch data
from an external site manually on the client-side, and then pass the resulting data
to WebGrid via API calls for data binding. Pure client-side binding takes as little
as three short lines of code.
Download your 30-day
fully-featured WebGrid trial to build high-performance applications today.