Custom rendering of Agile Central grid field

I'm trying to create a custom grid with columns for Feature Predecessors and Successors.

I've managed to extract the data and display the relevant formatted IDs of the pre+suc in clear text. Now I would like to format these as "standard" FormattedIDs with QDP/click options.

My display looks like this, is this the right path, what should I return in order to have correct formatting?

var myGrid = Ext.create('Ext.Container', {
    items: [
      {
        xtype: 'rallygrid',
        columnCfgs: [
          'FormattedID',
          'Name',
          { // Column 'Successors'
            xtype: 'templatecolumn',
            tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate'),
            dataIndex: 'Successors',

            renderer: function(value, metaData, record) {
              //console.log('Display in renderer: ', record.successorStore);
              var mFieldOutputSuc = '';
              var i;
              var mDependency;

              for (i = 0; i < record.successorStore.getCount(); i++) {
                mDependency = record.successorStore.getAt(i);
                console.log('mDependency = ', mDependency);
                mFieldOutputSuc = mFieldOutputSuc + mDependency.get('FormattedID') + '<br>'; // Correct return value?
              }

              return mFieldOutputSuc;
            }, //renderer: function(value, metaData, record) {
          }, // Column 'Successors'

Solution

I'd check out this utility method: https://help.rallydev.com/apps/2.1/doc/#!/api/Rally.nav.DetailLink-method-getLink

You should be able to just put that in there where you have your //Correct return value? comment:

mFieldOutputSuc += Rally.nav.DetailLink.getLink({
    record: mDependency
});

There are some more config options you can pass as well, to customize the link further, but I think that should get you started...