Author Topic: Add new row to nested grid  (Read 3221 times)

shoushouleb

  • Newbie
  • *
  • Posts: 12
    • View Profile
Add new row to nested grid
« on: August 14, 2018, 11:26:54 am »
Hello,
How can I add a new empty row, to the nested grid, where the new row is added to the child grid of the current selected row.
Thanks,

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Add new row to nested grid
« Reply #1 on: August 14, 2018, 11:58:29 am »
reference to child grid can be obtained from rowData.pq_detail.child where rowData is row data of selected row of parent grid.

Once you have reference to child grid, you can use any API method of pqgrid on it.

shoushouleb

  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: Add new row to nested grid
« Reply #2 on: August 14, 2018, 12:14:59 pm »
Thank you for your reply, I need to append a new row upon clicking the "New" button in the toolbar.Please check the attached image.

shoushouleb

  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: Add new row to nested grid
« Reply #3 on: August 14, 2018, 01:29:28 pm »
This is the solution:

    toolbar: {
                                items: [
                                    {
                                        type: 'button', icon: 'ui-icon-plus', label: 'New', listener:
                                          {
                                              "click": function (evt, ui) {
                                                  debugger;

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

                                         
                                                  //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 });
                                              }
                                          }
                                    }

                                ]