Hello,
We have multiple nested grids that are loaded by the lazy loading method.
We have added a button in the grids but the button click is not working. below is the code.
Please help us,
<script type="text/javascript">
$(function () {
var colM = [
{ title: "", minWidth: 27, width: 27, type: "detail", resizable: false, editable: false },
{ title: "ID", dataIndx: "cuid" },
{ title: "Customer Name", dataIndx: "ccustno" },
{ title: "Type", dataIndx: "ctype", dataType: "string" },
{ title: "Desc", dataIndx: "cdesc", dataType: "string" },
{ title: "status", dataIndx: "cstatus" },
{ title: "Entered By", dataIndx: "centerby" },
{ title: "Date", dataIndx: "ddate" },
{ title: "Priority", dataIndx: "cpriority" },
{
title: "", editable: false, minWidth: 83, sortable: false,
menuInHide: true,
render: function (ui) {
if (!ui.rowData.pq_gtitle && !ui.rowData.pq_grandsummary)
return "<button type='button' class='delete_btn'>Delete</button>";
},
postRender: function (ui) {
var rowIndx = ui.rowIndx,
grid = this,
$cell = grid.getCell(ui);
$cell.find("button").button({ icons: { primary: 'ui-icon-scissors' } })
.bind("click", function () {
alert('ddd');
grid.addClass({ rowIndx: ui.rowIndx, cls: 'pq-row-delete' });
setTimeout(function () {
var ans = window.confirm("Are you sure to delete row No " + (rowIndx + 1) + "?");
grid.removeClass({ rowIndx: rowIndx, cls: 'pq-row-delete' });
if (ans) {
var Group = grid.Group();
if (Group.isOn())
Group.deleteNodes([ui.rowData]);
else
grid.deleteRow({ rowIndx: rowIndx });
}
})
});
}
}
];
var url1 = jQuery("#hidAppPath").val() + "/service/postData.aspx?requestType=gettasks&type=pjt";
var dataModel = {
location: "remote",
dataType: "JSON",
method: "POST",
recIndx: "cuid",
url: url1,
getData: function (dataJSON) {
var data = dataJSON.data;
return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
}
}
$("#grid_md").pqGrid({
height: 1000,
width: "100%",
resizable: true,
wrap: true,
editable: false,
dataModel: dataModel,
colModel: colM,
numberCell: { show: false },
title: "<b>Projects</b>",
columnBorders: false,
hoverMode: null,
selectionModel: { type: '', native: true },
scrollModel: { autoFit: true },
detailModel: {
cache: true,
collapseIcon: "ui-icon-plus",
expandIcon: "ui-icon-minus",
init: function (ui) {
var rowData = ui.rowData,
detailobj = gridObjectiveModel(this, rowData), //get a copy of gridDetailModel
$grid = $("<div></div>").pqGrid(detailobj); //init the detail grid.
return $grid;
}
},
//groupModel: {
// on: true,
// summaryInTitleRow: 'all', //to display summary in the title row.
// dataIndx: ["ccustno"],
// collapsed: [true],
// dir: ["up"],
// icon: ["ui-icon-triangle-1-se", "ui-icon-triangle-1-e"]
//},
});
/*
* another grid in detail view.
* returns a new copy of detailModel every time the function is called.
* @param gridMain {javascript object}: reference to parent grid
* @param rowData {Plain Object}: row data of parent grid
*/
var gridObjectiveModel = function (gridMain, rowData) {
return {
width: "100%",
pageModel: { type: "local", rPP: 5, strRpp: "" },
columnBorders: false,
showTop: false,
showBottom: false,
wrap: true,
editable: false,
sortModel: {
sorter: [{ dataIndx: 'ProductName', dir: "up" }]
},
dataModel: {
location: "remote",
dataType: "json",
method: "Post",
error: function () {
gridMain.rowInvalidate({ rowData: rowData });
},
url: jQuery("#hidAppPath").val() + "/service/postData.aspx?requestType=gettasks&type=all&p=" + rowData.cuid,
getData: function (dataJSON) {
var data = dataJSON.data;
return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
}
},
colModel: [
{
title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable: false, sortable: false, render: function (ui) {
if ($.trim(ui.rowData.ctype) != "REQ" && $.trim(ui.rowData.ctype) != "OBJ" && $.trim(ui.rowData.ctype) != "PJT") {
return {
//can also return attr (for attributes), cls (for css classes) and text (for plain or html string) properties.
style: { 'display': 'none' }
};
}
}
},
{ title: 'ID', dataIndx: 'cuid' },
{ title: 'Type', dataIndx: 'ctype' },
{ title: 'Customer', dataIndx: 'ccustno' },
{ title: 'Desc', dataIndx: 'cdescript' },
{ title: 'Status', dataIndx: 'cstatus' },
{ title: 'Date', dataIndx: 'ddate' },
{ title: 'Start Date', dataIndx: 'StartDate' },
{ title: 'End Date', dataIndx: 'EndDate' },
{ title: 'Assigned To', dataIndx: 'cassigned' },
{
title: "", editable: false, minWidth: 83, sortable: false,
menuInHide: true,
render: function (ui) {
if (!ui.rowData.pq_gtitle && !ui.rowData.pq_grandsummary)
return "<button type='button' class='delete_btn'>Delete</button>";
},
postRender: function (ui) {
var rowIndx = ui.rowIndx,
grid = this,
$cell = grid.getCell(ui);
$cell.find("button").button({ icons: { primary: 'ui-icon-scissors' } })
.bind("click", function () {
alert('ddd');
grid.addClass({ rowIndx: ui.rowIndx, cls: 'pq-row-delete' });
setTimeout(function () {
var ans = window.confirm("Are you sure to delete row No " + (rowIndx + 1) + "?");
grid.removeClass({ rowIndx: rowIndx, cls: 'pq-row-delete' });
if (ans) {
var Group = grid.Group();
if (Group.isOn())
Group.deleteNodes([ui.rowData]);
else
grid.deleteRow({ rowIndx: rowIndx });
}
})
});
}
}
],
height: 'flex',
numberCell: { show: false },
title: "Objectives",
scrollModel: { autoFit: true },
detailModel: {
cache: true,
collapseIcon: "ui-icon-plus",
expandIcon: "ui-icon-minus",
init: function (ui) {
if ($.trim(ui.rowData.ctype) == "REQ" || $.trim(ui.rowData.ctype) == "OBJ" || $.trim(ui.rowData.ctype) == "PJT") {
var rowData = ui.rowData,
reqObj = gridRequirementModel(this, rowData), //get a copy of gridDetailModel
$grid = $("<div></div>").pqGrid(reqObj); //init the detail grid.
return $grid;
}
}
}
};
};
/*
* another grid in detail view.
* returns a new copy of detailModel every time the function is called.
* @param gridMain {javascript object}: reference to parent grid
* @param rowData {Plain Object}: row data of parent grid
*/
var gridRequirementModel = function (gridObjective, rowData) {
return {
width: "100%",
pageModel: { type: "local", rPP: 5, strRpp: "" },
columnBorders: false,
showTop: false,
showBottom: false,
wrap: true,
editable: false,
sortModel: {
sorter: [{ dataIndx: 'ProductName', dir: "up" }]
},
dataModel: {
location: "remote",
dataType: "json",
method: "Post",
error: function () {
gridObjective.rowInvalidate({ rowData: rowData });
},
url: jQuery("#hidAppPath").val() + "/service/postData.aspx?requestType=gettasks&type=all&p=" + rowData.cuid,
getData: function (dataJSON) {
var data = dataJSON.data;
return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
}
},
colModel: [
{
title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable: false, sortable: false, render: function (ui) {
if ($.trim(ui.rowData.ctype) != "REQ" && $.trim(ui.rowData.ctype) != "OBJ" && $.trim(ui.rowData.ctype) != "PJT") {
return {
//can also return attr (for attributes), cls (for css classes) and text (for plain or html string) properties.
style: { 'display': 'none' }
};
}
}
},
{ title: 'ID', dataIndx: 'cuid' },
{ title: 'Type', dataIndx: 'ctype' },
{ title: 'Customer', dataIndx: 'ccustno' },
{ title: 'Desc', dataIndx: 'cdescript' },
{ title: 'Status', dataIndx: 'cstatus' },
{ title: 'Date', dataIndx: 'ddate' },
{ title: 'Start Date', dataIndx: 'StartDate' },
{ title: 'End Date', dataIndx: 'EndDate' },
{ title: 'Assigned To', dataIndx: 'cassigned' }
],
scrollModel: { autoFit: true },
height: 'flex',
numberCell: { show: false },
title: "Requirements",
detailModel: {
cache: true,
collapseIcon: "ui-icon-plus",
expandIcon: "ui-icon-minus",
init: function (ui) {
if ($.trim(ui.rowData.ctype) == "REQ" || $.trim(ui.rowData.ctype) == "OBJ" || $.trim(ui.rowData.ctype) == "PJT") {
var rowData = ui.rowData,
activityObj = gridActivityModel(this, rowData), //get a copy of gridDetailModel
$grid = $("<div></div>").pqGrid(activityObj); //init the detail grid.
return $grid;
}
}
}
};
};
/*
* another grid in detail view.
* returns a new copy of detailModel every time the function is called.
* @param gridMain {javascript object}: reference to parent grid
* @param rowData {Plain Object}: row data of parent grid
*/
var gridActivityModel = function (gridRequirement, rowData) {
return {
width: "100%",
columnBorders: false,
showTop: false,
showBottom: false,
wrap: true,
editable: false,
sortModel: {
sorter: [{ dataIndx: 'ProductName', dir: "up" }]
},
dataModel: {
location: "remote",
dataType: "json",
method: "Post",
error: function () {
gridRequirement.rowInvalidate({ rowData: rowData });
},
url: jQuery("#hidAppPath").val() + "/service/postData.aspx?requestType=gettasks&type=all&p=" + rowData.cuid,
getData: function (dataJSON) {
var data = dataJSON.data;
return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
}
},
colModel: [
{ title: 'ID', dataIndx: 'cuid' },
{ title: 'Type', dataIndx: 'ctype' },
{ title: 'Customer', dataIndx: 'ccustno' },
{ title: 'Desc', dataIndx: 'cdescript' },
{ title: 'Status', dataIndx: 'cstatus' },
{ title: 'Date', dataIndx: 'ddate' },
{ title: 'Start Date', dataIndx: 'StartDate' },
{ title: 'End Date', dataIndx: 'EndDate' },
{ title: 'Assigned To', dataIndx: 'cassigned' },
],
height: 'flex',
numberCell: { show: false },
title: "Activities",
scrollModel: { autoFit: true }
};
};
});
function fnAddNewActivity(row) {
console.log(row);
}
</script>
