Without doubt the most widely utilized component in Valence apps created with Nitro App Builder (NAB) is the tried-and-true grid. Like a subfile on steroids, the super versatile grid widget makes it possible to provide browser-based lists of business data in ways that are inherently intuitive for users, with the added benefit of being downloadable straight into Excel or PDF.
Yet for all its existing features, we continue to strive for improvement and find ways to further refine the experience for both developers and users alike. So in this month’s tip, we review the most prominent grid-related UI features that were introduced in the first few Valence 6.3 maintenance builds of 2025.
Recently added grid features in Nitro App Builder have made it possible to:
Squeeze in more rows and columns…
Though “less is more” is often considered the most user-friendly approach to presenting lists of data in a grid, and is hence the default UI setting for the NAB grid widget, sometimes users insist that you squeeze in more. For this purpose, the “Slim View” was introduced a long time ago, which when selected reduces much of the open space between rows and columns that otherwise shows. But alas, there are those times when users clamor for even more rows and columns. Hence we’ve introduced “Ultra Slim” so that, when you absolutely need to, you can present a veritable tsunami of rows and columns within the visible borders of your grid. Use it sparingly, lest you risk invoking a sensation of information overload in your apps!
Allow users to pick the page size…
Until recently the page size for long lists of grid data was predesignated by you, the developer. But with the latest build you can now let users specify the page size themselves. This is done by ticking the “Page Size Selection” box directly below the records per page, which will then allow users to override the default paging value at run time.
Accommodate extra long cell data…
When a column isn’t wide enough to show the entire content of a cell, what shows in the cell is automatically truncated with an ellipsis (…). Until now, to see the full value users would have to expand the column width (provided you’ve enabled column resizing on the grid). But as of the latest build, simply hovering their cursor over the cell will automatically reveal the full length of the truncated value in the form of a tool tip. If for any reason you don’t want this default functionality active on a particular grid, it can be disabled by checking on “Disable tooltips for overflowing cell content” at the bottom of the Grid’s UI tab.
Ensure a minimum column width…
Flex-sizing your grid columns makes accommodating different resolutions or browser sizes a snap, as columns are proportionally sized rather than hard-coded to specific pixel widths. But there are times when a proportionally shrunken column can become an annoyance, such as when the right edge of a date value is cut off with an ellipsis (…). So to ensure any column never shrinks below a certain width, you can now specify a minimum pixel width in the grid configuration. In the case of a date column, 80 pixels is generally a good minimum size for rendering eight digits with two separators.
Refine the global search function…
While convenient and easy to turn on, the global search field previously had two non-adjustable characteristics: (1) It was always positioned on the right edge of the grid header, and (2) an Enter key was automatically invoked to initiate the search process whenever a pause was detected after a few key strokes by the user. Now you can choose to align the search field to the left edge, and require the user to hit Enter to initiate the search using, respectively, the “Search Align Left” and “Search only on Enter” checkboxes.
Mass copy records to the clipboard…
The “Allow copy of row data” that previously permitted users to click on a cell to plug the contents into their computer’s clipboard has been augmented to be considerably more intuitive. The property is now entitled, more generically, “Allow copy of data”, as it can be configured to allow copying the grid (one page or the whole enchilada) into the computer’s clipboard, which can then be pasted directly into applications like Excel, preserving the column separation. When this feature is activated, a special clipboard icon now appears in the toolbar to indicate to the user that they can pull data from the grid.
Disable checkbox selections at runtime…
Previously the visibility of checkboxes was determined strictly at design time. Now it can be adjusted at run time through the use of a new property in the Hide Columns section of the grid’s link properties inside the app. Simply assign an app variable to the “nabCheckboxSel” property, then set the app variable to ‘true’ to hide the checkbox selection column from the user. Note that you may need to save the app after initially activating checkbox selections before the “nabCheckboxSel” will be shown. The same principle applies to hiding any left- or right-aligned icon columns, via “nabIconColLeft” and “nabIconColRight” respectively.
Require double clicks instead of single clicks…
You can now require users to double click on a grid row to trigger an action in Behaviors, rather than just a single click. This is controlled in the Settings of the grid widget when in the app view.
Specify front-end minimum values…
For edit grids, you can now specify minimum values for individual numeric columns in the front-end of the app, instead of having to write a program or script to enforce it. This is done by clicking on the cogwheel icon in the Edit tab properties.
Grids tend to receive the most attention in each new update we release. To see the latest grid enhancements and fixes for any Valence build — including the forthcoming build that has not yet been released — be sure to check out the Valence Forum.