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:

Gridx17 A

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

Gridx17 B

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.

Gridx17 C

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.

Gridx17 D

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

Gridx17 E

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; 
  }
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: