How to do server side processing with ngReactGrid

Last week I released ngReactGrid (An Angular grid using React to render) on github so those developers that were interested in seeing the code could provide some feedback.

Since then, I have continued to make small but quality improvements to the grid. I have also worked on improving the documentation. The grid is now almost to the point where after a couple of more features, we will be able to replace the existing grids in our application with ngReactGrid instances.

Hopefully, I'll proudly be able to say that we have the exact grid you see on github inside our application running in production within the next month or so.

Note: We already have the concept of ngReactGrid in production, and it's working out great. Performance is top notch. We want to stop using our own version and use ngReactGrid.

Now, I have received some emails from users interested in playing more with the grid but needing server side support as soon as possible.

I was able to introduce the getData functionality into the grid and released it in version 0.4.0. This functionality will allow developers to fetch data from the server while bring provided with the grid's current status.

This entails things such as page size, page number, search query, and sorting information.

Here is a small snippet of how easy it is to use getData with this grid:

$scope.grid = {
        data: [],
        columnDefs: [
        {
            field: "firstName",
            displayName: "First Name"
        },
        {
            field: "lastName",
            displayName: "Last Name"
        }],
        localMode: false,
        getData: function() {
            var grid = this;
            $timeout(function() {
                $scope.grid.data = dataSet.slice((grid.currentPage - 1) * grid.pageSize, (grid.pageSize * grid.currentPage));
                $scope.grid.totalCount = dataSet.length;
            }, 2000);
        }
};

Working example here: http://josebalius.github.io/ngReactGrid/examples/serverSide.html

In the code above, I use the $timeout Angular service to simulate latency but as you can see it is very easy to integrate server side processing with this grid.

I wrote getData this way, because our current implementation is very much the same, in fact we have widget events that trigger data reloads and we wanted the ability to update the grid by simply setting it's data property. This way the concern of how you get the data is left to the developer, and all the grid worries about is rendering it for you.

Go ahead and try it out, you will notice that there is absolutely no delay in rendering. It doesn't matter if you are rendering a 5x5 grid or a 10x100 grid, it will always perform great.

If you wish to read more about ngReactGrid, please go to: http://josebalius.github.io/ngReactGrid/

Next week, I hope to have the resizeable column feature finished, so stay tuned!