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
Hello AbbottF,
Please make sure that you've added the required resources needed for proper rendering of igTreeGrid. They're separate from the combined scripts. Please note also that igTreeGrid control is CTP in v14.2 and due to that some of its functionalities may not work correctly. It will be officially released with v15.1.
I made some changes to your sample and I'm sending it back to you.
If you have further questions, feel free to contact me.
Regards,
Tsanna
Tsanna,
Thanks for the quick response. Didn't catch the ctp association. I'll include the link.
Abbottt
If you need further help, please let me know.
I was able to use the basic igGrid for my needs. Now I'm trying to figure out how to get a row selected event and have cell editors in place.
I tried cellClick, but that prevented the cell editor for column Shipped from activating.
Using rowSelectionChanged, the event ...
function kbo_orderItemSelected(evt, ui) { if (null === ui.row) { return; } alert("Selected OrderItem: " + ui.row.rowKey);}
is not raised with the following grid specification:
$("#kbo-OrderDetails").igGrid({ width: "100%", dataSource: orderItemDB, autoGenerateColumns: false, primaryKey: "OrderItemId", columns: [ { headerText: "OrderItemId", key: "OrderItemId", width: "0%", dataType: "number" }, { headerText: "SKU", key: "SKU", width: "25%", dataType: "string" }, { headerText: "Name", key: "Name", width: "30%", dataType: "string" }, { headerText: "Qty", key: "Quantity", width: "10%", dataType: "number" }, { headerText: "Shipped", key: "Shipped", width: "20%", dataType: "number" }, { headerText: "", key: "Reset", dataType: "string", width: "15%", unbound: true, template: "<input type='button' onclick='kbo_updateQty(${OrderItemId}, ${Qty})' value='Reset' class='kbo-UpdateQuantity'/>" } ], // tree grid specific options key: "OrderItemId", hierarchicalDataSource: false, initialExpandDepth: 1, multipleSelection: true, mode: "row", activation: true, rowSelectionChanged: kbo_orderItemSelected, features: [ { name: "Updating", editMode: "cell", rowEditDialogContainment: "owner", editCellStarted: "onEditCellStarted", showDoneCancelButtons: true, showReadonlyEditors: false, enableDeleteRow: false, enableAddRow: false, startEditTriggers: "dblclick,F2", columnSettings: [ { columnKey: "SKU", readOnly: true }, { columnKey: "Name", readOnly: true }, { columnKey: "Quantity", readOnly: true }, { columnKey: "Shipped", editorType: "numeric", editorOptions: { dataMode: "int", maxValue: 10000, minValue: 0, button: "spin", width: "100%" } }, { columnKey: "Reset", readOnly: true } ] } ] });
Thanks
Here is an example from our API documentation about how to use rowSelectionChanged event: http://help.infragistics.com/jQuery/2014.2/ui.iggridselection#events:rowSelectionChanged
Please note that you may define this event either within the "Selection" feature initialization or to delegate it after grid initialization.
If I can provide further assistance, feel free to contact me.
Please do not hesitate to contact us if you need any further assistance with this matter.