Info Bubbles in the Grid
December 12, 2015
It has been over a year since 1.4 release and I've heard from many people who are anxious to get new version. Though, it is still in development
(getting really close), I decided to write a couple of articles about new features that are coming out. One of such features is
info bubbles in the grid.
Super Easy to Define
This is a frequently needed feature and the goal was to make it super easy to use while still being very flexible. So, while defining columns
for the grid, all you need to do is to set info flag to true. Consider the following code:
Super easy, ha!? When icon is clicked, it will show all the fields that are in the grid for that record (including hidden ones) in an bubble.
So, then, you can hide some of the less important fields to conserve space.
Showing all fields in the bubble is only a single use case. As I developer, I want to have a full control of how I build the info
bubble. I want to do the the following:
- Define a custom icon
- Specify what fields I want to display
- Specify field groups
- Specify custom (computable) fields
- Define a custom render function
All of these actions are easy to do just setting up various info properties. Below it the list of all properties that are available.
To define field groups (3), set a field in fields array as "--" and it will become a divider.
Computable fields (4) and custom render functions (5) are done int the following way:
I hope it will saves a bit of your development time. Any suggestions and comments, see section below.