please refer the code below:
for main grid the add button appears but for the child grid the add button doesnt appear..
$(function () {
function onTabsActive(evt, ui){
//grid requires refresh whenever corresponding tab is refreshed.
ui.newPanel.find(".pq-grid").pqGrid("refresh");
};
/**
* does data binding of detail view.
* @return: {jQuery object}
*/
function initDetail( ui ) {
var rowData = ui.rowData,
//get a copy of gridDetailModel
detailobj = gridDetailModel( rowData ),
//get markup of the detail template.
html = $("#tmpl").html(),
//create new detail place holder
$detail = $("<div/>");
for (var key in rowData) {
var cellData = (rowData[key] == null) ? "" : rowData[key];
html = html.replace("<#=" + key + "#>", cellData);
}
$detail.html(html);
$detail.find(".pq-tabs").tabs().on("tabsactivate", onTabsActive);
//append pqGrid in the 2nd tab.
$("<div/>").appendTo($("#tabs-2", $detail)).pqGrid( detailobj );
return $detail;
};
var $gridMain = $("div#grid_md").pqGrid({
width: 800, height: 550,
dataModel: {
location: "remote",
sorting: "local",
dataType: "JSON",
method: "GET",
url: "/pro/orders/get",
//url: "/pro/orders.php",//for PHP
getData: function (dataJSON) {
var data = dataJSON.data;
//expand the first row
data[0]['pq_detail'] = { 'show': true };
return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
}
},
colModel: [
{ title: "", minWidth: 27, width: 27, type: "detail", resizable: false, editable: false /* no need to mention dataIndx */ },
{ title: "ShipCountry", width: 100, dataIndx: "ShipCountry" },
{ title: "Customer Name", width: 120, dataIndx: "ContactName" },
{ title: "Order ID", width: 100, dataIndx: "OrderID", dataType: "integer", editable: false },
{ title: "Shipping Via", width: 100, dataIndx: "ShipVia" },
{ title: "Freight", width: 100, align: "right", dataType: "float", dataIndx: "Freight" },
{ title: "Shipping Name", width: 160, dataIndx: "ShipName" }
],
pageModel: { type: "local", rPP: 50, rPPOptions: [10, 15, 50], strDisplay: "{0} to {1} of {2}" },
title: "<b>Shipping Orders</b>",
toolbar: {
items: [
{ type: 'button', icon: 'ui-icon-plus', label: 'Add Product', listener:
{ "click": function (evt, ui) {
var $grid = $(this).widget() //('.pq-grid');
addRow($grid);
}
}
}
]
},
resizable: true,
wrap: false,
hwrap: false,
virtualX: true, virtualY: true,
editable: false,
selectionModel: { type: 'cell' },
detailModel: { init: initDetail }
});
/* another grid in detail view.
* returns a new copy of detailModel every time the function is called.*/
var gridDetailModel = function( rowData ){
return {
pageModel: { type: "local", rPP: 5, strRpp: "" },
dataModel: {
location: "remote",
sorting: "local",
sortIndx: "ProductName",
dataType: "jsonp",
method: "GET",
url: "/pro/orderdetails/get?orderId=" + rowData.OrderID
},
colModel: [
{ title: "Order ID", width: 70, dataIndx: "OrderID" },
{ title: "Product ID", width: 90, dataType: "integer", dataIndx: "ProductID" },
{ title: "Product Name", width: 230, dataIndx: "ProductName" },
{ title: "Unit Price", width: "150", align: "right", dataIndx: "UnitPrice", dataType: "float",
summary: {
type: ["sum"],
title: ["<b style='font-weight:bold;'>Total Price:</b> ${0}"]
}
},
{ title: "Quantity", align: "right", width: 105, dataIndx: "Quantity", dataType: "integer",
summary: {
type: ["sum"],
title: ["<b style='font-weight:bold;'>Total Qty:</b> {0}"]
}
},
{ title: "Discount", width: 80, align: "right", dataIndx: "Discount", dataType: "float" }
],
editable: false,
groupModel: {
dataIndx: ["OrderID"],
dir: ["up"],
title: ["{0} - {1} product(s)"],
icon: [["ui-icon-triangle-1-se", "ui-icon-triangle-1-e"]]
},
flexHeight: true,
toolbar: {
items: [
{ type: 'button', icon: 'ui-icon-plus', label: 'Add Product', listener:
{ "click": function (evt, ui) {
var $grid = $(this).widget() //('.pq-grid');
addRow($grid);
}
}
}
]
},
width: "100%",
numberCell: { show: false },
showTop: false,
showBottom: false
};
}
});
Show Posts