Grid Column Renderer not called

Question

I have an issue with a rally grid column render not getting called when using the filtering plugin.

When first entering the page it works fine, even the filtering. But if I do a page refresh (browser F5 or go to another page and back) the renderer function is not called.

Is this a bug or feature?

Can I force the renderer function to be called somehow, e.g., in the store load event?

Here's a small example showing the behavior;

Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function () {

    Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
        models: ['PortfolioItem/Initiative'],
        enableHierarchy: true
    }).then({
        success: this._onStoreBuilt,
        scope: this
    });
},


_onStoreBuilt: function (store) {
    var modelNames = ['PortfolioItem/Initiative'];
    var context = this.getContext();

    this.add({
        xtype: 'rallygridboard',
        context: context,
        modelNames: modelNames,
        toggleState: 'grid',
        plugins: [
            'rallygridboardaddnew',
            {
                ptype: 'rallygridboardfieldpicker',
                headerPosition: 'left',
                modelNames: modelNames,
                stateful: true,
                stateId: context.getScopedStateId('grid-fields')
            },
            {
                ptype: 'rallygridboardinlinefiltercontrol',
                inlineFilterButtonConfig: {
                    stateful: true,
                    stateId: context.getScopedStateId('grid-filters'),
                    modelNames: modelNames,
                    inlineFilterPanelConfig: {
                        quickFilterPanelConfig: {
                            defaultFields: [
                                'ArtifactSearch',
                                'State'
                            ]
                        }
                    }
                }
            }
        ],
        gridConfig: {
            store: store,
            columnCfgs: [
                'Name',
                'State',
                {
                    text: 'Refined',
                    dataIndex: 'RefinedEstimate',
                    renderer: function (value) {
                        console.log("RefinedEstimate:renderer");
                        return value + " EUR";
                    }
                }
            ]
        },
        height: this.getHeight()
    });
}

});

Answer 1

I have gotten a confirmation that this is a bug.

Might not be prioritized due to focus on new framework using React.

Answer 2

What if you set alwaysShowDefaultColumns to true in your gridconfig?

gridConfig: {
    alwaysShowDefaultColumns: true
}

Answer 3

I've been playing around with different options and I actually think it has something to do with the gridboard and not the plugins.

I've created a rather bare-bone gridboard on which I can reproduce the issue.

Reproduction steps;

1. Create new page
2. Insert HTML app + paste code
3. Re-arrange the column ordering
4. Refresh the page (F5) or jump to another page and back

Now the custom renderer function is no longer called.

I've tried the same with a rallygrid, but here the rendering works ok.

Bare-bone RallyGrid Code

Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function () {
    console.log("launch()");
    Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
        models: ['PortfolioItem/Initiative'],
        autoLoad: true,
        enableHierarchy: true
    }).then({
        success: this._onStoreBuilt,
        scope: this
    });
},

_onStoreBuilt: function (store) {
    console.log("_onStoreBuilt()");
    var modelNames = ['PortfolioItem/Initiative'];
    var context = this.getContext();
    var me = this;

    var myGrid = me.add({
        xtype: 'rallygridboard',
        context: context,
        modelNames: modelNames,
        toggleState: 'grid',

        gridConfig: {
            store: store,
            alwaysShowDefaultColumns: true,
            columnCfgs: [
                'Name',
                'State',
                {
                    text: 'Refined',
                    dataIndex: 'RefinedEstimate',
                    renderer: function (value) {
                        console.log("RefinedEstimate:renderer");
                        return value + " EUR";
                    }
                },
                {
                    text: 'Department (Yrs)',
                    xtype: 'templatecolumn',
                    tpl: '{RefinedEstimate} ({Name})'
                }
            ]
        },
        height: me.getHeight()
    });
}});

Answer 4

the problem seems to be that you do not fetch the field that you are trying to display.

If you do not specify a 'fetch' list when you are doing the first TreeStore build, then the SDK will revert to a default set of fields (i.e. not everything). When it comes to do the grid, the field doesn't not exist, so it cannot fetch data, so it doesn't bother to call the renderer.

If you add a line "fetch: true" after enableHierarchy, it will probably burst into life. If you don't want to fetch ALL the fields, then specify an array of field to fetch. E.g: fetch: ['FormattedID', 'ObjectID', 'RefinedEstimate', 'PreliminaryEstimate']