Tag Archives: angular

Evaluating HTML5/Angular Data Grid

misc1I’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
  • 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
  • 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
  • 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
  • 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:

Choosing the Right Front End Tools

Rick HerrmannRecently, I had the opportunity to meet with a client that was in the process of deciding on a front-end technology for their dev team to use.  They already did quite a bit of research and formed some opinions about different technologies, and wanted to get our opinion about the way they evaluated their options. One point I made early on in our discussion was that there is no one “right” answer to the question of “which tool(s) should we use?”.   Read more

Angular Form Errors – A Declarative Solution

Rick HerrmannMost of Angular is different than Angular 1.x, but one of the idioms that stayed the same was the use of class names to identify form fields that had validation errors (e.g. ng-invalid, ng-dirty, ng-touched etc).  By checking for different combinations of these classes, you can tell which fields are invalid, have been modified (“ng-dirty”), and had focus at some point (“ng-touched”).  However, this had a tendency to lead to some rather verbose and messy view code just to show/hide a validation message:

Read more

« Older Entries