jqxObservableArray error

Demonstrates 'X is not a function' error when using observable arrays.

by JC Wren

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.min.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxgrid'></div>
<p></p>
<div><button id="clickme">Populate Array</button><div>

JavaScript

//
//  See comment starting at line 66. Populating the array and then
//  changing a bracket causes a 'Uncaught TypeError: X is not a function'
//  exception.
//

var divisions = [
  { value: 'B1', label: 'Bracket 1' },
  { value: 'B2', label: 'Bracket 2' },
  { value: 'B3', label: 'Bracket 3' },
  { value: 'B4', label: 'Bracket 4' },
  { value: 'B5', label: 'Bracket 5' }
];

var divisionsSource = {
    datatype: 'array',
    datafields: [
        { name: 'value',   type: 'string' },
        { name: 'label',   type: 'string' }
    ],
    localdata: divisions
};

var divisionsAdapter = new $.jqx.dataAdapter (divisionsSource, {
  autoBind: true
});

var players = [
    { sh_fn: 'Steve',     sh_ln: 'Martin',    sh_div: 'B1' }, 
    { sh_fn: 'Carmen',    sh_ln: 'San Diego', sh_div: 'B1' },
    { sh_fn: 'Bill',      sh_ln: 'Murray',    sh_div: 'B3' },
    { sh_fn: 'Peter',     sh_ln: 'Falk',      sh_div: 'B3' },
    { sh_fn: 'Angelica',  sh_ln: 'Houston',   sh_div: 'B5' },
    { sh_fn: 'Christina', sh_ln: 'Ricci',     sh_div: 'B5' }
];

var oaStorage = [];
var observableArray = new $.jqx.observableArray (oaStorage, function (changed) {
  console.log (changed.type);
});

var playerSource = {
    localdata: observableArray,
    datatype: 'observablearray',
    datafields: [{
        name: 'sh_fn',
        type: 'string'
    }, {
        name: 'sh_ln',
        type: 'string'
    }, {
        name: 'sh_div',
        type: 'string'
    }, {
        name: 'sh_div_fmt',
        value: 'sh_div', 
        values: {source: divisionsAdapter.records, value: 'value', name: 'label'}
    }],
    updaterow: function (rowid, newdata, commit) {
      commit (true);
    }
};

var playerAdapter = new $.jqx.dataAdapter(playerSource);

//
//  Set up drop-down list to open when the cell is selected, and to
//  close after an item is selected. Sending the 'endcelledit' event
//  causes an 'Uncaught TypeError: X is not a function' exception.
//
var ddlRowIndex = -1;
var dropdownInitEditor =...