While most of these libraries are available as open source software, there are some fabulous vendor implementations that bring these concepts together into a powerful and modern web application development toolset.
In this blog series, my intent is to demonstrate some of the capabilities of Kendo UI through concrete examples. The focus is on functionality rather than elaborate user interface wizardry. Today, I will demonstrate the use of Kendo's MVVM, DataSource and Template framework alongside the grid and dropdown list widgets to display a master-detail view of data from a database.
Create HTML Page
Start by opening your favorite code editor and create a stub for your web page as shown below.
Add Script and CSS References
Add HTML Markup to Page
Insert the following HTML markup inside the <body> tag.
There are several noteworthy aspects to this markup.
- All data source bound Kendo widgets populate the data source during widget initialization (synchronous). This can be prevented by specifying data-auto-bind="false" on the widget. You can then initiate the data source population in response to a specific event. In this example, the 'change' event handler on the dropdown list widget calls the 'filter' method on the zioStatsDS data source. This call internally initiates the 'change' event on data source when data has been retrieved and this in turn triggers the 'binding' event on the grid.
- To render a value as HTML, use #= value #
- To keep HTML encoding while displaying a value, use #: value containing HTML tags #
- The master-detail display is managed by the 'detailInit' event handler on the master which displays the detail list using the template specified in data-detail-template attribute on the master.
Add Application Script
Some important points,
Kendo Data Source
The data source object plays a central role in data centric Kendo UI web applications. It is capable of,
- Processing source data to provide calculated values (e.g. generate a full_name field by concatenating first_name and last_name fields in the source) using the 'parse' property.
- Processing different serialization formats - JSON, JSONP, OData or XML - to/from remote endpoints.
- Maintaining in-memory cache of changes to synchronize with remote endpoints.
- Performing full CRUD (Create/Read/Update/Delete) operations against remote endpoints and synchronizing changes.
- Providing ability to read, fetch, query and filter the data.
- Supporting client and server side filtering, grouping, sorting, paging and aggregating data.
- Offline storage with automatic remote endpoint sync when browser connection is detected. Offline storage is implemented using localStorage which is similar to sessionStorage.
You can test this using the following sample data. The application script will have to be modified to create the 'masterData' and 'detailData' properties on the view model. These will be used to simulate the JSON stream that would otherwise be received from the OData service.
Accordingly, modify the 'zioStatsDS' property in the view model as shown below
Also modify the variable declaration inside 'initHistoricDetails' property in the view model like below
Finally, modify the main data source function like so
Note that instead of the 'transport' property used to retrieve data from remote endpoints, you use the 'data' property to bind to local data.
RequireJS and AngularJS integration.