Gridx in XPages – 17: Defining Column Data Types in order to Provide Number and Date Range Filtering

In the last post, we looked at how to easily add advanced filtering filtering to the grid. In this post, I’ll show how to define number and date columns so they can be filtered appropriately.

Gridx Series

Gridx in XPages — Entire Series

Column Data Types

By default, all columns are treated as strings. But if you define columns as numbers and dates, you get filtering options specific to those data types.

Here’s what I get when I add the Birthday and Zip columns (from the FakeNames database) to my grid:

If I try to filter based on the number or date columns, I get the options that make sense for string filtering.

Number Column

To improve this, just add the dataType attribute to the column definition and define the type as number.

{id: 'zip', field: 'zip', name: 'Zip', dataType:'number', width: '60px'}

Now when I filter on that column, I get a set of options that are much more useful when dealing with numeric data.

Date Column

Date columns require a little extra work, but it’s still simple.

First, we need to add the dataType attribute and set it to date.

Now, when I filter on that column, I get a set of options that are much more useful when dealing with dates.

And, when you select values to set up the filtering, you get a date picker to make it easy.

However, it doesn’t work properly yet. The next thing we need to do is add a dateParser function. I can’t say I know why this is necessary,but all you need to do is add a function that returns the same value and it does the trick.

Now the filtering will work properly.

Here’s the source for the birthday column:

{ 
  id: 'bday', 
  field: 'birthday',
  name: 'Birthday', 
  width:'100px',
  dataType:'date',
  dateParser: function(value){ 
    return value; 
  }
}