Dojo's onBeforeRow not being called

Question

I am trying to do a workaround in the Dojo Toolkit where you cannot do a colspan on the first row by adding a dummy row with just width in it. After creating the row, the row would be hidden using the onBeforeRow.

Please refer to the following as reference.

Here is my code:

ConfirmGridGrid = new DataGrid({
    store: ConfirmGridDataStore,
    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;
    }
}, "ConfirmGrid");
ConfirmGridGrid.startup();

For some reason the onBeforeRow event is not being called. Is there anything that you need to add? or do you need to do other event wiring to make it work? I am using the Dojo 1.9.1 by the way.

score 1 · Accepted Answer · answered Dec 28 '13 at 02:57

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

how can I overwrite the css settings programmatically? – h0ppel Jun 07 '16 at 12:58 — h0ppel, Jun 07 '16 at 12:58

Dojo's onBeforeRow not being called

1 Answers1