How to do an aspect.after of renderRow method using dgrid with tree extension?

Question

I am trying to style rows using dgrid with Tree extension. For this, I use aspect.after as suggested in https://github.com/SitePen/dgrid/issues/380 and it works well if you do not use Tree extension.

But with Tree extension the grid is rendered when the constructor finished, so aspect.after has no effect.

My code is:

require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/Tree',
    'dgrid/Keyboard',
    'dgrid/Selection',
    'dstore/Memory',
    'dojo/aspect',
    'dstore/Tree',
    'dgrid/extensions/ColumnResizer',
    'dojo/domReady!'
], function (declare,OnDemandGrid, tree, Keyboard, Selection, Memory,aspect,TreeStore,ColumnResizer)  {

var dataStore = new (declare([ Memory, TreeStore ]))({ data: $jsonData });

var CustomGrid = declare([ OnDemandGrid, tree, Keyboard, Selection, ColumnResizer ]);

var columns = $jsonHeadTitles;
columns[0][0] = tree(columns[0][0]);

var grid = new CustomGrid({
        className: 'dgrid-autoheight',
        collection: dataStore.filter( { parent: 0 }),
        columns: columns,
        noDataMessage: 'Sin registros',
        shouldExpand: function(){ return true; },
        selectionMode: 'single',
        cellNavigation: false,
        formatterScope: { html: function(item){ return item; }}

}, '$nombre');

aspect.after(grid, 'renderRow', function(row, args) {
    var object = args[0];
    if (!empty(object.parent)) {
        row.className += ' gridchildren';
    }
    return row;
});

 grid.on('dgrid-error', function(event) {
    console.error(event.error.message);
});

});

How can we style rows using Tree extension?

Regards,

score 5 · Answer 1 · answered May 28 '15 at 01:58

Your problem isn't directly related to use of the Tree mixin; in fact, you'd have the same problem without it on the first render, because the aspect.after is hooked up after the initial render runs in this case (since the grid starts up immediately and the store being used is synchronous).

There are a few options to resolve this.

One option would be to initially set collection to null, then set it to your actual store only after calling aspect.after.

Another would be to not tie the grid to an element already in document flow, in which case the initial render wouldn't happen until you manually call grid.startup, giving you an opportunity to call aspect.after beforehand.

Alternatively, you can work your logic into the declare call you're using to mix features into your grid, instead of using aspect after the instance is created. For example:

var Grid = declare([ OnDemandGrid, Tree, Keyboard, Selection, ColumnResizer ], {
    renderRow: function (object) {
        var rowElement = this.inherited(arguments);
        if (!empty(object.parent)) {
            rowElement.className += ' gridchildren';
        }
        return rowElement;
    }
});

Also worth noting: passing a column to tree (as you are doing before creating the grid) is incorrect in dgrid 0.4. Tree is now a mixin (which you are already using correctly in your declare call).

Hey I know it's a late comment, but how does the 'empty' method work? Also is there a newer way now to custom-color certain rows of the dgrid? — takanuva15, Feb 01 '18 at 19:21

How to do an aspect.after of renderRow method using dgrid with tree extension?

1 Answers1