Ignite UI API Reference

Configure datasource settings.

 
          var ds = new $.ig.TreeHierarchicalDataSource({
              dataSource: products
          });
          ds.dataBind();
      

• &nbspaggregateTransactions

  Type:

  bool

  Default:

  false

  If set to true, the following behavior will take place:
  if a new row is added, and then deleted, there will be no transaction added to the log
  if an edit is made to a row or cell, then the value is brought back to its original value, the transaction should be removed
  Note: This option takes effect only when autoCommit is set to false.

  Code Sample

   
  				var ds = new $.ig.TreeHierarchicalDataSource({
  	              aggregateTransactions: true,
                    dataSource: arrayOfObjects
                  });
            

• &nbspautoCommit

  Type:

  bool

  Default:

  false

  If auto commit is true, data will be automatically commited to the data source, once a value or a batch of values are updated via saveChanges().

  Code Sample

   
                  var ds = new $.ig.TreeHierarchicalDataSource({
  	                autoCommit: true
                  });
            

• &nbspcallback

  Type:

  function

  Default:

  null

  Callback function to call when data binding is complete.

  Code Sample

   
  				var render = function (success, error) {
  					if (success) {
  						alert("success");
  					} else {
  						alert(error);
  					}
  				}
  		
  				$(window).load(function () {			
  					var url = "http://odata.netflix.com/Catalog/Titles?$format=json&$callback=?"; 
  					ds = new $.ig.TreeHierarchicalDataSource({
  						type: "remoteUrl", 
  						callback: render, 
  						dataSource: url, 
  						schema: oDataSchema, 
  						responseDataKey : "d.results", 
  						responseDataType: "jsonp", 
  					});
  					ds.dataBind();			
  				});
            

• &nbspcallee

  Type:

  object

  Default:

  null

  Object on which to invoke the callback function.

  Code Sample

   
                  var Bob = {
  	                name: "Bob",
  	                greet: function () {
  		                alert("Hi, I'm " + this.name);
  	                }
                  };
  
                  var products = [];
                  products[0] = {
  	                "ProductID": 1,
  	                "Name": "Adjustable Race",
  	                "ProductNumber": "AR-5381"
                  };
                  products[1] = {
  	                "ProductID": 2,
  	                "Name": "Bearing Ball",
  	                "ProductNumber": "BA-8327"
                  };
  
                  var ds;
  
                  $(document).ready(function () {
  	                ds = new $.ig.TreeHierarchicalDataSource({
  		                dataSource: products,
  		                callee: Bob,
  		                callback: Bob.greet
  	                });
  
  	                ds.dataBind();
                  });
            

• &nbspdata

  Type:

  array

  Default:

  []

  Elements Type:

  object

  This is the normalized (transformed) resulting data, after it's fetched from the data source.

  Code Sample

   
                          var ds = new $.ig.TreeHierarchicalDataSource({
  		                    data: normalizedArrayOfObjects
                          });
            

• &nbspdataBinding

  Type:

  object

  Default:

  null

  Client-side dataBinding event. Can be a string pointing to a function name, or an object pointing to a function.

  Code Sample

   
                  var myDataBinding = function () {
  		                alert("myDataBinding");
  	                }
  
                  var products = [];
                  products[0] = {
  	                "ProductID": 1,
  	                "Name": "Adjustable Race",
  	                "ProductNumber": "AR-5381"
                  };
                  products[1] = {
  	                "ProductID": 2,
  	                "Name": "Bearing Ball",
  	                "ProductNumber": "BA-8327"
                  };
  
                  var ds;
  
                  $(window).ready(function () {
  	                ds = new $.ig.TreeHierarchicalDataSource({
  		                dataBinding: myDataBinding,
  		                dataSource: products
  	                });
                  });    
            

• &nbspdataBound

  Type:

  object

  Default:

  null

  Client-side dataBound event. Can be a string pointing to a function name, or an object pointing to a function.

  Code Sample

   
                  var myDataBound = function () {
  		                alert("myDataBound");
  	                }
  
                  var products = [];
                  products[0] = {
  	                "ProductID": 1,
  	                "Name": "Adjustable Race",
  	                "ProductNumber": "AR-5381"
                  };
                  products[1] = {
  	                "ProductID": 2,
  	                "Name": "Bearing Ball",
  	                "ProductNumber": "BA-8327"
                  };
  
                  var ds;
  
                  $(window).ready(function () {
  	                ds = new $.ig.TreeHierarchicalDataSource({
  		                dataBound: myDataBound
  	                });
  
  	                ds.dataBind();
  
                  });
            

• &nbspdataSource

  Type:

  object

  Default:

  null

  This is the source of data - non normalized. Can be an array, can be reference to some JSON object, can be a DOM element for a HTML TABLE, or a function.

  Code Sample

   
  				var jsonSchema = new $.ig.DataSchema("json", {fields:[ 
  				{name: "ProductID", type: "number"},
  				{name: "Name", type: "string"},
  				{name: "ProductNumber", type: "string"},
  				{name: "Color", type: "string"}, 
  				{name: "StandardCost", type: "string"}],  
  				searchField:"Records" });
  			
  				ds = new $.ig.TreeHierarchicalDataSource({type: "json", dataSource: jsonData, schema: jsonSchema});
  				ds.dataBind();	
            

• &nbspfields

  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 products = [];
                  products[0] = {
  	                "ProductID": 1,
  	                "Name": "Adjustable Race",
  	                "ProductNumber": "AR-5381"
                  };
                  products[1] = {
  	                "ProductID": 2,
  	                "Name": "Bearing Ball",
  	                "ProductNumber": "BA-8327"
                  };
  
                  var ds;
                  $(window).ready(function () {
  
  	                ds = new $.ig.TreeHierarchicalDataSource({
  		                dataSource: products,
  		                fields: [{
  			                name: "ProductID",
  			                type: "number"
  		                }, {
  			                name: "Name",
  			                type: "string"
  		                }, {
  			                name: "ProductNumber",
  			                type: "string"
  		                }]
  	                });
  
  	                ds.dataBind();
                  });
            

