The Infragistics Data Source client-side component is implemented as a class, and has support for paging, sorting, and filtering
it supports binding to various types of data sources including JSON, XML, HTML Table, WCF/REST services, JSONP, JSONP and OData combined, etc.

 
         var tableSchema = new $.ig.DataSchema("htmlTableDom",
            { fields:
                [
                    { name: "FirstName" },
                    { name: "LastName" },
                    { name: "Email" }
                ]
            });

            var data = $("#tableData")[0];

            var ds = new $.ig.HtmlTableDataSource({
                dataSource: data,
                schema: tableSchema
            });

            ds.dataBind();

			      var template = "<tr><td>${Email}</td><td>${FirstName}</td><td>${LastName}</td></tr>",
			      resultHtml = $.ig.tmpl(template, ds.dataView());
			      $("#t1").html(resultHtml);
            

• aggregateTransactions

  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.HtmlTableDataSource({
  					  aggregateTransactions: true,
  					  dataSource: arrayOfObjects
  					});
  		  

• autoCommit

  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.HtmlTableDataSource({
  	                autoCommit: true
                  });

• callback

  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);
  					}
  				}
  		
  				$(function () {			 
  					ds = new $.ig.HtmlTableDataSource({
  						callback: render, 
  						dataSource: xmlString, 
  					});		
  				}); 

• callee

  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);
  	                }
                  };
  
  	            ds = new $.ig.HtmlTableDataSource({
  		            callee: Bob,
  		            callback: Bob.greet
  	            });          

• data

  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.HtmlTableDataSource({
  		                    data: normalizedArrayOfObjects
                          });

• dataBinding

  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");
  	            }
  
  	            ds = new $.ig.HtmlTableDataSource({
  		            dataBinding: myDataBinding,
  		            dataSource: xmlString
  	            });          

• dataBound

  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 ds;
  
  	                ds = new $.ig.HtmlTableDataSource({
  		                dataBound: myDataBound
  	                });          

• dataSource

  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 tableSchema = new $.ig.DataSchema("htmlTableDom",
              { fields:
                  [
                      { name: "FirstName" },
                      { name: "LastName" },
                      { name: "Email" }
                  ]
              });
  
              var data = $("#tableData")[0];
  
              var ds = new $.ig.HtmlTableDataSource({
                  dataSource: data,
                  schema: tableSchema
              });
  
              ds.dataBind();
  
  			      var template = "<tr><td>${Email}</td><td>${FirstName}</td><td>${LastName}</td></tr>",
  			      resultHtml = $.ig.tmpl(template, ds.dataView());
  			      $("#t1").html(resultHtml);
              

• fields

  Type:

  array

  Default:

  []

  Elements Type:

  object

  *** IMPORTANT DEPRECATED ***
  A list of field definitions specifying the schema of the data source.
  Field objects description: {name, [type], [xpath]}.

  Code Sample

   
              var tableSchema = new $.ig.DataSchema("htmlTableDom",
              { fields:
                  [
                      { name: "FirstName" },
                      { name: "LastName" },
                      { name: "Email" }
                  ]
              });
  
              var ds = new $.ig.HtmlTableDataSource({
                  dataSource: data,
                  schema: tableSchema
              });          

