It took me a while to figure this out and this is the solution I came up with. Using code from this
thread, I added to the init function for detailGrid:
detailModel: {
init: function (ui) {
var rowData = ui.rowData,
model = binDetailModel( $(this).pqGrid('instance'), rowData ),
$grid = $("<div class='hourDetail' />").pqGrid(model);
//save reference to rowData in detail grid.
$grid.data( 'rowData' , rowData);
return $grid;
}
}
But I was finding difficulty getting the instance of the detailGrid in the render function. This is what I settled on:
var detailRender = function(ui) {
var cellContents = {}, cellStyle = '';
var cellData = parseFloat(ui.cellData);
// Get the div for this detailGrid
var $grid = $(this.element).closest( 'div' );
var rowData = $grid.data('rowData');
// Logic to change the class based on values in the rowData
return cellContents;
}
Is this code robust enough to always return the proper detailGrid in $grid or will it return the next following grid when the render function is executed during the last rows of the detailGrid?
Or is there a better way to get the detailGrid from the render callback function when invoked in colModel render?