Introduction to Shield UI JavaScript DataSource Widget
In this blog post entry, we will review in greater detail the ShieldUI JavaScript DataSource component - a versatile data component that aims to simplify data retrieval and manipulation.
It provides out-of-the-box binding to various data sources:
- Javascript arrays and objects
- JSON web services
- JSONP web services
- XML strings and web services
- HTML table elements
Through its flexible configuration, the ShieldUI DataSource component abstracts out heterogenous data retrieval into an intuitive, unified API. It simplifies working with client-side data using JavaScript and enables data sharing across different components on the same HTML page. Shield UI DataSource fully supports paging, sorting and filtering both on the client-side and server-side.
The sections below elaborate in greater details on some of the features of the DataSource component. To see it in action, review the following demo section, which utilizes the ShieldUI DataSource widget to pass data to a grid component.
Getting Started
Shield UI DataSource is a JavaScript component that simplifies working with data on the client-side. It is part of the core Shield UI scripts and is available on the page once the JavaScript references are added:
<!DOCTYPE html> <html> <head> <title>Shield Grid</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/shieldui-all.min.css" /> <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="js/shieldui-all.min.js" type="text/javascript"></script> </head> <body> </body> </html>
The DataSource component is initialized through the shield.DataSource constructor, passing initialization options as a first argument object literal:
$(function () { var ds = new shield.DataSource({ data: [/* data array*/], skip: 3, take: 5, sort: { path: "path.to.sort.field", desc: true }, filter: { path: "path.to.filter.field", filter: "eq", value: 13 } }); ds.read().then(function () { var dataView = ds.view; //dataView contains the filtered, sorted and paged data }); });
After a data source component is created, it needs to read the data and apply the specified data transformations. The read() method of the data source component returns a jQuery Promise object that can be waited for. When the success function is called, the view field of the component contains the result of the transformation as a JavaScript array. This can then be used for display on the page.
Binding to HTML Table Element
Shield UI DataSource supports binding to