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.

Flexible

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.