Evaluating HTML5/Angular Data Grid
I’m implementing sorting, filtering, and grouping for a data set to allow business users to look at information in various ways for more comprehensive data analysis. By using a pre-built component, time is saved by reducing development time for implementing the feature. This is replaced by configuring and adding logic for the grid to work. I tried out a few different data grids to see how they might meet my needs:
UI-grid
- Control selected/displayed columns
- Must manually load / save user selected columns (implemented on other tables)
- Column Filtering
- If we limit the result set and do NOT use pagination, then we can use filters inside the grid:
- Supports less-than and greater-than — need to be in separate inputs
- Dates need to be typed in by hand (and need to specify format) or create a custom date filter
- If we limit the result set and do NOT use pagination, then we can use filters inside the grid:
- Saving/Loading Filters
- The filters store the column data like “grid.column[i].filters[0]” so it would be pretty easy to store that data to a database and then pre-populate back
- Exporting
- CSV is supported internally
- Pdf is supported but must be tested (seems IE has problems):
- http://ui-grid.info/docs/#/tutorial/312_exporting_data_complex
- Exporting to IE is limited (it works but can only be downloaded):
- Pagination
- Painful but possible with the filters and just passing them to the server and handling them individually
- Printing
- Export to pdf and print
Dev Express Grid
- Control selected/displayed columns
- This will be a manual process as well (combining this with the ‘visible’ properties on the columns)
- Column Filtering
- Again, we would want to NOT use pagination and just limit the result set
- Contains built-in equality operators
- Saving/Loading Filters
- I’m having difficulty finding out how to do this. It seems that this is close
- Exporting
- Only exports to Excel — requires some sort of external method for exporting
- Pagination
- They only have simple pagination samples, none containing filters
- Printing
- Export to excel and print
- Export to pdf on server (or client)
Telerik KendoUI DataGrid
Note: although this seems like a fully-functional datagrid, it’s hard to find examples for angularjs. It seems most are plain javascript.
- Control Selected/Displayed columns
- Must be handled manually (like all others)
- Column Filtering
- Comes with all filter types including equality operators
- Saving/loading filters
- Exporting:
- Exports to PDF
- Exports to Excel
- Pagination
- They only have simple pagination samples, none containing filters
- Printing
- Export to pdf and open then print
Printing seems to be the biggest issue across all three of these data grids. UI-Grid can do CSV and pdf in Chrome, DevX Grid can do Excel only). Up next, I’m looking to do the following:
- Test saving to pdf on client (seems buggy):
- Saving to pdf on server (this is how Tracker does it)
