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.
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;'}
],
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: [ Summary ],
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:
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;"}
],