• filtering

  Type:

  object

  Default:

  {}

  Settings related to built-in filtering functionality.

  Code Sample

   
              var ds = new $.ig.HtmlTableDataSource({
                  filtering: { 
                      type: "local",
                      caseSensitive: true,
                      applyToAllData: true
                  }				
  			});          

  • 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

     
                    var ds = new $.ig.HtmlTableDataSource({
                        filtering: { 
                            type: "local",
                            caseSensitive: true,
                            applyToAllData: true
                        }				
    			    });                

  • caseSensitive

    Type:

    bool

    Default:

    false

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

    Code Sample

     
                  var ds = new $.ig.HtmlTableDataSource({
                    filtering: { 
                        type: "local",
                        caseSensitive: true,
                        applyToAllData: true
                    }				
    			});

  • customConditions

    Type:

    object

    Default:

    null

    An object containing custom defined filtering conditions as objects.

  • 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 myCustomFunc = function (fieldExpression, data) {
    		                    var result = [];
    		                    result[0] = data[0];
    		                    return result;
    	                    }
                
                var tableSchema = new $.ig.DataSchema("htmlTableDom",
                { fields:
                    [
                        { name: "FirstName" },
                        { name: "LastName" },
                        { name: "Email" }
                    ]
                });
    
                var data = $("#tableData")[0];
    
                var ds = new $.ig.HtmlTableDataSource({
                    dataSource: data,
                    schema: tableSchema,
                    filtering: {
                        type: "local",
                        customFunc: myCustomFunc
                    }
                });
    
                ds.dataBind();
                     

  • defaultFields

    Type:

    array

    Default:

    []

    Elements Type:

    object

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

    Code Sample

     
                var ds = new $.ig.HtmlTableDataSource({
                    dataSource: data,
                    schema: tableSchema,
                    filtering: {
                        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 ds = new $.ig.HtmlTableDataSource({
                    dataSource: data,
                    schema: tableSchema,
                    filtering: {
                        expressions: [
                            {
                                fieldName: "Price", 
                                cond:"GreaterThan", 
                                expr: 20
                            }
                        ]                    
                    }
                });
                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 ds = new $.ig.HtmlTableDataSource({
                    dataSource: data,
                    schema: tableSchema,
                    filtering: {
                        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 ds = new $.ig.HtmlTableDataSource({
                    dataSource: data,
                    schema: tableSchema,
    		        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 ds = new $.ig.HtmlTableDataSource({
                    dataSource: data,
                    schema: tableSchema,
    		        filtering: {
    			        type: "remote",
    			        filterLogicUrlKey: "testFilterLogicUrlKey",
    			        expressions: [{
    				        fieldName: "Name",
    				        cond: "Contains",
    				        expr: "Cr"
    			        }]
                    }
                });
                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

     
                var ds = new $.ig.HtmlTableDataSource({
                    dataSource: data,
                    schema: tableSchema,
    		        filtering: {
    			        type: "local",
                    }
                });
                ds.dataBind();              

• id

  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 = new $.ig.HtmlTableDataSource({
                  id: "myId"
              });          

• localSchemaTransform

  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 ds = new $.ig.HtmlTableDataSource({
                  dataSource: data, 
  			    localSchemaTransform: false, 
                  responseDataKey: "d",
  			    schema: {fields: [
                      { name : "Price" }, 
                      { name : "Name" }, 
                      { name: "Rating" }
                  ]}
              });
  			
  			ds.dataBind(); 

• outputResultsName

  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 = new $.ig.HtmlTableDataSource({
  		                callback: render,
  		                dataSource: url,
  		                schema: {
  			                fields: [{
  				                name: "Name"
  			                }, {
  				                name: "Price"
  			                }, {
  				                name: "Rating"
  			                }]
  		                },
  		                outputResultsName: "myOutputResultsName"
  	                });
  	                ds.dataBind();
                  });

• paging

  Type:

  object

  Default:

  {}

  Settings related to built-in paging functionality.

  Code Sample

   
                  $(function () {
  					var ds = new $.ig.HtmlTableDataSource({
  						paging: {
  							enabled : true, 
  							pageSize: 5, 
  							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.HtmlTableDataSource({
    						    dataSource: products,  
    						    paging: {
    							    enabled: true,
    								appendPage : true
    						    }
    				        }); 
    			  

  • enabled

    Type:

    bool

    Default:

    false

    Paging is not enabled by default.

    Code Sample

     
                  var ds = new $.ig.HtmlTableDataSource({
    						paging: {
    							enabled : true, 
    							pageSize: 5, 
    							type: "local" 
    						}
    					});

  • pageIndex

    Type:

    number

    Default:

    0

    Current page index.

    Code Sample

     
                  var ds = new $.ig.HtmlTableDataSource({
    					schema: tableSchema, 
    					paging: 
                        {
                            enabled : true, 
                            pageSize: 5, 
                            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.HtmlTableDataSource({
    	                    paging: {
    		                    enabled: true,
    		                    pageSize: 5,
    		                    pageIndex: 2,
    		                    pageIndexUrlKey: "myPageIndexUrlKey",
    		                    type: "local"
    	                    }
                        });

  • pageSize

    Type:

    number

    Default:

    5

    Number of records on each page.

    Code Sample

     
                  var ds = new $.ig.HtmlTableDataSource({
    						paging: {
    							enabled : true, 
    							pageSize: 5, 
    							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.HtmlTableDataSource({
     	                    paging: {
     		                    enabled: true,
     		                    pageSize: 5,
     		                    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

     
                        var ds = new $.ig.HtmlTableDataSource({
    						paging: {
    							enabled : true, 
    							pageSize: 5, 
    							type: "local" 
    						}
    					});

• primaryKey

  Type:

  string

  Default:

  null

  The unique field identifier.

  Code Sample

   
                      var ds = new $.ig.HtmlTableDataSource({
                          primaryKey: "CustomerID",
  					});
  					ds.dataBind();	

• requestType

  Type:

  string

  Default:

  "GET"

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

  Code Sample

   
                var ds = new $.ig.HtmlTableDataSource({
   	                dataSource: "http://services.odata.org/OData/OData.svc/Categories(0)",
   	                responseDataKey: "d",
                      requestType: "get",
   	                responseContentType: "application/atom+xml; charset=windows-1251"
                   });
                      

• responseContentType

  Type:

  string

  Default:

  null

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

  Code Sample

   
                var ds = new $.ig.HtmlTableDataSource({
   	                dataSource: "http://services.odata.org/OData/OData.svc/Categories(0)",
   	                responseDataKey: "d",
   	                responseContentType: "application/atom+xml; charset=windows-1251"
                   });  

• responseDataKey

  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?$callback=?";
  		        var ds = new $.ig.HtmlTableDataSource({ 
                      dataSource: url, 
                      responseDataKey: "d.results"
                  });

• responseDataType

  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 url = "http://odata.netflix.com/Catalog/Titles?$format=json&$callback=?"; 
  					ds = new $.ig.HtmlTableDataSource({
  						type: "remoteUrl", 
  						dataSource: url, 
  						schema: schema, 
  						responseDataKey : "d.results", 
  						responseDataType: "jsonp", 
  					});
  					ds.dataBind();	

• responseTotalRecCountKey

  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.HtmlTableDataSource({
   	                responseDataKey: "Records",
   	                responseTotalRecCountKey: "1024"
                   }); 

• rowAdded

  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

   
                      var ds = $.ig.HtmlTableDataSource({
                          rowAdded: function (item, dataSource) {…}    
                       });

• rowDeleted

  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

   
                      var ds = $.ig.HtmlTableDataSource({
                          rowDeleted: function (item, dataSource) {…}    
                       });

• rowInserted

  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

   
                      var ds = $.ig.HtmlTableDataSource({
                          rowInserted: function (item, dataSource) {…}    
                       }); 

• rowUpdated

  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

   
                      var ds = $.ig.HtmlTableDataSource({
                          rowUpdated: function (item, dataSource) {…}    
                       }); 

• schema

  Type:

  object

  Default:

  null

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

  Code Sample

   
                      var ds = new $.ig.HtmlTableDataSource({
  		                callback: render,
  		                dataSource: url,
  		                schema: {
  			                fields: [{
  				                name: "Name"
  			                }, {
  				                name: "Price"
  			                }, {
  				                name: "Rating"
  			                }]
  		                },
  		                outputResultsName: "myOutputResultsName"
  	                });
  	                ds.dataBind();

• serializeTransactionLog

  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

   
                      var ds = $.ig.HtmlTableDataSource({
                          serializeTransactionLog: false
                       }); 

• sorting

  Type:

  object

  Default:

  {}

  Settings related to built-in sorting functionality.

  Code Sample

   
  					var ds = new $.ig.HtmlTableDataSource({
                          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

     
                  var ds = new $.ig.HtmlTableDataSource({
                    sorting: { 
                        type: "local", 
                        applyToAllData: true
                    }, 
                    dataSource: $("#tableData")[0] 
                }).dataBind();

  • caseSensitive

    Type:

    bool

    Default:

    false

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

    Code Sample

     
                        var ds = new $.ig.HtmlTableDataSource({
                            sorting: {
                                type: "local",
                                caseSensitive: true
                            }   
    					});              

  • 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 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 = new $.ig.HtmlTableDataSource({
    		                    dataSource: table,
    		                    schema: {
    			                    fields: [{
    				                    name: "Name"
    			                    }, {
    				                    name: "Price"
    			                    }, {
    				                    name: "Rating"
    			                    }]
    		                    },
    		                    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 myCustomConvertFunc = function (obj) {
    		                    return obj.Price;
    	                    }
                            
                            var ds = new $.ig.HtmlTableDataSource({
    		                    dataSource: table,
    		                    schema: {
    			                    fields: [{
    				                    name: "Name"
    			                    }, {
    				                    name: "Price"
    			                    }, {
    				                    name: "Rating"
    			                    }]
    		                    },
    		                    sorting: {
    			                    type: "local",
    			                    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 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 = new $.ig.HtmlTableDataSource({
    		                    dataSource: table,
    		                    schema: {
    			                    fields: [{
    				                    name: "Name"
    			                    }, {
    				                    name: "Price"
    			                    }, {
    				                    name: "Rating"
    			                    }]
    		                    },
    		                    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

     
                  var ds = new $.ig.HtmlTableDataSource({
                    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 ds = new $.ig.HtmlTableDataSource({
    		                dataSource: table,
    		                schema: {
    			                fields: [{
    				                name: "Name"
    			                }, {
    				                name: "Price"
    			                }, {
    				                name: "Rating"
    			                }]
    		                },
    		                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, direction and compareFunc (optional).

    Code Sample

     
                  var ds = new $.ig.HtmlTableDataSource({
                    dataSource: table, 
    			    localSchemaTransform: false, 
                    responseDataKey: "d",			
    			    sorting: {
                        expressions:[
                            {
                                fieldName:"Rating", 
                                dir:"asc"}, 
                            {
                                fieldName:"Price", dir:"asc"
                            }
                        ]},
    			});

  • 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 ds = new $.ig.HtmlTableDataSource({
    		                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 ds = new $.ig.HtmlTableDataSource({
    		                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 ds = new $.ig.HtmlTableDataSource({
    		                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

     
                                var ds = new $.ig.HtmlTableDataSource({
                                    sorting: {
                                        type: "local",
                                        caseSensitive: true
                                    }   
    					        });

• summaries

  Type:

  object

  Default:

  {}

  Settings related to built-in summaries functionality.

  Code Sample

   
            var ds = new $.ig.HtmlTableDataSource({
  		            dataSource: xmlString,
  		            schema: {
  			            fields: [{
  				            name: "Name"
  			            }, {
  				            name: "Price"
  			            }, {
  				            name: "Rating"
  			            }]
  		            },
  		            summaries: {
  			            type: "remote",
  			            columnSettings: [{
  				            columnKey: "Price",
  				            allowSummaries: false,
  				            summaryOperands: [{
  					            type: "count",
  					            active: true,
  					            order: 0
  				            }]
  			            }]
  		            }
  	            }); 
            

  • columnSettings

    Type:

    array

    Default:

    []

    Elements Type:

    object

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

    Code Sample

     
                        var ds = new $.ig.HtmlTableDataSource({
    	                    schema: {
    		                    fields: [{
    			                    name: "Name"
    		                    }, {
    			                    name: "Price"
    		                    }, {
    			                    name: "Rating"
    		                    }]
    	                    },
    	                    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 ds = new $.ig.HtmlTableDataSource({
    	                    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 ds = new $.ig.HtmlTableDataSource({
    	                    summaries: {
    		                    summaryExecution: "priortofilteringandpaging"
    	                    }
    
                        }); 

  • summaryExprUrlKey

    Type:

    string

    Default:

    "summaries"

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

    Code Sample

     
                        var ds = new $.ig.HtmlTableDataSource({
    	                    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 ds = new $.ig.HtmlTableDataSource({
    		                dataSource: table,
    		                schema: {
    			                fields: [{
    				                name: "Name"
    			                }, {
    				                name: "Price"
    			                }, {
    				                name: "Rating"
    			                }]
    		                }
    		                summaries: {
    			                type: "remote"
    		                }
    	                }); 

• type

  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.
  • function
  • Type:string
  • Specifies that the data source points to a function. During data binding the function will be called and the result will be assumed to be an 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

   
                          // There is no need to explicitly set this option. The type of the HtmlTableDataSource is type: "htmlTableDom"
                          

• updateUrl

  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 ds = new $.ig.HtmlTableDataSource({
  		            dataSource: table,
  		            schema: {
  			            fields: [{
  				            name: "Name"
  			            }, {
  				            name: "Price"
  			            }, {
  				            name: "Rating"
  			            }]
  		            },		            
  		            updateUrl: "http://example.com/myUpdateUrl/"
  	            }); 

• urlParamsEncoded

  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 myUrlParamsEncoded = function (item, params) {
  		            alert("myUrlParamsEncoding");
  	            }
                  
                  $(function () {
  	                var ds = new $.ig.HtmlTableDataSource({
  		                dataSource: table,
  		                schema: {
  			                fields: [{
  				                name: "Name"
  			                }, {
  				                name: "Price"
  			                }, {
  				                name: "Rating"
  			                }]
  		                }
  		                urlParamsEncoding: myUrlParamsEncoded
  	                });
  	                ds.dataBind();
                  });

• urlParamsEncoding

  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 myUrlParamsEncoding = function (item, params) {
  		            alert("myUrlParamsEncoding");
  	            }
                  
                  $(function () {
  	                var ds = new $.ig.HtmlTableDataSource({
  		                dataSource: table,
  		                schema: {
  			                fields: [{
  				                name: "Name"
  			                }, {
  				                name: "Price"
  			                }, {
  				                name: "Rating"
  			                }]
  		                }
  		                urlParamsEncoding: myUrlParamsEncoding
  	                });
  	                ds.dataBind();
                  });