• &nbspfiltering

  Type:

  object

  Default:

  {}

  Settings related to built-in filtering functionality.

  Code Sample

   
  			jsonDs = new $.ig.TreeHierarchicalDataSource( {
                  filtering: { 
                      type: "local",
                      caseSensitive: true,
                      applyToAllData: true
                  }, 
                  dataSource: jsonData				
  			}).dataBind();
            

  • applyToAllData

    Type:

    bool

    Default:

    true

    If the type of paging/sorting/filtering is local and applyToAllData is true, filtering will be performed on the whole data source that's present locally, otherwise only on the current dataView. if type is remote, this setting doesn't have any effect.

    Code Sample

     
    			jsonDs = new $.ig.TreeHierarchicalDataSource( {
                    filtering: { 
                        type: "local",
                        caseSensitive: true,
                        applyToAllData: true
                    }, 
                    dataSource: jsonData				
    			}).dataBind(); 
                  

  • caseSensitive

    Type:

    bool

    Default:

    false

    Enables or disables case sensitive filtering on the data. Works only for local filtering.

    Code Sample

     
                jsonDs = new $.ig.TreeHierarchicalDataSource( {
                    filtering: { 
                        type: "local",
                        caseSensitive: true,
                        applyToAllData: true
                    }, 
                    dataSource: jsonData				
    			}).dataBind();
                  

  • customFunc

    Type:

    object

    Default:

    null

    Can point to either a string or a function object. The parameters that are passed are 1) the data array to be filtered, 2) the filtering expression definitions. Should return an array of the filtered data.

    Code Sample

     
                        var ds;
    
                        var render = function (success, error) {
    		                    if (success) {
    			                    var expr = "Cr";
    			                    cond = "startsWith";
    
    			                    ds.filter([{
    				                    fieldName: "Name",
    				                    expr: expr,
    				                    cond: cond
    			                    }], true);
    
                              var template = "<tr><td>${Name}</td><td>${Price}</td><td>${Rating}</td></tr>",
                              resultHtml = $.ig.tmpl(template, ds.dataView());
                              $("#table").html(resultHtml);
    		                    } else {
    			                    alert(error);
    		                    }
    	                    }
    
    
                        var myCustomFunc = function (fieldExpression, data) {
    		                    var result = [];
    		                    result[0] = data[0];
    		                    return result;
    	                    }
    
                        $(window).load(function () {
    	                    var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    	                    ds = new $.ig.TreeHierarchicalDataSource({
    		                    callback: render,
    		                    dataSource: url,
    		                    schema: {
    			                    fields: [{
    				                    name: "Name"
    			                    }, {
    				                    name: "Price"
    			                    }, {
    				                    name: "Rating"
    			                    }],
    			                    searchField: "d"
    		                    },
    		                    responseDataKey: "d",
    		                    responseDataType: "jsonp",
    		                    filtering: {
    			                    type: "remote",
    			                    customFunc: myCustomFunc
    		                    }
    	                    });
    	                    ds.dataBind();
    
                        });
                  

  • defaultFields

    Type:

    array

    Default:

    []

    Elements Type:

    object

    Data will be initially filtered accordingly, directly after dataBind().

    Code Sample

     
                        $(window).load(function () {
    	                    var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    	                    ds = new $.ig.TreeHierarchicalDataSource({
    		                    callback: render,
    		                    dataSource: url,
    		                    schema: {
    			                    fields: [{
    				                    name: "Name"
    			                    }, {
    				                    name: "Price"
    			                    }, {
    				                    name: "Rating"
    			                    }],
    			                    searchField: "d"
    		                    },
    		                    responseDataKey: "d",
    		                    responseDataType: "jsonp",
    		                    filtering: {
    			                    type: "remote",
    			                    defaultFields: [
    									{
    										fieldName: "Price", 
    										cond:"GreaterThan", 
    										expr: 20
    									}
    								]
    		                    }
    	                    });
    	                    ds.dataBind();
                        });
                  

  • expressions

    Type:

    array

    Default:

    []

    Elements Type:

    object

    A list of expression objects, containing the following key-value pairs: fieldName, expression (search string), condition , and logic (AND/OR).

    Code Sample

     
                var url = "/demos/server/proxy.php?url=http://services.odata.org/OData/OData.svc/Products?$format=json";
    			ds = new $.ig.TreeHierarchicalDataSource({
                    callback:render, 
                    dataSource: url, 
    			    localSchemaTransform: false, 
                    responseDataKey: "d",
    			    filtering: {
                        expressions:[
                            {
                                fieldName: "Price", 
                                cond:"GreaterThan", 
                                expr: 20
                            }
                        ]
                    },
    			    schema: {
                        fields: [
                            {name : "Price"}, 
                            {name : "Name"}, 
                            {name: "Rating"}
                        ], 
                        searchField: "d"
                    }
    			});
    			
    			ds.dataBind(); 
                  

  • exprString

    Type:

    string

    Default:

    ""

    An "SQL-like' encoded expressions string. Takes precedence over "expressions". Example: col2 > 100; col2 LIKE %test%.

    Code Sample

     
                        var render = function (success, error) {
    		                    if (success) {
                              var template = "<tr><td>${Name}</td><td>${Price}</td><td>${Rating}</td></tr>",
                              resultHtml = $.ig.tmpl(template, ds.dataView());
                              $("#table").html(resultHtml);
    		                    } else {
    			                    alert(error);
    		                    }
    	                    }
    
                        var ds;
    
                        $(window).load(function () {
    	                    var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    	                    ds = new $.ig.TreeHierarchicalDataSource({
    		                    callback: render,
    		                    dataSource: url,
    		                    schema: {
    			                    fields: [{
    				                    name: "Name"
    			                    }, {
    				                    name: "Price"
    			                    }, {
    				                    name: "Rating"
    			                    }],
    			                    searchField: "d"
    		                    },
    		                    responseDataKey: "d",
    		                    responseDataType: "jsonp",
    		                    filtering: {
    			                    type: "remote",
    			                    exprString: "Name LIKE Cr%"
    		                    }
    	                    });
    	                    ds.dataBind();
                        });
                  

  • filterExprUrlKey

    Type:

    string

    Default:

    null

    Url key that will be encoded in the request if remote filtering is performed. Default value of null implies OData-style URL encoding. Please see http://www.odata.org/developers/protocols/uri-conventions for details.

    Code Sample

     
                        var render = function (success, error) {
    		                    if (success) {
                              var template = "<tr><td>${Name}</td><td>${Price}</td><td>${Rating}</td></tr>",
                              resultHtml = $.ig.tmpl(template, ds.dataView());
                              $("#table").html(resultHtml);
    		                    } else {
    			                    alert(error);
    		                    }
    	                    }
    
                        var ds;
    
                        $(window).load(function () {
    	                    var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    	                    ds = new $.ig.TreeHierarchicalDataSource({
    		                    callback: render,
    		                    dataSource: url,
    		                    schema: {
    			                    fields: [{
    				                    name: "Name"
    			                    }, {
    				                    name: "Price"
    			                    }, {
    				                    name: "Rating"
    			                    }],
    			                    searchField: "d"
    		                    },
    		                    responseDataKey: "d",
    		                    responseDataType: "jsonp",
    		                    filtering: {
    			                    type: "remote",
    			                    filterExprUrlKey: "filter",
    			                    expressions: [{
    				                    fieldName: "Name",
    				                    cond: "Contains",
    				                    expr: "Cr"
    			                    }]
    		                    }
    	                    });
    	                    ds.dataBind();
                        });
                  

  • filterLogicUrlKey

    Type:

    string

    Default:

    filterlogic

    Url key that will be encoded in the request, specifying if the filtering logic will be AND or OR.

    Code Sample

     
                        var render = function (success, error) {
    		                    if (success) {
                              var template = "<tr><td>${Name}</td><td>${Price}</td><td>${Rating}</td></tr>",
                              resultHtml = $.ig.tmpl(template, ds.dataView());
                              $("#table").html(resultHtml);
    		                    } else {
    			                    alert(error);
    		                    }
    	                    }
    
                        var ds;
    
                        $(window).load(function () {
    	                    var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    	                    ds = new $.ig.TreeHierarchicalDataSource({
    		                    callback: render,
    		                    dataSource: url,
    		                    schema: {
    			                    fields: [{
    				                    name: "Name"
    			                    }, {
    				                    name: "Price"
    			                    }, {
    				                    name: "Rating"
    			                    }],
    			                    searchField: "d"
    		                    },
    		                    responseDataKey: "d",
    		                    responseDataType: "jsonp",
    		                    filtering: {
    			                    type: "remote",
    			                    filterLogicUrlKey: "testFilterLogicUrlKey",
    			                    expressions: [{
    				                    fieldName: "Name",
    				                    cond: "Contains",
    				                    expr: "Cr",
    				                    logic: "OR"
    			                    }]
    		                    }
    	                    });
    	                    ds.dataBind();
                        });
                  

  • type

    Type:

    enumeration

    Default:

    remote

    Filtering type.

    Members

    • remote
    • Type:string
    • Parameters will be encoded and it's up to the backend to interpred them from the response.
    • local
    • Type:string
    • The data will be filtered automatically client-side.

    Code Sample

     
                jsonDs = new $.ig.TreeHierarchicalDataSource( {
                    filtering: { 
                        type: "local",
                        caseSensitive: true,
                        applyToAllData: true
                    }, 
                    dataSource: jsonData			
    			}).dataBind();
                  

