JGari.com

In streamlining the user experience of my ATK modules, I have been considering the integration of external sources. Two of these external sources have been the JQuery plugins: Flexigrid and jqGrid.

Both plugins are great. They both provide AJAX paging and record searching among other things. I went to the extent of integrating Flexigrid into the dashboard of my ATK ERP/CRM module and it brought a completely new experience to the mix.

Recently I have come to find another JQuery grid plugin, which probably offers more than Flexigrid. Its name is jqGrid.

In my view, these are the items that sets jqGrid apart:

- Great documentation

- Over 45 practical demos with source code

- Well rounded feature-set and active development

The following are 3 features that jqGrid offers out of the box, which I would love to see in the ATK grid:

Inline editing:

Inline editing may be be triggered in different ways. In the screenshot below, inline editing is triggered by clicking on the “E” button located on the left Actions column.

See it in action:

To see inline editing in action follow these steps:

1. Visit: http://trirand.com/jqgrid/jqgrid.html

2. Click on “Row Editing” from the left menu

3. Click on “Custom Edit” and then on the “E” button of any row

AJAX-driven Master-Detail directly in list mode:

Clicking on one of the records in the master grid, automatically makes an AJAX call to acquire data for the detail, which gets displayed on the detail grid, within the same page.

See it in action:

To see the master-detail in action follow these steps:

1. Visit: http://trirand.com/jqgrid/jqgrid.html

2. Click on “Advanced” from the left menu

3. Click on “Master Detail” and then on any row from the “Invoice Header” grid

Subgrids or grouping:

Grouping data on the main grid comes in two flavors: Subgrid and Grid as Subgrid. Both of these are triggered in the same way. Mainly be clicking on the plus(+) sign that is located on the left column of the main row. The difference between the two is that Grid as Subgrid is a Grid with complete features including searhing and paging.

See it in action:

To see the Subgrids in action follow these steps:

1. Visit: http://trirand.com/jqgrid/jqgrid.html

2. Click on “Advanced” from the left menu

3. Click on “Subgrid” or “Grid as Subgrid” and then on the plus(+) sign of the left column on the grid to view the subgrid of any row

Screenshot of Subgrid:

Screenshot of Grid as Subgrid:

Other nice feature - Toolbars and search:

Toolbars:

Toolbars are already part of ATK, and is also great that jqGrid supports it.

See it in action:

To see the Toolbar in action follow these steps:

1. Visit: http://trirand.com/jqgrid/jqgrid.html

2. Click on “New in version 3.1″ from the left menu

3. Click on “Toolbars and userdata” and then notice the “Click Me” button on the top grid and the “Total Amount” label at the bottom of the lower grid.

Search:

Search is triggered by clicking on the icon located on the lower left corner of the grid. Although jqGrid allows the user to search several fields, only one field can be searched at the time. I prefer ATK’s search feature, which allows the user to filter multiple fields at the time.

See it in action:

To see the Toolbar in action follow these steps:

1. Visit: http://trirand.com/jqgrid/jqgrid.html

2. Click on “Manipulation” from the left menu

3. Click on “Grid Data” and then on the icon located on the lower left section of the grid.

References:

- jqGrid Download page

- jqGrid Demos page

- jqGrid Documentation page

- ATK is a special purpose PHP framework, targeted at business applications. It allows you to build an application with very small amounts of code.

Hopefully we’ll get to see some of these features make it to ATK in the near future.
_________________
Jorge Garifuna
Professional Web Developer
Garinet Global Inc.
http://www.GariDigital.com

Trackback URI | Comments RSS