ig.DataSchema

ig.DataSchema_image

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

jquery-1.9.1.js
infragistics.util.js
infragistics.util.jquery.js

  • 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:
      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
        object.

        Members

          • 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"
            }
        );
The current widget has no events.

  • 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);

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.