• &nbspid

  Type:

  string

  Default:

  ds

  Setting this is only necessary when the data source is set to a table in string format. we need to create an invisible dummy data container in the body and append the table data to it.

  Code Sample

   
                  var ds = $.ig.TreeHierarchicalDataSource({
  	                id: "myId"
                  });
            

• &nbsplocalSchemaTransform

  Type:

  bool

  Default:

  true

  If set to false will disable transformations on schema, even if it is defined locally in the javascript code.

  Code Sample

   
              var url = "/demos/server/proxy.php?url=http://services.odata.org/OData/OData.svc/Products?$format=json";
  			ds = new $.ig.TreeHierarchicalDataSource({
                  callback:render, 
                  dataSource: url, 
  			    localSchemaTransform: false, 
                  responseDataKey: "d",
  			    schema: {fields: [
                      {name : "Price"}, 
                      {name : "Name"}, 
                      {name: "Rating"}
                  ]}
              });
  			
  			ds.dataBind();
            

• &nbspoutputResultsName

  Type:

  string

  Default:

  null

  This is the property in the dataView where actual resulting records will be put. (So the dataView will not be array but an object if this is defined), after the potential data source transformation.

  Code Sample

   
                  var render = function (success, error) {
  		                if (success) {
                        var template = "<tr><td>${Name}</td><td>${Price}</td><td>${Rating}</td></tr>",
                        resultHtml = $.ig.tmpl(template, ds.dataView());
                        $("#table").html(resultHtml);
  		                } else {
  			                alert(error);
  		                }
  	                }
                  var ds;
                  $(window).load(function () {
  	                var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
  	                ds = new $.ig.TreeHierarchicalDataSource({
  		                callback: render,
  		                dataSource: url,
  		                schema: {
  			                fields: [{
  				                name: "Name"
  			                }, {
  				                name: "Price"
  			                }, {
  				                name: "Rating"
  			                }],
  			                searchField: "d"
  		                },
  		                responseDataKey: "d",
  		                responseDataType: "jsonp",
  		                outputResultsName: "myOutputResultsName"
  	                });
  	                ds.dataBind();
                  });
            

