JavaScript DataSource Integration

Shield UI DataSource instances can be reused across multiple Shield UI Widgets. For example, the Shield UI Grid and Chart widgets can share a common DataSource component:

var sharedDataSource = new shield.DataSource({
	data: [/*...*/]
});
$(function () {
	$("#myGrid").shieldGrid({
		dataSource: sharedDataSource
	});	
	$("#myChart").shieldChart({
		dataSource: sharedDataSource
	});
});

Data-bound widgets like Shield UI Grid and Chart provide the dataSource initialization setting for specifying the DataSource component they are bound to. When creating a new data-bound widget, the dataSource setting can be an instance of Shield UI DataSource or an object literal containing the initialization settings for a DataSource component. In the latter case, the DataSource component is created internally by the widget. Data-bound widgets expose the dataSource property for accessing the DataSource instance they are using:

$(function () {
	var myGrid = $("#myGridElement").shieldGrid({
		//Shield UI DataSource initialization settings
		dataSource: {
			remote: {
				read: {
					url: "http://services.odata.org/V3/Northwind/Northwind.svc/Products?$format=json",
				}
			},
			schema: {
				data: "value"
			}
		},
		columns: ["ProductID", "ProductName", "QuantityPerUnit", "UnitPrice"]
	});
	
	var gridDataSource = myGrid.dataSource;
	gridDataSource instanceof shield.DataSource; //true
});