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 do not hesitate to contact us if you need any further assistance with this matter.
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.
Regards,
Tsanna
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
If you need further help, please let me know.
Tsanna,
Thanks for the quick response. Didn't catch the ctp association. I'll include the link.
Abbottt