• &nbsppaging

  Type:

  object

  Default:

  {}

  Settings related to built-in paging functionality.

  Code Sample

   
  				$(window).load(function () {
  					ds = new $.ig.TreeHierarchicalDataSource({
  						type: "json", 
  						dataSource: adventureWorks, 
  						responseDataKey: "Records", 
  						paging: {
  							enabled : true, 
  							pageSize:10, 
  							type: "local" 
  						}
  					});
  					
  					ds.dataBind();			
  				});		
            

  • appendPage

    Type:

    bool

    Default:

    false

    Whether when a new page of data is requested we should append the new data to the existing data.

    Code Sample

     
    					var ds = new $.ig.TreeHierarchicalDataSource({
    					dataSource: products,  
    					paging: {
    						enabled: true,
    						appendPage : true
    					}
                  

  • enabled

    Type:

    bool

    Default:

    false

    Paging is not enabled by default.

    Code Sample

     
    					ds = new $.ig.TreeHierarchicalDataSource({
    						type: "json", 
    						dataSource: adventureWorks, 
    						responseDataKey: "Records", 
    						paging: {
    							enabled : true, 
    							pageSize:10, 
    							type: "local" 
    						}
    					});
                  

  • pageIndex

    Type:

    number

    Default:

    0

    Current page index.

    Code Sample

     
                  	ds = new $.ig.TreeHierarchicalDataSource({
    					type: "json", 
    					dataSource: adventureWorks, 
    					responseDataKey: "Records",
    					schema: jsonSchema, 
    					paging: 
                        {
                            enabled : true, 
                            pageSize:10, 
                            type: "local",
                            pageIndex: 2
                        }
                    });
    				ds.dataBind();	
                  

  • pageIndexUrlKey

    Type:

    string

    Default:

    null

    Denotes the name of the encoded URL parameter that will state what is the currently requested page index.

    Code Sample

     
                        var ds = new $.ig.TreeHierarchicalDataSource({
    	                    type: "json",
    	                    dataSource: adventureWorks,
    	                    responseDataKey: "Records",
    	                    paging: {
    		                    enabled: true,
    		                    pageSize: 10,
    		                    pageIndex: 2,
    		                    pageIndexUrlKey: "myPageIndexUrlKey",
    		                    type: "local"
    	                    }
                        });
                  

  • pageSize

    Type:

    number

    Default:

    5

    Number of records on each page.

    Code Sample

     
                		ds = new $.ig.TreeHierarchicalDataSource({
    						type: "json", 
    						dataSource: adventureWorks, 
    						responseDataKey: "Records", 
    						paging: {
    							enabled : true, 
    							pageSize:10, 
    							type: "local" 
    						}
    					});
                  

  • pageSizeUrlKey

    Type:

    string

    Default:

    null

    Denotes the name of the encoded URL parameter that will state what is the currently requested page size.

    Code Sample

     
                         var ds = new $.ig.TreeHierarchicalDataSource({
     	                    type: "json",
     	                    dataSource: adventureWorks,
     	                    responseDataKey: "Records",
     	                    paging: {
     		                    enabled: true,
     		                    pageSize: 10,
     		                    pageSizeUrlKey: "myPageSizeUrlKey",
     		                    type: "local"
     	                    }
                         });
                  

  • type

    Type:

    enumeration

    Default:

    remote

    Type for the paging operation .

    Members

    • local
    • Type:string
    • Data is paged client-side.
    • remote
    • Type:string
    • A remote request is done and URL params encoded.

    Code Sample

     
                  		ds = new $.ig.TreeHierarchicalDataSource({
    						type: "json", 
    						dataSource: adventureWorks, 
    						responseDataKey: "Records", 
    						paging: {
    							enabled : true, 
    							pageSize:10, 
    							type: "local" 
    						}
    					});
                  

• &nbspprimaryKey

  Type:

  string

  Default:

  null

  The unique field identifier.

  Code Sample

   
                $(window).load(function () {
  					ds = new $.ig.TreeHierarchicalDataSource({
                          primaryKey: "CustomerID",
  						type: "json", 
  						dataSource: adventureWorks, 
  						responseDataKey: "Records", 
  					});
  					
  					ds.dataBind();			
  			    });
            

• &nbsprequestType

  Type:

  string

  Default:

  get

  Specifies the HTTP verb to be used to issue the request.

  Code Sample

   
                $(window).load(function () {
  					ds = new $.ig.TreeHierarchicalDataSource({
                          primaryKey: "CustomerID",
  						requestType: "get", 
  						dataSource: "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?", 
  						responseDataKey: "Records", 
  					});
  					
  					ds.dataBind();
  			    });
            

• &nbspresponseContentType

  Type:

  string

  Default:

  null

  Content type of the response. See http://api.jquery.com/jQuery.ajax/ => contentType.

  Code Sample

   
                   var ds = new $.ig.TreeHierarchicalDataSource({
   	                type: "json",
   	                dataSource: adventureWorks,
   	                responseDataKey: "Records",
   	                responseContentType: "application/x-www-form-urlencoded; charset=UTF8;"
                   });
            

• &nbspresponseDataKey

  Type:

  string

  Default:

  null

  Property in the response which specifies where the data records array will be held (if the response is wrapped).

  Code Sample

   
            		var url = "http://odata.netflix.com/Catalog/Titles?$format=json&$callback=?";
  		        var jsonp = new $.ig.TreeHierarchicalDataSource({type: "json", dataSource: url, responseDataKey: "d.results"});
            

• &nbspresponseDataType

  Type:

  enumeration

  Default:

  null

  Response type when a URL is set as the data source. See http://api.jquery.com/jQuery.ajax/ => dataType .

  Members

  • json
  • Type:string
  • xml
  • Type:string
  • html
  • Type:string
  • script
  • Type:string
  • jsonp
  • Type:string
  • text
  • Type:string

  Code Sample

   
  				var render = function (success, error) {
  					if (success) {
  						alert("success");
  					} else {
  						alert(error);
  					}
  				}
  		
  				$(window).load(function () {			
  					var url = "http://odata.netflix.com/Catalog/Titles?$format=json&$callback=?"; 
  					ds = new $.ig.TreeHierarchicalDataSource({
  						type: "remoteUrl", 
  						callback: render, 
  						dataSource: url, 
  						schema: oDataSchema, 
  						responseDataKey : "d.results", 
  						responseDataType: "jsonp", 
  					});
  					ds.dataBind();			
  				});
            

• &nbspresponseTotalRecCountKey

  Type:

  string

  Default:

  null

  Property in the response which specifies the total number of records in the backend (this is needed for paging).

  Code Sample

   
                   var ds = new $.ig.TreeHierarchicalDataSource({
   	                type: "json",
   	                dataSource: adventureWorks,
   	                responseDataKey: "Records",
   	                responseTotalRecCountKey: "1024"
                   });
            

• &nbsprowAdded

  Type:

  function

  Default:

  null

  A function to call when row is added.
  Function takes first argument item and second argument dataSource.
  Use item.row to obtain reference to the added row.
  Use item.rowId to get the row ID.
  Use dataSource to obtain reference to $.ig.DataSource.

  Code Sample

   
                  $.ig.TreeHierarchicalDataSource({
                          rowAdded: function (item, dataSource) {…}    
                       });
            

• &nbsprowDeleted

  Type:

  function

  Default:

  null

  A function to call when row is deleted.
  Use item.row to obtain reference to the deleted row.
  Use item.rowId to get the row ID.
  Use item.rowIndex to get the row index.
  Use dataSource to obtain reference to $.ig.DataSource.

  Code Sample

   
                  $.ig.TreeHierarchicalDataSource({
                          rowDeleted: function (item, dataSource) {…}    
                       });
            

• &nbsprowInserted

  Type:

  function

  Default:

  null

  A function to call when row is inserted.
  Function takes first argument item and second argument dataSource.
  Use item.row to obtain reference to the inserted row.
  Use item.rowId to get the row ID.
  Use item.rowIndex to get the row index.
  Use dataSource to obtain reference to $.ig.DataSource.

  Code Sample

   
                  $.ig.TreeHierarchicalDataSource({
                          rowInserted: function (item, dataSource) {…}    
                       });
          

• &nbsprowUpdated

  Type:

  function

  Default:

  null

  A function to call when row is updated (edited).
  Function takes first argument item and second argument dataSource.
  Use item.rowIndex to get the row index.
  Use item.newRow to obtain reference to the updated row.
  Use item.oldRow to obtain reference to the row that was updated.
  Use dataSource to obtain reference to $.ig.DataSource.

  Code Sample

   
                  $.ig.TreeHierarchicalDataSource({
                          rowUpdated: function (item, dataSource) {…}    
                       });
            

• &nbspschema

  Type:

  object

  Default:

  null

  A schema object that defines which fields from the data to bind to.

  Code Sample

   
  				var jsonSchema = new $.ig.DataSchema("json", {fields:[ 
  				{name: "ProductID", type: "number"},
  				{name: "Name", type: "string"},
  				{name: "ProductNumber", type: "string"},
  				{name: "Color", type: "string"}, 
  				{name: "StandardCost", type: "string"}],  
  				searchField:"Records" });
  			
  				ds = new $.ig.TreeHierarchicalDataSource({type: "json", dataSource: jsonData, schema: jsonSchema});
  				ds.dataBind();	
            

• &nbspserializeTransactionLog

  Type:

  bool

  Default:

  true

  If true, will serialize the transaction log of updated values - if any - whenever commit is performed via a remote request.

  Code Sample

   
                  $.ig.TreeHierarchicalDataSource({
                          serializeTransactionLog: false
                       });
            

• &nbspsorting

  Type:

  object

  Default:

  {}

  Settings related to built-in sorting functionality.

  Code Sample

   
            		$(window).load(function () {
  					ds = new $.ig.TreeHierarchicalDataSource({
  						type: "json", 
  						dataSource: adventureWorks, 
                          sorting: {
                              type: "local",
                              caseSensitive: true
                          }   
  					});
  					
  					ds.dataBind();			
  				});	
            

  • applyToAllData

    Type:

    bool

    Default:

    true

    If the sorting type is local and applyToAllData is true, sorting will be performed on the whole data source that's present locally, otherwise only on the current dataView. If sorting type is remote, this setting doesn't have any effect.

    Code Sample

     
                    jsonDs = new $.ig.TreeHierarchicalDataSource({
                    sorting: { 
                        type: "local", 
                        applyToAllData: true
                    }, 
                    dataSource: jsonData 
                }).dataBind();
                  

  • caseSensitive

    Type:

    bool

    Default:

    false

    Specifies if sorting will be case sensitive or not. Works only for local sorting.

    Code Sample

     
                            $(window).load(function () {
    					        ds = new $.ig.TreeHierarchicalDataSource({
    						        type: "json", 
    						        dataSource: adventureWorks, 
                                    sorting: {
                                        type: "local",
                                        caseSensitive: true
                                    }   
    					        });
    					
    					        ds.dataBind();			
    				        });              
                  

  • compareFunc

    Type:

    object

    Default:

    null

    Custom comparison sorting function. Accepts the following arguments: fields, schema, booleand value whether sorting is ascending , convert function(please check option for customConvertFunc) and returns a value 0 indicating that values are equal, 1 indicating that val1 > val2 and -1 indicating that val1 < val2.

    Code Sample

     
                                      var render = function (success, error) {
    		                    if (success) {
                              var template = "<tr><td>${Name}</td><td>${Price}</td><td>${Rating}</td></tr>",
                              resultHtml = $.ig.tmpl(template, ds.dataView());
                              $("#table").html(resultHtml);
    		                    } else {
    			                    alert(error);
    		                    }
    	                    }
    
                        var myCompareFunc = function (fields, schema, reverse, convertf) {
    		                    return function (val1, val2) {
    			                    if (val1.Price > val2.Price) {
    				                    return 1;
    			                    }
    
    			                    if (val1.Price < val2.Price) {
    				                    return -1;
    			                    }
    
    			                    return 0;
    		                    }
    	                    }
    
                        var ds;
                        $(window).load(function () {
    	                    var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    	                    ds = new $.ig.TreeHierarchicalDataSource({
    		                    callback: render,
    		                    dataSource: url,
    		                    schema: {
    			                    fields: [{
    				                    name: "Name"
    			                    }, {
    				                    name: "Price"
    			                    }, {
    				                    name: "Rating"
    			                    }],
    			                    searchField: "d"
    		                    },
    		                    responseDataKey: "d",
    		                    responseDataType: "jsonp",
    		                    sorting: {
    			                    type: "local",
    			                    compareFunc: myCompareFunc,
    			                    defaultFields: [{
    				                    fieldName: "Price"
    			                    }]
    		                    }
    	                    });
    	                    ds.dataBind();
                        });
                  

  • customConvertFunc

    Type:

    object

    Default:

    null

    Custom data value conversion function(called from sorting function). Accepts a value of the data cell and column key and should return the converted value.

    Code Sample

     
                        var render = function (success, error) {
    		                    if (success) {
                              var template = "<tr><td>${Name}</td><td>${Price}</td><td>${Rating}</td></tr>",
                              resultHtml = $.ig.tmpl(template, ds.dataView());
                              $("#table").html(resultHtml);
    		                    } else {
    			                    alert(error);
    		                    }
    	                    }
    
                        var myCompareFunc = function (fields, schema, reverse, convertf) {
    		                    return function (obj1, obj2) {
    			                    a = convertf(obj1);
    			                    b = convertf(obj2);
    
    			                    if (a > b) {
    				                    return 1;
    			                    }
    
    			                    if (a < b) {
    				                    return -1;
    			                    }
    
    			                    return 0;
    		                    }
    	                    }
    
                        var myCustomConvertFunc = function (obj) {
    		                    return obj.Price;
    	                    }
    
                        var ds;
                        $(window).load(function () {
    	                    var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    	                    ds = new $.ig.TreeHierarchicalDataSource({
    		                    callback: render,
    		                    dataSource: url,
    		                    schema: {
    			                    fields: [{
    				                    name: "Name"
    			                    }, {
    				                    name: "Price"
    			                    }, {
    				                    name: "Rating"
    			                    }],
    			                    searchField: "d"
    		                    },
    		                    responseDataKey: "d",
    		                    responseDataType: "jsonp",
    		                    sorting: {
    			                    type: "local",
    			                    compareFunc: myCompareFunc,
    			                    customConvertFunc: myCustomConvertFunc,
    			                    defaultFields: [{
    				                    fieldName: "Price"
    			                    }]
    		                    }
    	                    });
    	                    ds.dataBind();
                        });
                  

  • customFunc

    Type:

    object

    Default:

    null

    Custom sorting function that can point to either a string or a function object. When the function is called, the following arguments are passed: data array, fields (array of field definitions) , direction ("asc" or "desc"). The function should return a sorted data array.

    Code Sample

     
                        var render = function (success, error) {
    		                    if (success) {
                              var template = "<tr><td>${Name}</td><td>${Price}</td><td>${Rating}</td></tr>",
                              resultHtml = $.ig.tmpl(template, ds.dataView());
                              $("#table").html(resultHtml);
    		                    } else {
    			                    alert(error);
    		                    }
    	                    }
    
                        var myCustomFunc = function (data, fields, direction) {
    		                    function myCompareFunc(obj1, obj2) {
    			                    if (direction == "desc") {
    				                    return obj2[fields[0].fieldName] - obj1[fields[0].fieldName];
    			                    }
    
    			                    return obj1[fields[0].fieldName] - obj2[fields[0].fieldName];
    		                    }
    		                    var result = data.sort(myCompareFunc);
    		                    return result;
    	                    }
    
                        var ds;
                        $(window).load(function () {
    	                    var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    	                    ds = new $.ig.TreeHierarchicalDataSource({
    		                    callback: render,
    		                    dataSource: url,
    		                    schema: {
    			                    fields: [{
    				                    name: "Name"
    			                    }, {
    				                    name: "Price"
    			                    }, {
    				                    name: "Rating"
    			                    }],
    			                    searchField: "d"
    		                    },
    		                    responseDataKey: "d",
    		                    responseDataType: "jsonp",
    		                    sorting: {
    			                    type: "local",
    			                    customFunc: myCustomFunc,
    			                    defaultFields: [{
    				                    fieldName: "Price"
    			                    }],
    			                    defaultDirection: "desc"
    		                    }
    	                    });
    	                    ds.dataBind();
                        });
                  

  • defaultDirection

    Type:

    enumeration

    Default:

    none

    Sorting direction .

    Members

    • none
    • Type:string
    • asc
    • Type:string
    • desc
    • Type:string

    Code Sample

     
                jsonDs = new $.ig.TreeHierarchicalDataSource({
                    sorting: { 
                        type: "local", 
                        defaultDirection: "asc" 
                    }, 
                    dataSource: jsonData 
                }).dataBind();
                  

  • defaultFields

    Type:

    array

    Default:

    []

    Elements Type:

    object

    When defaultDirection is different than "none", and defaultFields is specified, data will be initially sorted accordingly, directly after dataBind().

    Code Sample

     
    	                var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    	                var ds = new $.ig.TreeHierarchicalDataSource({
    		                callback: render,
    		                dataSource: url,
    		                schema: {
    			                fields: [{
    				                name: "Name"
    			                }, {
    				                name: "Price"
    			                }, {
    				                name: "Rating"
    			                }],
    			                searchField: "d"
    		                },
    		                responseDataKey: "d",
    		                responseDataType: "jsonp",
    		                sorting: {
    			                type: "local",
    			                defaultFields: [{
    				                fieldName: "Price"
    			                }]
    		                }
    	                });
                  

  • expressions

    Type:

    array

    Default:

    []

    Elements Type:

    object

    A list of sorting expressions , consisting of the following keys (and their respective values): fieldName and direction.

    Code Sample

     
    			ds = new $.ig.TreeHierarchicalDataSource({
                    callback: render, 
                    dataSource: url, 
    			    localSchemaTransform: false, 
                    responseDataKey: "d",			
    			    sorting: {
                        expressions:[
                            {
                                fieldName:"Rating", 
                                dir:"asc"}, 
                            {
                                fieldName:"Price", dir:"asc"
                            }
                        ]},
    			});
    			
    			ds.dataBind();
                  

  • exprString

    Type:

    string

    Default:

    ""

    Takes precedence over experssions, an "SQL-like" encoded expressions string : see sort(). Example col2 > 100 ORDER BY asc.

    Code Sample

     
                function sortRemote() {			
    			    ds.settings.sorting.type = "remote";
    			
    			    // remote sort
    			    ds.settings.sorting.exprString = "GNP " + dir;
    			    ds.dataBind();			
    		    }
                  

  • sortUrlAscValueKey

    Type:

    string

    Default:

    null

    URL param value for ascending type of sorting. Default is null and uses OData conventions.

    Code Sample

     
    	                var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    	                var ds = new $.ig.TreeHierarchicalDataSource({
    		                callback: render,
    		                dataSource: url,
    		                schema: {
    			                fields: [{
    				                name: "Name"
    			                }, {
    				                name: "Price"
    			                }, {
    				                name: "Rating"
    			                }],
    			                searchField: "d"
    		                },
    		                responseDataKey: "d",
    		                responseDataType: "jsonp",
    		                sorting: {
    			                type: "local",
    			                sortUrlAscValueKey: "mySortUrlAscValueKey"
    		                }
    	                });
                  

  • sortUrlDescValueKey

    Type:

    string

    Default:

    null

    URL param value for descending type of sorting. Default is null and uses OData conventions.

    Code Sample

     
    	                var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    	                var ds = new $.ig.TreeHierarchicalDataSource({
    		                callback: render, 
    		                dataSource: url,
    		                schema: {
    			                fields: [
    				                {name: "Name"}, 
    				                {name: "Price"}, 
    				                {name: "Rating"}
    			                ], 
    			                searchField: "d"
    		                },
    		                responseDataKey: "d", 
    		                responseDataType: "jsonp",
    		                sorting: {
    			                type: "local",
    			                sortUrlDescValueKey: "mySortUrlDescValueKey"
    		                }  
    	                });
                  

  • sortUrlKey

    Type:

    string

    Default:

    null

    URL param name which specifies how sorting expressions will be encoded in the URL. Default is null and uses OData conventions.

    Code Sample

     
    	                var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    	                var ds = new $.ig.TreeHierarchicalDataSource({
    		                callback: render, 
    		                dataSource: url,
    		                schema: {
    			                fields: [
    				                {name: "Name"}, 
    				                {name: "Price"}, 
    				                {name: "Rating"}
    			                ], 
    			                searchField: "d"
    		                },
    		                responseDataKey: "d", 
    		                responseDataType: "jsonp",
    		                sorting: {
    			                type: "local",
    			                sortUrlKey: "mySortUrlKey"
    		                }  
    	                });
                  

  • type

    Type:

    enumeration

    Default:

    remote

    Specifies whether sorting will be applied locally or remotely (via a remote request) .

    Members

    • remote
    • Type:string
    • local
    • Type:string

    Code Sample

     
                            $(window).load(function () {
    					        ds = new $.ig.TreeHierarchicalDataSource({
    						        type: "json", 
    						        dataSource: adventureWorks, 
                                    sorting: {
                                        type: "local",
                                        caseSensitive: true
                                    }   
    					        });
    					
    					        ds.dataBind();			
    				        });	
                  

• &nbspsummaries

  Type:

  object

  Default:

  {}

  Settings related to built-in summaries functionality.

  Code Sample

   
                  var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
  	            var ds = new $.ig.TreeHierarchicalDataSource({
  		            callback: render,
  		            dataSource: url,
  		            schema: {
  			            fields: [{
  				            name: "Name"
  			            }, {
  				            name: "Price"
  			            }, {
  				            name: "Rating"
  			            }],
  			            searchField: "d"
  		            },
  		            responseDataKey: "d",
  		            responseDataType: "jsonp",
  		            summaries: {
  			            type: "remote",
  			            columnSettings: [{
  				            columnKey: "Price",
  				            allowSummaries: false,
  				            summaryOperands: [{
  					            type: "count",
  					            active: true,
  					            order: 0
  				            }]
  			            }],
  			            summariesResponseKey: "d"
  		            }
  	            });
            

  • columnSettings

    Type:

    array

    Default:

    []

    Elements Type:

    object

    A list of column settings that specifies custom summaries options per column basis.

    Code Sample

     
                        var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
                        var ds = new $.ig.TreeHierarchicalDataSource({
    	                    callback: render,
    	                    dataSource: url,
    	                    schema: {
    		                    fields: [{
    			                    name: "Name"
    		                    }, {
    			                    name: "Price"
    		                    }, {
    			                    name: "Rating"
    		                    }],
    		                    searchField: "d"
    	                    },
    	                    responseDataKey: "d",
    	                    responseDataType: "jsonp",
    	                    summaries: {
    		                    columnSettings: [{
    			                    columnKey: "Price",
    			                    allowSummaries: false,
    			                    summaryOperands: [{
    				                    type: "count",
    				                    active: true,
    				                    order: 0
    			                    }]
    		                    }]
    	                    }
    
                        });
                  

  • summariesResponseKey

    Type:

    string

    Default:

    summaries

    Key for retrieving data from the summaries response - used only when summaries are remote.

    Code Sample

     
                        var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
                        var ds = new $.ig.TreeHierarchicalDataSource({
    	                    callback: render,
    	                    dataSource: url,
    	                    schema: {
    		                    fields: [{
    			                    name: "Name"
    		                    }, {
    			                    name: "Price"
    		                    }, {
    			                    name: "Rating"
    		                    }],
    		                    searchField: "d"
    	                    },
    	                    responseDataKey: "d",
    	                    responseDataType: "jsonp",
    	                    summaries: {
    		                    summariesResponseKey: "d"
    	                    }
    
                        });
                  

  • summaryExecution

    Type:

    enumeration

    Default:

    afterfilteringandpaging

    Determines when the summary values are calculated .

    Members

    • priortofilteringandpaging
    • Type:string
    • afterfilteringbeforepaging
    • Type:string
    • afterfilteringandpaging
    • Type:string

    Code Sample

     
                        var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
                        var ds = new $.ig.TreeHierarchicalDataSource({
    	                    callback: render,
    	                    dataSource: url,
    	                    schema: {
    		                    fields: [{
    			                    name: "Name"
    		                    }, {
    			                    name: "Price"
    		                    }, {
    			                    name: "Rating"
    		                    }],
    		                    searchField: "d"
    	                    },
    	                    responseDataKey: "d",
    	                    responseDataType: "jsonp",
    	                    summaries: {
    		                    summaryExecution: "priortofilteringandpaging"
    	                    }
    
                        });
                  

  • summaryExprUrlKey

    Type:

    string

    Default:

    summaries

    Url key for retrieving data from response - used only when summaries are remote.

    Code Sample

     
                        var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
                        var ds = new $.ig.TreeHierarchicalDataSource({
    	                    callback: render,
    	                    dataSource: url,
    	                    schema: {
    		                    fields: [{
    			                    name: "Name"
    		                    }, {
    			                    name: "Price"
    		                    }, {
    			                    name: "Rating"
    		                    }],
    		                    searchField: "d"
    	                    },
    	                    responseDataKey: "d",
    	                    responseDataType: "jsonp",
    	                    summaries: {
    		                    summaryExprUrlKey: "mySummaries"
    	                    }
                        });
                  

  • type

    Type:

    enumeration

    Default:

    remote

    Specifies whether summaries will be applied locally or remotely (via a remote request) .

    Members

    • remote
    • Type:string
    • A remote request is done and URL params encoded.
    • local
    • Type:string
    • Data is paged client-side.

    Code Sample

     
                  	    var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    	                var ds = new $.ig.TreeHierarchicalDataSource({
    		                callback: render,
    		                dataSource: url,
    		                schema: {
    			                fields: [{
    				                name: "Name"
    			                }, {
    				                name: "Price"
    			                }, {
    				                name: "Rating"
    			                }],
    			                searchField: "d"
    		                },
    		                responseDataKey: "d",
    		                responseDataType: "jsonp",
    		                summaries: {
    			                type: "remote"
    		                }
    	                });
                  

• treeDS

  Type:

  object

  Default:

  {}

  Configure tree datasource specific settings.

  Code Sample

   
              var ds = new $.ig.TreeHierarchicalDataSource({
                  dataSource: products,
                  treeDS: {
                      childDataKey: "Products",
                      initialExpandDepth: 10,
                      propertyDataLevel: "dataLevel"
                  }
              });
              

  • childDataKey

    Type:

    string

    Default:

    null

    Property name of the array of child data in a hierarchical data source.

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                dataSource: products,
                treeDS: {
                    childDataKey: "Products"
                }
            });
                  

  • dataSourceUrl

    Type:

    string

    Default:

    null

    Specifies a remote URL as a data source, from which data will be retrieved using an AJAX call ($.ajax).

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                treeDS: {
                    dataSourceUrl: "/api/products"
                }
            });
                  

  • enableRemoteLoadOnDemand

    Type:

    bool

    Default:

    false

    Specifies if data is loaded on demand from a remote server. Default is false.

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                treeDS: {
                    dataSourceUrl: "/api/products",
                    enableRemoteLoadOnDemand: true
                }
            });
                  

  • filtering

    Type:

    object

    Default:

    {}

    Configure datasource filtering settings.

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                dataSource: products,
                filtering: {
                  enabled: true,
                  type: "local"
                },
                treeDS: {
                    filtering: {
                        displayMode: "showWithAncestorsAndDescendants"
                    }
                }
            });
                  

    • displayMode

      Type:

      enumeration

      Default:

      showwithancestors

      If displayMode is showWithAncestorsAndDescendants, show all records that match filtering conditions and their child records, even if child records don't match filtering conditions. If displayMode is showWithAncestors show only those records that match filtering conditions and do not show child records(if any) that don't match filtering conditions.

      Code Sample

       
              var ds = new $.ig.TreeHierarchicalDataSource({
                  dataSource: products,
                  filtering: {
                    enabled: true,
                    type: "local"
                  },
                  treeDS: {
                      filtering: {
                          displayMode: "showWithAncestorsAndDescendants"
                      }
                  }
              });
                        

    • fromLevel

      Type:

      number

      Default:

      0

      Specifies from which data bound level to be applied filtering - 0 is the first level.

      Code Sample

       
              var ds = new $.ig.TreeHierarchicalDataSource({
                  dataSource: products,
                  filtering: {
                    enabled: true,
                    type: "local"
                  },
                  treeDS: {
                      filtering: {
                          fromLevel: 1
                      }
                  }
              });
                        

    • matchFiltering

      Type:

      string

      Default:

      __matchfiltering

      Filtering data source specific property - name of property in dataRecord object - indicates whether dataRow matches filtering conditions. It is used ONLY when filtering is applied.

      Code Sample

       
              var ds = new $.ig.TreeHierarchicalDataSource({
                  dataSource: products,
                  filtering: {
                    enabled: true,
                    type: "local"
                  },
                  treeDS: {
                      filtering: {
                          matchFiltering: "isFiltered"
                      }
                  }
              });
                        

    • toLevel

      Type:

      number

      Default:

      -1

      Specifies to which data bound level to be applied filtering - if -1 filtering should be applied to the last data bound level.

      Code Sample

       
              var ds = new $.ig.TreeHierarchicalDataSource({
                  dataSource: products,
                  filtering: {
                    enabled: true,
                    type: "local"
                  },
                  treeDS: {
                      filtering: {
                          toLevel: 5
                      }
                  }
              });
                        

  • foreignKey

    Type:

    string

    Default:

    null

    Unique identifier used in a self-referencing flat data source. Used with primaryKey to create a relationship among flat data sources.

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                dataSource: products,
                treeDS: {
                    foreignKey: "ParentID"
                }
            });
                  

  • initialExpandDepth

    Type:

    number

    Default:

    -1

    Specifies the depth down to which the tree grid would be expanded upon initial render. To expand all rows set value to -1. Default is -1.

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                dataSource: products,
                treeDS: {
                    initialExpandDepth: 5
                }
            });
                  

  • paging

    Type:

    object

    Default:

    {}

    Configure datasource paging settings.

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                dataSource: products,
                paging: {
                    enabled : true, 
                    pageSize:10, 
                    type: "local" 
                },
                treeDS: {
                    paging: {
                      mode: "allLevels"
                    }
                }
            });
                  

    • mode

      Type:

      enumeration

      Default:

      rootlevelonly

      Sets gets paging mode.

      Members

      • allLevels
      • Type:string
      • includes all visible records in paging.

      Code Sample

       
              var ds = new $.ig.TreeHierarchicalDataSource({
                  dataSource: products,
                  paging: {
                      enabled : true, 
                      pageSize:10, 
                      type: "local" 
                  },
                  treeDS: {
                      paging: {
                        mode: "allLevels"
                      }
                  }
              });
                        

  • propertyDataLevel

    Type:

    string

    Default:

    __ig_options.datalevel

    The name of the property that keeps track of the level in the hierarchy.Defaults to __ig_options.dataLevel.

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                dataSource: products,
                treeDS: {
                  propertyDataLevel: "_dataLevel"
                }
            });
                  

  • propertyExpanded

    Type:

    string

    Default:

    __ig_options.expanded

    The name of the property that keeps track of the expansion state of a data item. Defaults to __ig_options.expanded.

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                dataSource: products,
                treeDS: {
                  propertyExpanded: "_expanded"
                }
            });
                  

  • requestDataCallback

    Type:

    function

    Default:

    null

    Specifies a custom function to be called when the remote request for data has finished.

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                treeDS: {
                  dataSourceUrl: "/api/products",
                  requestDataCallback: function () {
    
                  }
                }
            });
                  

  • requestDataErrorCallback

    Type:

    function

    Default:

    null

    Specifies a custom function to be called when the remote request for data has finished with an error.

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                treeDS: {
                  dataSourceUrl: "/api/products",
                  requestDataErrorCallback: function () {
    
                  }
                }
            });
                  

  • requestDataOnToggle

    Type:

    bool

    Default:

    false

    Specifies whether the data should be reloaded on each expand in remote load on demand scenarios. If true the child data will be requested each time the parent row is expanded, otherwise it will be retrived only on the initial expand.

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                treeDS: {
            dataSourceUrl: "/api/products",
            requestDataOnToggle: true
                }
            });
                  

  • requestDataSuccessCallback

    Type:

    function

    Default:

    null

    Specifies a custom function to be called when the remote request for data has finished successfully.

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                treeDS: {
            dataSourceUrl: "/api/products",
            requestDataSuccessCallback: function () {
            
            }
                }
            });
                  

  • sorting

    Type:

    object

    Default:

    {}

    Configure datasource sorting settings.

    Code Sample

     
            var ds = new $.ig.TreeHierarchicalDataSource({
                dataSource: products,
                treeDS: {
                    sorting: {
              fromLevel: 1,
              toLevel: 5
            }
                }
            });
                  

    • fromLevel

      Type:

      number

      Default:

      0

      Specifies from which data bound level to be applied sorting - 0 is the first level.

      Code Sample

       
              var ds = new $.ig.TreeHierarchicalDataSource({
                  dataSource: products,
                  treeDS: {
                      sorting: {
                fromLevel: 1,
                toLevel: 5
              }
                  }
              });
                        

    • toLevel

      Type:

      number

      Default:

      -1

      Specifies to which data bound level to be applied sorting - if -1 sorting should be applied to the last data bound level.

      Code Sample

       
              var ds = new $.ig.TreeHierarchicalDataSource({
                  dataSource: products,
                  treeDS: {
                      sorting: {
                fromLevel: 1,
                toLevel: 5
              }
                  }
              });
                        

