Ignite UI™ API Documentation

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

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"
      }
  ); 

childDataProperty

Type:

string

Default:

null

This is the property (xpath) in the data source where the child records of a record are located. Used in XML binding.

fields

Type:: object
Default:: []

A list of field definitions specifying the schema of the data source. Field objects description: {name, [type], [xpath]}
returnType="array".

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"
        }
    ); 

formatter

Type:

object

Default:

""

ParamType="function" optional="true" formatter function which accepts three parameters: val - value of the field; record - data source record; field - field definition; and return the formatted string. Formatter function is used when filtering by all fields.

mapper

Type:: enumeration
Default:: ""

This option is applicable only for fields with fieldDataType="object". Reference to a function (string or function) that can be used for complex data extraction from the data records, whose return value will be used for all data operations associated with this field.

Code Sample

var xmlSchema = new $.ig.DataSchema(
    "xml",
        {fields: [
            {name: "ID", type: "number"}, 
            {name: "Name", type: "number"}, 
            {name: "Price", type: "string"},
            {name: "Category", type: "object", mapper: function (record) {
                return record.Category.Name;
              }
            }]
        }
   );

name

Type:: string
Default:: ""

Name of the field.

Code Sample

var xmlSchema = new $.ig.DataSchema(
    "xml",
        {fields: [
            {name: "ID", type: "number"}, 
            {name: "Name", type: "number"}, 
            {name: "Price", type: "string"} ]
        }
   );

type

Type:: enumeration
Default:: ""

data type of the field string
number
bool
date
time
object.

Members

time
Type:object

string
number
bool
date
object

Code Sample

var xmlSchema = new $.ig.DataSchema(
    "xml",
       {fields: [
            {name: "ID", type: "number"}, 
            {name: "Name", type: "number"}, 
            {name: "Price", type: "string"},
            {name: "OrderDate", type: "date"},
            {name: "Delivered", type: "bool"},
            {name: "Category", type: "object", mapper: function (record) {
               return record.Category.Name;
             }
           }]
       }
    );

xpath

Type:: string
Default:: ""

The XPath expression to map the node to the field.

Code Sample

var xmlSchema = new $.ig.DataSchema(
    "xml", 
        {fields:[ 
            {name : "ID", xpath: "generalInfo/@ID"}, 
            {name : "Name", xpath : "generalInfo/@Name"}, 
            {name : "Email",  xpath : "generalInfo/@Email""} ]
        }
    ); 

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"
    }
);

Show Details

ig.DataSchema
Constructor

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( );
Return 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);

Ignite UI for jQuery | API Reference

ig.DataSchema

Code Sample

Related Samples

Related Topics

Dependencies

schema

Code Sample

childDataProperty

fields

Code Sample

formatter

mapper

Code Sample

name

Code Sample

type

Members

Code Sample

xpath

Code Sample

outputResultsName

Code Sample

searchField

Code Sample

ig.DataSchema
Constructor

Code Sample

fields

Code Sample

isEmpty

Code Sample

isObjEmpty

Code Sample

transform

Code Sample