Author Topic: Button are not working in the nested grids.  (Read 537 times)

pankaj.garg29

  • Newbie
  • *
  • Posts: 3
    • View Profile
Button are not working in the nested grids.
« on: March 21, 2022, 06:02:23 pm »
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>

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5733
    • View Profile
Re: Button are not working in the nested grids.
« Reply #1 on: March 21, 2022, 06:43:20 pm »
you also need to define postRenderInterval option.

Example: https://paramquery.com/pro/demos/editing

pankaj.garg29

  • Newbie
  • *
  • Posts: 3
    • View Profile
Re: Button are not working in the nested grids.
« Reply #2 on: March 21, 2022, 10:56:23 pm »
thanks a lot. It worked for me.