How to get row data of Main Grid from Detail grid

[forwheeler]

How do I get row data from the main grid from the detail grid?

I tried mainGridData = $('#jsongrid').pqGrid("getRowData", { rowIndxPage: 0 });
but of course I don't have the correct rowIndxPage and I'm not sure how to get it.

[paramvir]

rowData is passed to detailModel.init as one of the ui keys.

http://paramquery.com/pro/api#option-detailModel

It can be saved in $detailGrid as $detailGrid.data('rowData') for later use.

Alternatively rowData can also be obtained as

Code: [Select]

var $tr = $detailGrid.closest( 'tr' );
var obj = $grid.pqGrid('getRowIndx', {$tr: $tr } );
var rowData = $grid.pqGrid('getRowData', obj );


[forwheeler]

It can be saved in $detailGrid as $detailGrid.data('rowData') for later use.

I guess I didn't explain what I wanted very well.
I want to get the main grid rowData from the inside the detail grid.

In the main grid I have 

Code: [Select]

init: function (ui) {
                var rowData = ui.rowData,
                    id = rowData["ID"];
                I want to get this id from inside the addRowDetail($grid) function so I can supply this id from the main(parent) grid to the added row in the detail grid.

I can access gridMain.detailModel.init but am not sure how to access the id variable. I know this is probably due to my lack of JS knowledge.

[paramvir]

The solution remains the same. First you save parent rowData in detail grid and later on you extract rowData from it whenever desired.

Code: [Select]

detailModel: {
            cache: true,
            collapseIcon: "ui-icon-plus",
            expandIcon: "ui-icon-minus",
            init: function (ui) {
                var rowData = ui.rowData,
                    orderID = rowData["OrderID"];

                .....
 
                var $grid = $("<div></div>").pqGrid(obj);                   

                //save reference to rowData in detail grid.
                $grid.data( 'rowData' , rowData);

                return $grid;
            }
        }


Code: [Select]

function addRowDetail($grid) {

   //get rowData from detail Grid.
   var rowData = $grid.data( 'rowData' );
   var id = rowData["id"];     
}

Note: $( selector ).data() is part of jQuery API. http://api.jquery.com/data/

[forwheeler]

Perfect, thanks

[dbadmin]

Just wanted to share my code for future users (as it wasn't obvious to me how to implement color formatting when detail grid is opened)

detail model refresh function:

 refresh: function( event, ui ) {
        var id = $(this).data("rowData")["id"];
        var data = ui.dataModel.data;
        for (var i = 0; i < data.length; i++)
           {
                 if(data["detailID"] == id)
                 {
                    row = $(this).pqGrid( "getRow", {rowIndx: i} );
                    row.addClass("grid-cell-highlight-valid-light");
                 }
           }
     },