var gridDetailModel = { recIndx: "ProductID", trackModel: { on: true }, width: "flex", pageModel: { type: "local", rPP: 5, strRpp: "" }, columnBorders: false, showTop: false, showBottom: false, sortModel: { sorter: [{ dataIndx: 'ProductName', dir: "up" }] }, dataModel: { location: "remote", dataType: "jsonp", method: "GET", getData: function(dataJSON) { return { data: dataJSON.data }; } }, colModel: [{ title: "Order ID", width: 85, dataIndx: "OrderID" }, { title: "Product ID", width: 95, dataType: "integer", dataIndx: "ProductID" }, { title: "Product Name", width: 150, dataIndx: "ProductName" }, { title: "Unit Price", width: "100", align: "right", dataIndx: "UnitPrice", dataType: "float", summary: { type: "sum" } }, { title: "Quantity", align: "right", width: 85, dataIndx: "Quantity", dataType: "integer", summary: { type: "sum" } }, { title: "Discount", width: 80, align: "right", dataIndx: "Discount", dataType: "float" }], groupModel: { on: true, dataIndx: ["OrderID"], dir: ["up"], title: ["{0} - {1} product(s)"], icon: ["ui-icon-triangle-1-se", "ui-icon-triangle-1-e"] }, refresh: function(evt, ui) { if (ui.source != "flex") { this.flex(); } }, //flex: { one: true }, height: 'flex', numberCell: { show: false }, title: "Order Details"};