General Category > Help for ParamQuery Pro

Detail grid with edit buttons

(1/2) > >>

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: ---
  function editRowDetail(rowIndx) {
               $grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-edit' });
                $grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });

--- End code ---
How do I refer to the detail grid here instead of the main grid.

Also in the demo you have

--- Code: ---            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;
            }

--- End code ---
Later on in my code I reference the main grid like this


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

--- End code ---

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

Navigation

[0] Message Index

[#] Next page