Observable Array

The Observable Array wraps a JavaScript Array object and tracks changes in the Array.

var observableArray = new $.jqx.observableArray(array, callback)

var observableArray = new $.jqx.observableArray(
 [{name: "Andrew Smith"},
 {name: "Gordon Brown"}], 
 function(changes)
 {
 // handle changes here.
 });

• array: JavaScript Array object or JSON String used for creating the Observable Array.
• callback: callback function which is called by the Observable Array when an Array Item is added, removed or updated. The function's parameter - changes contains the following list of parameters:
  
  • name: The name of the property which was changed.
  • object: The changed object after the change was made.
  • type: A string indicating the type of change taking place. One of "add", "update", or "delete".
  • oldValue: The value before the change.
  • newValue: The value after the change.
  • index: The changed array index.
  • path: only for the "update" type. The path to the change property or sub property.

Settings

• length: Sets or returns the number of elements in an array.
• name: Returns "observableArray".
• changes: Returns an Array with all changes.
• observe(): resumes the observe or changes the observe function if parameter is passed.
• unobserve(): when the method is called the callback will no longer be called.
• toArray(): returns JavaScript Array.
• toJSON(): returns JSON string. The method has two optional parameters which are:
  • keys: array of keys which will be included in the JSON.
  • array: allows you to pass a sub array from the Observable Array instead of getting the JSON for the whole array.
• concat(): Joins two or more arrays, and returns an Observable Array which is a copy of the joined arrays.
• indexOf(): Search the array for an element and returns its position.
• join(): Joins all elements of an array into a string.
• lastIndexOf(): Search the array for an element, starting at the end, and returns its position.
• pop(): Removes the last element of an array, and returns that element.
• push(): Adds new elements to the end of an array, and returns the new length.
• reverse(): Reverses the order of the elements in an array.
• shift(): Removes the first element of an array, and returns that element.
• slice(): Selects a part of an array, and returns a new Observable Array.
• sort(): Sorts the elements of an array.
• splice(): Adds/Removes elements from an array and returns the removed item(s).
• unshift(): Adds new elements to the beginning of an array, and returns the new length.
• get(): Gets an item from the Array by a passed Index. Example: var firstItem = observableArray.get(0);
• set(): Updates an item or sub item in the Array or creates a new item if the passed index is higher than the Array's length. The method can be used for updaing a sub property by passing the path to the property.
  Example:
  

  var observableArray = new $.jqx.observableArray([{name: "Andrew Smith", age: 39}, {name: "Gordon Brown", age: 20}], function(changes)
  {
  });
  observableArray.set("0.name", "Antoni Green");
  

Example:

 
 $(document).ready(function () { 
 var array = generatedata(2); 
 var updateLog = function (observableArray) { 
 var rows = ""; 
 for (var i = 0; i < observableArray.length; i++) { rows += observableArray.toJSON(["firstname", "lastname", "productname", "quantity", "price", "total"], observableArray[i]); } $("#log").html(rows); } var observableArray = new $.jqx.observableArray(array, function (changed) { updateLog(this); }); updateLog(observableArray); var source = { localdata: observableArray, datatype: "obserableArray", datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: 850, height: 150, source: dataAdapter, sortable: true, columnsresize: true, editable: true, selectionmode: "multiplecellsadvanced", columns: [ { text: 'Name', datafield: 'firstname', width: 120 }, { text: 'Last Name', datafield: 'lastname', width: 120 }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' } ] }); $("#addItem").jqxButton(); $("#deleteItem").jqxButton(); $("#updateItem").jqxButton(); $("#updatePath").jqxButton(); $("#addItem").click(function () { var row = generatedata(1)[0]; observableArray.push(row); }); $("#deleteItem").click(function () { if (observableArray.length> 0) { 
 observableArray.splice(0, 1); 
 } 
 }); 
 $("#updatePath").click(function () { 
 if (observableArray.length> 0) { 
 var row = generatedata(1)[0]; 
 observableArray.set("0.firstname", row.firstname); 
 observableArray.set("0.lastname", row.lastname); 
 } 
 }); 
 $("#updateItem").click(function () { 
 if (observableArray.length> 0) { 
 var row = generatedata(1)[0]; 
 observableArray.set(0, row); 
 } 
 }); 
 });