Ignite UI API Reference
ig.DataSchema
The DataSchema component handles transformations for Array, JSON and Xml data objects for the DataSource; any other data types are best handled by the DataSource itself. Additional examples of the DataSchema component are available in the DataSource API documentation. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.
The following code snippet demonstrates how to initialize the DataSchema control.
Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the DataSchema control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.Code Sample
<!doctype html> <html> <head> <!-- Infragistics Combined CSS --> <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" /> <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" /> <!-- jQuery Core --> <script src="js/jquery.js" type="text/javascript"></script> <!-- jQuery UI --> <script src="js/jquery-ui.js" type="text/javascript"></script> <!-- Infragistics Combined Scripts --> <script src="js/infragistics.core.js" type="text/javascript"></script> <script type="text/javascript"> var ds, render, products, arraySchema; render = function (success, error) { if (success) { var resultHtml = $.ig.tmpl("<tr><td>${ProductID}</td><td>${Name}</td><td>${ProductNumber}</td></tr>", ds.dataView()); $("#table").html(resultHtml); } else { alert(error); } }; products = [ { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" }, { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" } ]; arraySchema = new $.ig.DataSchema("array", { fields: [{ name: "ProductID", type: "number" }, { name: "Name", type: "string" }, { name: "ProductNumber", type: "string" }] }); $(function () { ds = new $.ig.DataSource({ dataSource: products, callback: render, schema: arraySchema }); ds.dataBind(); }); </script> </head> <body> <table id="table"></table> </body> </html>
Related Samples
Related Topics
Dependencies
-
schema
- Type:
- object
- Default:
- {}
The $.ig.DataSchema handles transformations for Array, JSON and Xml data objects.
If your data is in any other format and/or needs to be additionally worked on, please pass it through $.ig.DataSource first.
Eg: When you need to fetch the data remotely, or when it is stored in a string and needs to be evaluated first.Code Sample
var xmlSchema = new $.ig.DataSchema( "xml", {fields:[ {name : "FirstName", xpath: "generalInfo/@firstName"}, {name : "LastName", xpath : "generalInfo/@lastName"}, {name : "Email", xpath : "generalInfo"} ], searchField:"//person" } );
-
fields
- Type:
- array
- Default:
- []
- Elements Type:
- object
A list of field definitions specifying the schema of the data source. Field objects description: {fieldName, [fieldDataType], [fieldXPath]}.
Code Sample
var xmlSchema = new $.ig.DataSchema( "xml", {fields:[ {name : "FirstName", xpath: "generalInfo/@firstName"}, {name : "LastName", xpath : "generalInfo/@lastName"}, {name : "Email", xpath : "generalInfo"} ], searchField:"//person" } );
-
outputResultsName
- Type:
- string
- Default:
- null
This is the property in the resulting object where actual resulting records will be put. (So the result will not be array but an object if this is defined), after the potential data source transformation.
Code Sample
var arrayOfObjectsSchema = new $.ig.DataSchema( "array", { outputResultsName: "res_data", fields:[ {name: "make", type: "string"}, {name: "model", type: "string"}, {name: "year", type: "number"} ] } );
-
searchField
- Type:
- string
- Default:
- null
This is the property (path) in the data source where the records are located.
Code Sample
var xmlSchema = new $.ig.DataSchema( "xml", {fields:[ {name : "FirstName", xpath: "generalInfo/@firstName"}, {name : "LastName", xpath : "generalInfo/@lastName"}, {name : "Email", xpath : "generalInfo"} ], searchField:"//person" } );
-
- new $.ig.DataSchema( type:object, options:object );
- type
- Type:object
- options
- Type:object
Code Sample
var xmlSchema = new $.ig.DataSchema( "xml", {fields:[ {name : "FirstName", xpath: "generalInfo/@firstName"}, {name : "LastName", xpath : "generalInfo/@lastName"}, {name : "Email", xpath : "generalInfo"} ], searchField:"//person" } );
-
fields
- .fields( );
Type="array" A list of field definitions specifying the schema of the data source. Field objects description: {fieldName, [fieldDataType], [fieldXPath]}.
Code Sample
var xmlSchema = new $.ig.DataSchema( "xml", {fields:[ {name : "FirstName", xpath: "generalInfo/@firstName"}, {name : "LastName", xpath : "generalInfo/@lastName"}, {name : "Email", xpath : "generalInfo"} ], searchField:"//person" } ); var fields = xmlSchema.fields();
-
isEmpty
- .isEmpty( o:object );
Specifies if the object is null, undefined, or an empty string.
- o
- Type:object
- the object to check for being empty.
Code Sample
var arrayOfObjectsSchema = new $.ig.DataSchema("array", { outputResultsName: "res_data", fields:[ { name: "make", type: "string" }, { name: "model", type: "string" } ] }); var result = arrayOfObjectsSchema.isEmpty(obj);
-
isObjEmpty
- .isObjEmpty( obj:object );
Specifies if the object has custom properties or not.
- obj
- Type:object
- the object to check for presence or lack of custom properties.
Code Sample
var arrayOfObjectsSchema = new $.ig.DataSchema("array", { outputResultsName: "res_data", fields:[ { name: "make", type: "string" }, { name: "model", type: "string" } ] }); var result = arrayOfObjectsSchema.isObjEmpty(obj);
-
transform
- .transform( data:object );
- Return Type:
- object
- Return Type Description:
- the transformed data.
Performs a transformation on the schema so that the resulting data matches the schema.
- data
- Type:object
- the data to transform.
Code Sample
var arrayOfObjectsSchema = new $.ig.DataSchema("array", { outputResultsName: "res_data", fields:[ { name: "make", type: "string" }, { name: "model", type: "string" } ] }); var data = arrayOfObjectsSchema.transform(arrayOfObjects);