• &nbsptype

  Type:

  enumeration

  Default:

  unknown

  Type of the data source .

  Members

  • json
  • Type:string
  • Specifies that the data source is an already evaluated JSON (JavaScript object/array) or a string that can be evaluated to JSON.
  • xml
  • Type:string
  • Specifies that the data source is a XML Document object or a string that can be evaluated to XML.
  • unknown
  • Type:string
  • Specifies that the data source is of unknown type. In that case it will be analyzed and automatically detected if possible.
  • array
  • Type:string
  • Specifies that the data source is a simple array of objects.
  • htmlTableString
  • Type:string
  • Specifies that the data source points to a string that represents a HTML table.
  • htmlTableId
  • Type:string
  • Specifies that the data source points to an ID of a HTML Table element that's loaded on the page.
  • htmlTableDom
  • Type:string
  • The data source points to a DOM object that is of TABLE type.
  • invalid
  • Type:string
  • Set whenever data source is analyzed (in case its type is unknown) and the type cannot be detected.
  • remoteUrl
  • Type:string
  • Specifies that the data source points to a remote URL, from which data will be retrieved using an AJAX call ($.ajax).
  • htmlListDom
  • Type:string
  • The data source points to a DOM object that is of UL/OL type.
  • htmlSelectDom
  • Type:string
  • The data source points to a DOM object that is of SELECT type.
  • empty
  • Type:string

  Code Sample

   
  				$(window).load(function () {			
  					var url = "http://odata.netflix.com/Catalog/Titles?$format=json&$callback=?"; 
  					ds = new $.ig.TreeHierarchicalDataSource({
  						type: "remoteUrl", 
  						callback: render, 
  						dataSource: url, 
  						schema: oDataSchema, 
  						responseDataKey : "d.results", 
  						responseDataType: "jsonp", 
  					});
  					ds.dataBind();			
  				});
            

