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