Rally grid with custom column renderer sort

Question

Background

When I try to sort by a column that I have used a custom renderer for, nothing happens - it changes the sort from ASC to DESC and back and forth but the order of the data never changes. I am assuming this is because there is not definition of how to sort the data that I manipulated with a custom renderer, but I cannot seem to find a way to add a sorter or sorting function to the column.

Goal

I am making a grid that I want to sort by the Parent column. I want to sort it such that the parent appears just above any of its children (the parent being a Rollup and the children being Features).

Idea

For features, put the name of the Parent in the parent column. For Rollups, put the Name of itself in the parent column and add a class to it that sets

display: none;

Then, you can easily sort it out and have parents appearing just above children

Code

{
    text: 'Parent',
    dataIndex: 'Parent',
    renderer: function(value, meta, record) {
        var ret = record.raw.Parent;
        if (ret) {
            return ret.Name;
        } else {
            meta.tdCls = 'invisible';
            return record.data.Name;
        }
    }
},

Answer 1

For the rallygrid config, make sure you set the property of remoteSort, which is by default true, to false. Then, here is the config for the column:

            {dataIndex: 'Parent', name: 'Parent', 
                doSort: function(state) {
                    var ds = this.up('grid').getStore();
                    var field = this.getSortParam();
                    console.log('field',field);
                    ds.sort({
                        property: field,
                        direction: state,
                        sorterFn: function(v1, v2){
                            console.log('v1',v1);
                            console.log('v2',v2);
                            if (v1.raw.Parent) {
                                v1 = v1.raw.Parent.Name;
                            } else {
                                v1 = v1.data.Name;
                            }

                            if (v2.raw.Parent) {
                                v2 = v2.raw.Parent.Name;
                            } else {
                                v2 = v2.data.Name;
                            }

                            return v1.localeCompare(v2);
                        }
                    });
                },
                renderer: function(value, meta, record) {
                    var ret = record.raw.Parent;
                    if (ret) {
                        return ret.Name;
                    } else {
                        meta.tdCls = 'invisible';
                        return record.data.Name;
                    }
                }
            },