Determining if Grid Filtering is Enabled

Intro:

This example demonstrates how to use JavaScript to check if grid filters have been applied to any columns within the grid. In this example, we're using a grid that has three columns that can each be filtered, and we will be performing checks to see if filters have been applied in any of these columns. This check will be performed when the screen loads, and if there are any changes to the filters on any column.

This particular example uses subfile properties to load the data into the grid widget. The JavaScript is used to determine the number of columns and names of the column headers, and will then use that information to loop through the columns. As the JavaScript is looping through the columns in the grid, it will present an alert to the customer for each column describing the filtering status of said columns.

The RPG program that runs this example is very simple. It provides logic to display the correct record format, and handles loading the grid data into the grid. The logic for binding the data fields to the grid columns and for setting these alerts is set up in the DSPF.

Also, this example uses alerts to show the changes in the grid filtering status, but this same logic can be applied to other widgets (textboxes, output fields, etc.) as well.

Building the Example:

This example assumes that you are familiar with the onload and onfilterchange events. If you are not familiar with these events, we recommend reading the following sections before trying this example:

To start, we put together a screen that looks like this:

This is a very simple screen that uses a panel, grid widget, output fields, and buttons. Now that we have our screen set up to look the way we would like, we can configure the grid to make sure filtering is enabled.

Setting up the Grid:

In the Visual Designer, click on the grid widget that you have for your screen.
Give the grid widget a unique ID like TestGrid. This is what I will use as the ID for this example.
Under the Subfile Settings section, set the following properties as shown below:
1. The display subfile property should be bound to sfldsp.
2. The display control record property should be bound to sfldsp as well.
3. The clear subfile property should be bound to sflclr.
4. This is how these properties should look after you have bound them:

e. To bind these fields, repeat the steps shown below for each property:

Under the Grid Settings section, set the filter option property to true.

JavaScript:

This portion of the example is where we’ll configure the grid and the screen to check each column in the grid to see if there are filters set, and to see if there have been any changes to the filters. In this example, we want the columns in the grid to be checked upon loading the screen, and after making any changes to the filters on a column. So, the JavaScript code used for this will be placed in two places:

The onload event
And the onfilterchange event

Key JavaScript API and Profound UI techniques that are used in this example:

Place the following code in the onload event of the record format:
var numCols = getObj("Grid1").pui.properties["number of columns"]; var head = new String(getObj("Grid1").pui.properties["column headings"]); let headArr = head.split(',', numCols); for(let i = 0; i < numCols; i++) { var col = getObj("Grid1").grid.getFilter(i); if (col == null) { alert("The " + headArr[i] + " column in the grid has no filters set.") } else { alert("The following filter is applied to the " + headArr[i] + " column: " + col); } }
1. This code does the following:
  1. Retrieves the number of columns and column headings by referencing the grid widget using getObj()
  2. Placing and splitting the column headings into an array
  3. Loops through all of the grid columns
  4. Checks to see if a column has been filtered using getFilter()
  5. Based on this check for the column, an alert will generate letting the user know the filter status of that column.
Next, place this same code in the onfilterchange event of the grid as well.

Result:

After configuring your grid widget and coding the JavaScript that will check the filter status of each column, you should see an alert generate for each column letting you know if any filters have been applied. See below for how this looks when running the application:

Upon Loading:

Adding a Filter:

Removing a Filter:

Entire Process: