Using PortfolioItem/Feature model on custom store

Question

I'm creating an overview of features and their feature dependencies (not user stories).

I'm fetching the wsapi store filtered on release in step 1 and in step 2 I'm fetching the predecessor and successor collections in order to display their values.

I would like to use this wsapi store directly in a grid, but when performing an onScopeChange (release filtered app) the rendering of the grid happens before my loading of predecessor + successor collections. Thus, I'm trying to store the data in a custom.store to use in the grid - so far so good.

My issue is that I need to do all (most) formatting in the grid on my own. I'm setting the custom store model to PortfolioItem/Feature and would expect this to be used on the grid, but it just doesn't. Is this possible? If so, what am I doing wrong?

Custom store

_getViewStore: function () {

var me = this;
/*
    Extract data from featureStore
*/
var records = me.myFeatureStore.getRecords();

/*
    Create new, update, store for adding into grid
*/
if (!me.myViewStore) {
  me.myViewStore = Ext.create('Rally.data.custom.Store', {
    model: 'PortfolioItem/Feature',
    data: records,
  });
} else {
  me.myViewStore.removeAll();
  me.myViewStore.add(records);
}

},

Grid

_createGrid: function () {
var me = this;

me.myGrid = Ext.create('Ext.Container', {
  items: [{
    xtype: 'rallygrid',
    store: me.myViewStore,

    columnCfgs: [{
        xtype: 'gridcolumn',
        align: 'left',
        tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate'),
        text: 'Predecessors',
        dataIndex: 'Predecessors',
        width: 200,

        renderer: function (value, metaData, record) {
          var mFieldOutputPre = '';
          var records = record.predecessorStore.getRecords();

          _.each(records, function (feature) {
            mFieldOutputPre += Rally.nav.DetailLink.getLink({
              record: feature,
              text: feature.get('FormattedID'),
              showTooltip: true
            });
            // Add the feature name and a line break.
            mFieldOutputPre += ' - ' + feature.get('Name') + '<br>';
          }); //_.each

          return mFieldOutputPre;
        },
      },
      {
        text: 'FormattedID',
        dataIndex: 'FormattedID',
        xtype: 'templatecolumn',
        tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
      },
      {
        text: 'Name',
        dataIndex: 'Name',
        flex: 1
      },
      {
        text: 'Release',
        dataIndex: 'Release',
        flex: 1
      },
     {
        text: 'State',
        dataIndex: 'State',
        flex: 1
      },
      { // Column 'Successors'
        xtype: 'templatecolumn',
        align: 'left',
        tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate'),
        text: 'Successors',
        dataIndex: 'Successors',
        width: 200,

        renderer: function (value, metaData, record) {
          var mFieldOutputSuc = '';
          var records = record.successorStore.getRecords();

          _.each(records, function (feature) {
            //console.log('feature = ', feature);
            mFieldOutputSuc += Rally.nav.DetailLink.getLink({
              record: feature,
              text: feature.get('FormattedID'),
              showTooltip: true
            });
            // Add the feature name and a line break.
            mFieldOutputSuc += ' - ' + feature.get('Name') + '<br>';
          }); 

          return mFieldOutputSuc;
        }, 
      } 
    ] 
  }],
  renderTo: Ext.getBody()
});
me.add(me.myGrid);

}

The Release + State fields does not display data correct when using my custom store, but if I use my wsapi (feature) store that are formatted correctly.

Thank you in advance

Answer 1

I'd probably load all the stores first and then add the rallygrid configured with your already loaded feature store. Then you don't have to worry about the timing issues. I'm guessing you already found this example in the docs for loading the child collections?

https://help.rallydev.com/apps/2.1/doc/#!/guide/collections_in_v2-section-collection-fetching

This example is also pretty helpful, as it shows how to load hierarchical data much like you're doing, and uses promises to help manage all of that and then do something when everything has finished loading:

https://help.rallydev.com/apps/2.1/doc/#!/guide/promises-section-retrieving-hierarchical-data