How to Customize the Grid’s Column Sorting Options in
WebSmart ILE

We recently introduced WebSmart ILE’s Page at a Time(Grid) template, a feature-rich grid template that displays data in a modern tabular layout. The template, which has been available since version 9.2, is based on the jQuery jqGrid plugin. It uses AJAX and JSON to display and process data faster by only refreshing a portion of the screen rather than the entire page.

Grid-based WebSmart program that displays sorting arrows by default

WebSmart’s new template simplifies the process of creating a jQuery grid by pre-defining a number of options, including sortable columns, flexible paging options and row highlighting. The jqGrid plugin also sets some default values that control aspects of the grid, such as alternating row colors and what is displayed while an AJAX call is in progress. For a full list of jqGrid’s default options, please visit jqGrid’s Wiki page.

You can override the default values set by WebSmart and jqGrid at a global level, which affects all programs, and at the program level. Below are a couple of examples that highlight each approach.

Globally enable column sequence sorting
View Example 260, which explains how to globally enable column sequence sorting so users can change a column’s position by dragging the column header left or right. While this change can be made at the program level, it’s more likely that you would want to apply it to all of your grid-based programs in order to streamline their look and feel.

Some global customizations require modifications to the jqGrid files that are linked from your grid-based WebSmart programs by default. Knowledge Base article 9954 explains what the different jqGrid files are and what they do.

Display sorting arrows by default
View Example 245, which illustrates how to change a grid at the program level to display sorting arrows for all sortable columns by default. In this example, we override the grid’s default options by placing the code before the xl_jqGrid.load(…) function. To learn more about how to make changes at the program level, please read Knowledge Base article 9985.

Please contact Technical Support if you have any questions.

One thought on “How to Customize the Grid’s Column Sorting Options in
WebSmart ILE

  1. Pingback: How to Add Form Validation and Filters to the Grid | BCD Tech Blog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>