I eventually found out why it was not being called. I placed it in the wrong place.
I should have placed it as an attribute of the structure value instead of the grid definition.
Hope this helps someone else later.
structure: [
[
{ width: '35px'}
,{ width: '35px'}
,{ width: '60px'}
,{ width: '60px'}
,{ width: '60px'}
,{ width: '60px'}
,{ width: '25px'}
,{ width: '25px'}
,{ width: '40px'}
,{ width: '25px'}
,{ width: '25px'}
,{ width: '25px'}
,{ width: '240px'}
,{ width: '25px'}
],[
{ name: 'Product Code', field: 'ProductCD', width: '70px', colSpan: 2, editable: false}
,{ name: 'Product Name', field: 'ProductNM', width: '240px', colSpan: 4, editable: false}
// The rest of second column..............................
],[
// Third column..............................
],
,onBeforeRow: function(inDataIndex, inSubRows){
inSubRows[0].invisible = true;
}
],
Also in my case setting it to invisible is not enough. you need to change the css to remove the padding and border.
tr.dojoxGridInvisible th
{
padding: 0px !important;
border: 0px !important;
}
tr.dojoxGridInvisible td
{
padding: 0px !important;
border: 0px !important;
}
Sample code that lead me to the answer was this mailing list. here