Detail grid with edit buttons

[forwheeler]

What is the best way to implement this? Should I copy the edit code from my main grid such as the button bindings to the detail model?

[paramvir]

Detail / Nested grid supports the functionality & features as the main grid. So the code from main grid can be copied to the detail grid.

The options should not be shared between the grids. If the child grid has options identical to the parent grid, they should be redefined or deep cloned before using in child grid.

 

[forwheeler]

When you say the options should not be shared are you saying I should copy the button binding code to the detail grid and rename the css classes? I don't understand the detail model and how it relates to the detail grid.
An example would be very helpful since I am not a javascript expert.

[paramvir]

By options I mean the javascript options passed on to pqGrid constructor pqGrid() defined in API
http://paramquery.com/pro/api

API documentation for detailModel option is provided here http://paramquery.com/pro/api#option-detailModel

There are two examples which would help you to get started with detail view

Basic Example:
http://paramquery.com/pro/demos/nesting

Another Example:
http://paramquery.com/pro/demos/detail

[forwheeler]

I copied the button binding to the detail grid and modified the class names to make sure I am refereeing to the detail buttons.
I copied the function for add, edit, update and delete and renamed them to editRowDetail for example. I now need to refer to the detail grid so I can set it to edit mode etc.
In this function in the demo you have

Code: [Select]


  function editRowDetail(rowIndx) {
               $grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
                $grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
How do I refer to the detail grid here instead of the main grid.

Also in the demo you have

Code: [Select]

            init: function (ui) {
                var rowData = ui.rowData,
                    id = rowData["ID"];
 
                //make a deep copy of gridDetailModel
                var objCopy = $.extend(true, {}, gridDetail);
 
                objCopy.dataModel.url = "/" + id;
                objCopy.dataModel.error = function () {
                    $gridMain.pqGrid("rowInvalidate", {rowData:rowData});
                };
                var $grid = $("<div></div>").pqGrid(objCopy);                   
                return $grid;
            }
Later on in my code I reference the main grid like this

Code: [Select]

            var $grid = $("#jsongrid").pqGrid(gridMain);

I tried to refer to the detail grid using objCopy but that doesn't work.

[paramvir]

You have raised a very good point. Let me rephrase/summarize your question:

How do you take reference to detail grids in callbacks/ events without saving their reference in global variables?

There is a simple solution to this use case:

'this' keyword in the events/callbacks provide reference to widget DOM node (pqgrid in our case) which can be used to get reference to the relevant / affected grid.

Code: [Select]

var $grid = $(this);

As an example, I've made changes in the editing demo so that the reference is taken from 'this' keyword rather than relying on global variable.

http://paramquery.com/pro/demos/editing

[forwheeler]

Ok at helps. I have most of it working now.
I get an error, Object doesn't support property or method 'pqGrid' here as your new example shows.
'this' doesn't know about pqGrid.

Code: [Select]

    var ajaxObj = {
                dataType: "JSON",
                beforeSend: function () {
                    this.pqGrid("showLoading");
                },
                complete: function () {
                    this.pqGrid("hideLoading");
                },
                error: function () {
                    this.pqGrid("rollback");
                }
            };
Also in the nested grid, 'isDirty' is always false. I have track set to true so is there any other setting I need to make?

[paramvir]

In the demo on line 53 context: $grid provides 'this' context to ajax object. Simlarly on line 125.

Also in the nested grid, 'isDirty' is always false. I have track set to true so is there any other setting I need to make?

Have you provided recIndx in the dataModel?
http://paramquery.com/pro/api#option-dataModel-recIndx

[forwheeler]

You provided the correct solution on both issues. Thanks.