January 24, 2013

What is a data grid?

I lately found myself explaining to different people what is a data grid, or to be more accurate, what is not a data grid.
There seems to be a common misunderstanding of what a data grid should do and what are it's responsibilities among developers and UX experts equally.
Below I will list what a data grid should not include with hopes it helps you in future debates over one of the most common component in RIA. Of course it really depends on UX requirements in the end, but given your UX is not trying to invent the wheel all over again, the following lines are true to you as well.

A data grid is not responsible for fetching it's data

The data grid should not know where it gets the data from nor the API which is behind the collection it receives. If you want a fully business-detached component there shouldn't be any call to the server from the data grids. This includes refreshing the data of course.

The actions available on the data grid are not a part of the data grid

Add, delete, refresh, export to excel etc. are all actions a user can do on the data of the data grid. The data, not the data grid.
Let's take "add" for example - you create a model, insert it into a collection (sync the server if required) and give the updated collection to the data grid to display it.
I can smell the next question popping - No! a toolbar is not a part of a data grid.

Paging is only triggered by the data grid, not done by it

Some data grids embed paging mechanism, but as mentioned before, grids do not fetch their data, and given that paging is actually fetching the data with params, the grid should not handle the paging but just dispatch an event with the page number, start index and range included. "Someone" else should take this data and fetch the page.

Filtering is not the grid's business

Again, grids do not fetch their data. Filtering is actually fetching a data with constraints to it. Do it elsewhere and bring the results to the grid.

Sorting, in most cases, is done on the server...

I know that most grids support sorting within results, meaning that they sort the results which were already fetched, but in most cases you would like to go to the server and ask for a new sorted data, since the results exceed the page row limit (or lazy load limit). In these cases, the data grid simply tells that one of it's header were clicked, and let's other do the fetching for it.

Bottom line...

The data grid is mainly for displaying data, not messing around with it. pretty simple concept that keeps slipping under UX big mocks. If you keep your grid at doing what it should and nothing more, you will create a more reusable and portable component.

Take care.

No comments: