I am putting a tree grid into a border layoutmanager. The layoutmanager instantiates properly while I get an error that ' $("#kbo-OrderTree").igTreeGrid({' is not a function. I know I must have done a 'duh' thing in the js file, but I just don't see it. Any help would be appreciated.

the js is ...

$(function () {

var flatDS = [

{ "orderNumber": 100216, "orderDate": "1/17/2015", "status": "Ordered" },

{ "orderNumber": 100215, "orderDate": "1/15/2015", "status": "Picking" },

{ "orderNumber": 100214, "orderDate": "1/13/2015", "status": "Packed" },

{ "orderNumber": 100214, "orderDate": "12/21/2014", "status": "Shipped" }

];

$('#layout').igLayoutManager({

layoutMode: "border",

borderLayout: {

leftWidth: "25%",

rightWidth: "25%"

}

});

$("#kbo-OrderTree").igTreeGrid({

width: "100%",

dataSource: flatDS, //bound to flat data source,

autoGenerateColumns: false,

primaryKey: "orderNumber",

columns: [

{ headerText: "Order", key: "orderNumber", width: "100px", dataType: "number" },

{ headerText: "Date", key: "orderDate", width: "100px", dataType: "date" },

{ headerText: "Status", key: "status", width: "100px", dataType: "string" }

],

// tree grid specific options

key: "orderNumber",

hierarchicalDataSource: false,

initialExpandDepth: 1

});

});

the supporting html is ...

<div id="kbo-OrderList" class="left">

<h3>Order Selector</h3>

<h2>Filter Options</h2>

<div id="kbo-OrderTree" class="kbo-OrderTree"></div>

</div>

I've attached a zip of the html, css & js files, if that is necessary.

Thanks for any help of insights.

Abbott