Author Topic: How to get row data of Main Grid from Detail grid  (Read 10292 times)

forwheeler

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 26
    • View Profile
How to get row data of Main Grid from Detail grid
« on: January 09, 2014, 04:16:21 am »
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.
« Last Edit: January 09, 2014, 06:38:30 am by forwheeler »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: How to get row data of Main Grid from Detail grid
« Reply #1 on: January 09, 2014, 05:59:14 pm »
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 );





« Last Edit: January 09, 2014, 06:45:53 pm by paramquery »

forwheeler

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 26
    • View Profile
Re: How to get row data of Main Grid from Detail grid
« Reply #2 on: January 09, 2014, 09:25:59 pm »
Quote
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: How to get row data of Main Grid from Detail grid
« Reply #3 on: January 09, 2014, 10:13:58 pm »
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/
« Last Edit: January 09, 2014, 10:43:26 pm by paramquery »

forwheeler

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 26
    • View Profile
Re: How to get row data of Main Grid from Detail grid
« Reply #4 on: January 09, 2014, 11:01:07 pm »
Perfect, thanks

dbadmin

  • Pro Economy
  • Jr. Member
  • *
  • Posts: 67
    • View Profile
Re: How to get row data of Main Grid from Detail grid
« Reply #5 on: February 11, 2015, 04:54:31 am »
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");
                 }
           }
     },