How to create aew button in nested grid

[Jay]

Appreciate your assistance in teh following...

I have created a main grid and one child nested grid. main Grid toolbar is visible and I am able to add button to add new rows and the same works fine.

Queries:
1. I am not able to get the toolbar for my child grid.
2. if the toolbar is created - how to add a button to facilitate addtion to the child grid.

tried the below from forum FAQ - it doesn't work for me

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

                                ]

[paramvir]

Please confirm the version of pqgrid.

Toolbar is created for child grid in the same way as for parent grid.

Replace this

Code: [Select]

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

with this

Code: [Select]

var $gridDet = this.widget();

Please share a jsfiddle if still facing issues.

[Jay]

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

[paramvir]

Please confirm the version of pqgrid.

[Jay]

I have downloaded the latest version of the PQGRID two weeks ago...

You can let me know, where to check for the version, as I cannot find it in the read me file as part of download

[paramvir]

Toolbar is created in same way for parent and child/detail grid

As mentioned earlier, please use this code to get reference to $grid variable inside a toolbar event listener.

Code: [Select]

var $grid = this.widget()

https://paramquery.com/pro/tutorial#topic-special-vars

Please share a jsfiddle if you still face issues.

PS: You have downloaded a trial version. Please share your Pro credentials to get your account updated.