• &nbspupdateUrl

  Type:

  string

  Default:

  null

  Specifies an update remote URL, to which an AJAX request will be made as soon as saveChages() is called.

  Code Sample

   
  	            var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
  	            var ds = new $.ig.TreeHierarchicalDataSource({
  		            callback: render,
  		            dataSource: url,
  		            schema: {
  			            fields: [{
  				            name: "Name"
  			            }, {
  				            name: "Price"
  			            }, {
  				            name: "Rating"
  			            }],
  			            searchField: "d"
  		            },
  		            responseDataKey: "d",
  		            responseDataType: "jsonp",
  		            updateUrl: "http://example.com/myUpdateUrl/"
  
  	            });
            

• &nbspurlParamsEncoded

  Type:

  object

  Default:

  null

  Event that is fired after URL parameters are encoded (When a remote request is done). Can point to a function name or the function object itself.

  Code Sample

   
                  var render = function (success, error) {
  		                if (success) {
                        var template = "<tr><td>${Name}</td><td>${Price}</td><td>${Rating}</td></tr>",
                        resultHtml = $.ig.tmpl(template, ds.dataView());
                        $("#table").html(resultHtml);
  		                } else {
  			                alert(error);
  		                }
  	                }
  
                  var myUrlParamsEncoded = function (item, params) {
  		                alert("myUrlParamsEncoded");
  	                }
  
                  var ds;
                  $(window).load(function () {
  	                var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
  	                ds = new $.ig.TreeHierarchicalDataSource({
  		                callback: render,
  		                dataSource: url,
  		                schema: {
  			                fields: [{
  				                name: "Name"
  			                }, {
  				                name: "Price"
  			                }, {
  				                name: "Rating"
  			                }],
  			                searchField: "d"
  		                },
  		                responseDataKey: "d",
  		                responseDataType: "jsonp",
  		                urlParamsEncoded: myUrlParamsEncoded
  	                });
  	                ds.dataBind();
                  });
            

• &nbspurlParamsEncoding

  Type:

  object

  Default:

  null

  Event that is fired before URL parameters are encoded. Can point to a function name or the function object itself.

  Code Sample

   
                  var render = function (success, error) {
  		                if (success) {
                        var template = "<tr><td>${Name}</td><td>${Price}</td><td>${Rating}</td></tr>",
                        resultHtml = $.ig.tmpl(template, ds.dataView());
                        $("#table").html(resultHtml);
  		                } else {
  			                alert(error);
  		                }
  	                }
  
                  var myUrlParamsEncoding = function (item, params) {
  		                alert("myUrlParamsEncoding");
  	                }
  
                  var ds;
                  $(window).load(function () {
  	                var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
  	                ds = new $.ig.TreeHierarchicalDataSource({
  		                callback: render,
  		                dataSource: url,
  		                schema: {
  			                fields: [{
  				                name: "Name"
  			                }, {
  				                name: "Price"
  			                }, {
  				                name: "Rating"
  			                }],
  			                searchField: "d"
  		                },
  		                responseDataKey: "d",
  		                responseDataType: "jsonp",
  		                urlParamsEncoding: myUrlParamsEncoding
  	                });
  	                ds.dataBind();
                  });