jqxGrid – Implementation experience

While working on a requirement to use a grid table functionality for grid structure customizations (e.g. add, delete, select any number of rows or columns, cell fields restriction and validation etc.), I used jqxGrid (a widget of JQWidget).

During the development we encountered some issues which are listed below : –


  • Data validation presentation: In jqxGrid the only option available for Displaying validation error is “showvalidationpopup” which shows error messages next to each cell as a tooltip pop-up. This functionality becomes more complex and congested as the number of error increases making it very difficult to continue working (screen shot below)
    cellrenderer might be used to avoid this issue where we can color code a cell to highlight validation mismatch.


    1. Table grouping issues: jqxGrid grouping functionality offers facility to group table data by selecting attribute(s) through header menu drag and drop option. Here 2 issues have been identified.A. When grouping is applied on more than 2 attributes, the aggregated sum of first attribute does not represent the actual value as can be seen in the screenshot below. It would be better to show the aggregated sum of attribute value of the property rather than distinct attribute property.
      Grouped TableB. As grouping functionality includes paginated results (i.e allowing only 10 – 20 per page), it becomes an issue as grouping only works for rows visible on the screen and does not show across entire data-set. For example if you have 10 records in a page then the grouping would be done on those 10 records only.

Grouped Pagination

    1. Limited Character Validation: jqxGrid does not provide any attribute like “maxlength” (HTML attribute use in input tag) for Input field’s character limitation validation, the available option is “cellvaluechanging” function where required condition can be used. Is it a good solution to check conditions with every character entered?
    2. Angular directive – ngClick: AngularJs Directives provides methods to integrate jqxGrid in web pages where ng-click directive specify custom behaviour when a element is clicked, jqxGrid does not work with ngClick directive well so calling a function on click is not possible.Functions provided in jqxGrid like ready and rendering function might be used to avoid these issues along with jQuery function it is possible to call function and perform operation. “cellrenderer” also can be used as an option within cell in which ng-click is required to use. Simple code snippet is –cellsrenderer: function (row, field, value) {
      return '<div style="margin-top:14px;padding-left:5px" ng-click=’functionName()’>'+value+'</div>';
    3. Data Export Problem: Data Export functionality provide the table data to export in various forms like Excel, XML, CSV, TSV, JSON, PDF and HTML but it does not support XLSX format which is pretty common standard since Excel 2007.


jqxGrid comes with lots of predefined function to make use of Grid table easy although these issue may be resolved to make it better experience.

Leave a comment