Gridx in XPages – 25: Customizing the Top and Bottom Bars

In the last post, I showed how to add a button toolbar to the grid. In this post I’ll show a few more ways to customize the top and bottom bars.

Gridx Series

Gridx in XPages — Entire Series

Styling Content

Picking up from where we left off last time with a button toolbar added to the top of the grid, we now have a grid where there’s a button toolbar left justified on the top line.

Gridx 25 A

The Bar contents are added in a table structure, so you can modify it to pass styling to update the layout as desired.

If you’d rather center it you can modify the barTop attribute like this:

barTop: [
  {plugin: toolbar, style: 'text-align: center;'}

Gridx 25 B

You can pass other styling information via the style property as well.

If you have multiple items on a bar and/or multiple rows, you can also set rowSpan and colSpan attributes.

Adding plugins

Another useful plugin to add to the bar is Summary. This plugin tells you how many rows are in the data store and how many are currently selected. (If you filter the grid, then the count will be updated to the count of rows matching the filter.)

In this example, I’ve added it to the bottom of the grid (after including "gridx/support/Summary" in the require statement and giving the module the name Sumamary):

barBottom: [

Gridx 25 C

The other primary use for the bars seems to be for paging plugings. If you decide to use paging rather than infinite scrolling, you can use the bars for paging links, a drop-down page selection, and a page size selection. Here’s an example from the documentation:

Paging Plugins

You can also add custom plugins to the bars, so there’s a lot of flexibility to meet your requirements. Take a look at this article for more information.

Finally, as I mentioned in the last post you can also put custom HTML content in the bars, like this:

barBottom: [
  {content: "<h1>HTML Stuff Here</h1>", style: "color: red;"}  

2 responses to “Gridx in XPages – 25: Customizing the Top and Bottom Bars”

  1. pauravi says :

    how do I access the DOM elements in the bottom bar written in the content??
    example my dom is like this
    {content: “goto”, style: ‘width:100px;’}

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: