How to insert a new row to the top of FlexGrid

By default, programmatically pushing a new data object into a FlexGrid's data source appends it to the end of the collection, causing the new row to appear at the bottom of the grid. If you are building an application where real-time tracking or quick editing is crucial, you may need new records to immediately appear as the very first row at the top of the grid.

Solution To insert a new row at the top of the grid, you should use your array's standard insertion methods (such as unshift or splice) on the underlying data collection rather than appending it to the end. In JavaScript, you can manipulate the CollectionView's raw array via sourceCollection.

When you insert a generic object at index 0 of the sourceCollection and register it with itemsAdded, calling the refresh() method forces the FlexGrid to re-render and display the new row at the top. Note that this visual positioning is temporary for the current session; once the data is saved and fetched fresh from a database, the record's position will ultimately depend on your database queries and sorting rules.

var data = {};
            data['Id'] = Math.random() * 500;
            data['CountryName'] = 'Custom';
            data['Downloads'] = Math.random() * 1000;
            data['Sales'] = Math.random() * 1000;
            data['Amount'] = Math.random() * 1000;
            data['Extra'] = Math.random() * 1000;
            grid.collectionView.sourceCollection(0,0,data);
            grid.collectionView.itemsAdded.push(data);
            grid.collectionView.refresh();