Drag/Drop Ranking of Portfolio Items

I am trying to implement a rallygrid which utilizes the built in ranking system provided by Rally. I have run into several issues getting this to work:

The drag/drop functionality doesn't seem to work at all in the production Rally environment, while the App-debug.html version does allow me to change the rank of the items.
Neither version gives me any formatting on the drag/drop column like you would see on the track tab (the six dots). This makes it very hard to tell that the ranking of the grid is even adjustable.
If I disable selection, the ranking no longer works. I believe this most likely has to do with using the selected record to save the new rank, but it would be nice if I could at least make it not apparent that the record was selected. Other than modifying the CSS, I'm not sure there is a way around that.

For context, I am using App SDK RC2, and my grid configuration looks like this:

{
    xtype: 'rallygrid',
    model: 'PortfolioItem/Feature',
    enableRanking: true,
    columnCfgs: [{
        dataIndex: 'DragAndDropRank',
        maxWidth: 50
    },{
        dataIndex: 'FormattedID',
        maxWidth: 50
    },{
        dataIndex: 'Name',
        flex: 1,
        minWidth: 160
    },{
        dataIndex: 'PlannedStartDate',
        maxWidth: 90,
        align: 'center'
    },{
        dataIndex: 'PlannedEndDate',
        maxWidth: 90,
        align: 'center'
    },{
        dataIndex: 'ActualStartDate',
        maxWidth: 90,
        align: 'center'
    },{
        dataIndex: 'ActualEndDate',
        maxWidth: 90,
        align: 'center'
    },{
        dataIndex: 'PercentDoneByStoryCount',
        maxWidth: 90,
        align: 'center'
    },{
        dataIndex: 'PercentDoneByStoryPlanEstimate',
        maxWidth: 90,
        align: 'center'
    }]
}

Solution

I tested this app inside Rally, in prod. When I click on Rank column header the six-dot drag-n-drop icons appear. The grid should be sorted by Rank in order for those icons to show.

enter image description here

Here is the deployment html:

<!DOCTYPE html>
<html>
<head>
    <title>features grid</title>

    <script type="text/javascript" src="/apps/2.0rc2/sdk.js"></script>

    <script type="text/javascript">
        Rally.onReady(function () {
            Ext.define('CustomApp', {
            extend: 'Rally.app.App',
            componentCls: 'app',
            launch: function() {
                this.add({
                    xtype: 'rallygrid',
                    model: 'PortfolioItem/Feature',
                    enableRanking: true,
                    columnCfgs: [{
                        dataIndex: 'DragAndDropRank',
                        maxWidth: 50
                    },{
                        dataIndex: 'FormattedID',
                        maxWidth: 50
                    },{
                        dataIndex: 'Name',
                        flex: 1,
                        minWidth: 160
                    }]
                });
               }
            });
            Rally.launchApp('CustomApp', {
                name:"features grid",
                parentRepos:""
            });

        });
    </script>
    <style type="text/css">
        .app {
     /* Add app styles here */
}
    </style>
</head>
<body></body>
</html>

But there is a difference between the prod and debug. I noticed that while it is possible to drag-n-drop the artifacts in debug version, the six-dot icons do not appear even when the grid is being sorted by Rank. In prod, inside Rally, it is is possible to drag-n-drop the artifacts as long as the grid is sorted by Rank - at that point the six-dot icons appear.