Question

I'm trying to tie a function to be executed after the renderRow event of the grid. So I used the aspect.after from DOJO, but here is the kicker. This execute before the row is indeed rendered, therefore the divs\tds are not on the screen yet. And since I do want to use the position of the items, using the dojo/domgeometry returns an object filled with zeroes. How can I guarantee that my function will execute after the row is finished displaying?

Below you can find the JS where I'm calling it.

    aspect.after(grid, 'renderRow', function(row, args) {
        var object = args[0];
        if (object.type == 'tipo_exec') {
            row.className += ' black';
        } else if(object.type == 'exec') {
            row.className += ' gray';
        } else if(object.type == 'ic') {
            if ((typeof(object.dep)!='undefined') && (object.dep.length > 0)) {
                require(['dojo/dom-geometry','dojo/dom-construct'],
                    function(domGeom, domConstruct){
                        console.log(domGeom.position(row));
                    }
                );
            }
        }
        return row;
    });

EDIT: Another thing, I'm using the tree extension, and the renderRow happens after a click on the parent to expand.

EDIT: So here is a bit of more info in case it is needed. The store is simple:

    store = new Observable(new Memory({'data': data,
        'getChildren': function(parent, options){
            return this.query({'parent': parent.id}, options);
        },
        'mayHaveChildren': function(parent){
            return parent.hasChildren;
        }
    }));

And the grid is declared as:

grid = new (declare([OnDemandGrid, Selection, Keyboard, CompoundColumns]))({
        'columns': nCols,
        'query': { 'parent': undefined },
        'store': store

    }, gridId);

This is the inside of the aspect after

if ((typeof(object.dep)!='undefined') && (object.dep.length > 0)) {
    console.log('just before adding the refresh');
        on.once(this, 'dgrid-refresh-complete', function(){
            console.log('finished refreshing');
            require(['dojo/dom-geometry','dojo/dom-construct'],
                function(domGeom, domConstruct){
                    console.log(domGeom.position(node));
                }
            );
        });
}

The console.log('finished refreshing');never gets called, neither does the the position log.

There are many columns on the grid, a couple tied on a compouding column, a name colum which is a tree, and a couple of others. The renderRow is called when expanding the tree!

Image of the grid with a couple of data removed

Was it helpful?

Solution

You can defer the invocation of domGeom.position(row) until the dgrid-refresh-complete event has been emitted. You'll need to include dojo/on.

aspect.after(grid, 'renderRow', function(row, args) {
    var object = args[0];
    if (object.type == 'tipo_exec') {
        row.className += ' black';
    } else if(object.type == 'exec') {
        row.className += ' gray';
    } else if(object.type == 'ic') {
        if ((typeof(object.dep)!='undefined') && (object.dep.length > 0)) {
            on.once(this, 'dgrid-refresh-complete', function(){
                require(['dojo/dom-geometry','dojo/dom-construct'],
                    function(domGeom, domConstruct){
                        console.log(domGeom.position(row));
                    }
                );
            })
        }
    }
    return row;
});

EDIT Updated jsfiddle to accommodate tree http://jsfiddle.net/rayotte/q8bCx/2/

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