ParamQuery grid (PQGrid) Add new row to nested grid

Question

I am using Paramquery grid and I need to add new row to the detail grid, the new row should be added to the child of the current row. I tried this :

  toolbar: {
                            items: [
                                {
                                    type: 'button', icon: 'ui-icon-plus', label: 'New', listener:
                                      {
                                          "click": function (evt, ui) {
                                              debugger;
                                              var $gridDet = $("#grid_editing").pqGrid("option", "detailModel");

                                              //append empty row at the end.
                                              var rowData = { ID: "2", 'Name':'Has'}; //empty row
                                              var rowIndx = $gridDet.pqGrid("addRow", { rowData: rowData, checkEditable: true });
                                              $gridDet.pqGrid("goToPage", { rowIndx: rowIndx });
                                              $gridDet.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
                                          }
                                      }
                                }

                            ]

An error thrown: $gridDet.pqGrid is not a function (The line that starts with rowIndx throws the error)

Please check the image below to see mygrid structure.

Answer 1

You can get the grid using:

  var $gridDet = $(this).closest('.pq-grid');

and then apply the add logic to it.