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.

  1. Dojo Bug Report

  2. Dojo-Grid-Header-Column-Grouping

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.

Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top