fbpx

The new RowExpander feature

In the recent 5.1.0 release of Bryntum Grid, we introduced a cool new feature: the RowExpander. The RowExpander feature makes it possible to expand individual Grid rows to display more content. This is very useful for showing additional information that does not fit in a regular Grid cell. The feature can also be used in products based on the Grid, such as the Gantt and the Scheduler.

Live demo

Never trust a screenshot! Instead, here is a live demo of the feature.


Winter Olympics City







.b-rowexpander-row-expanded div.b-rowexpander-body {font-weight:300;}

Using the RowExpander feature

To use the RowExpander feature you simply configure it with a renderer in the Grid’s feature config.

new Grid({
  features: {
    rowExpander: {
      renderer({record, region}){
        return record.LongDescription;
      }
  }
});

By default, the RowExpander will add a column to the Grid which holds an expand/collapse button. This column can be configured or, if it is preferable, the row could expand and collapse on a trigger event like cellclick instead.


Summer Olympics City











.b-rowexpander-row-expanded div.b-rowexpander-body {font-weight:300;}

Example configuration:

new Grid({
  features: {
    rowExpander: {
      renderer({record, region}){
        return record.LongDescription;
      },
      column: null,
      triggerEvent: 'cellclick'
  }
});

The renderer can of course also be asynchronous by returning a Promise.

new Grid({
  features: {
    rowExpander: {
      async renderer({record, region}){
        return await fetchAndRenderExpander('https://bryntum.com/api/moreinfo');
      }
  }
});

For further information, please read the RowExpander docs. Or explore the new example.

If you have suggestions for future improvements, we would be very grateful if you could reply with a comment or post them in the forums.

Leave a Reply

avatar
  Subscribe  
Notify of