To get column width same in multi columns

[janan]

Hi,
In the following example on multi instance grid, https://www.bryntum.com/examples/grid/multipleinstances/ ,
paste the following code in js.

import { DataGenerator, WidgetHelper } from '../../build/grid.module.js?444006';
import shared from '../_shared/shared.module.js?444006';

var widget = WidgetHelper.append([
    {
        type : 'grid',

    minHeight : '5em',

    cls : 'first',
features: {group: 'city'},

    columns : [
        { text : 'Name', field : 'name', flex : 1 },
        { text : 'City', field : 'city', flex : 1 },
        { text : 'Team', field : 'team', flex : 1 }
    ],

     data: [
    { name: 'Dan Stevenson', city: 'Los Angeles', team: 'Moscow Lions' },
    { name: 'Talisha Babin', city: 'Paris', team: 'Moscow Cats' },
    { name: 'Dan Stevenson', city: 'Los Angeles', team: 'Moscow Lions' },
    { name: 'Talisha Babin', city: 'Paris', team: 'Moscow Cats' },
{ name: 'Dan Stevenson', city: 'Los Angeles', team: 'Moscow Lions' },
        { name: 'Talisha Babin', city: 'Paris', team: 'Moscow Cats' },
    ]
    },
    {
        type : 'splitter'
    },
    {

    type : 'grid',

    minHeight : '5em',

    cls : 'second',
features: {group: 'city'},

    columns : [
        { text : 'Name', field : 'name', flex : 1 },
        { text : 'City', field : 'city', flex : 1 },
       { text : 'Team', field : 'team', flex : 1 }
    ],

    data : DataGenerator.generateData(75)
},
{
    type : 'splitter'
},
{
    type : 'grid',

    minHeight : '5em',

    cls : 'third',
features: {group: 'city'},

    columns : [
        { text : 'Name', field : 'name', flex : 1 },
        { text : 'City', field : 'city', flex : 1 },
        { text : 'Team', field : 'team', flex : 1 }
    ],

    data : DataGenerator.generateData(100)
}
], 'container');

setTimeout(function(){
  for (var i = 0; i < widget.length; i++) {

   if (widget[i].type === 'grid') {
      for (var j = 0; j < widget[i].columns.leaves.length; j++) {
        widget[i].columns.leaves[j].resizeToFitContent();
      }

}
  }
},0);

I want the columns in grid1, grid2 and grid3 to be same width adapting to the widest cell.
I guess this function is not present right now but I want help with accessing functions which return the widest cell in the 3 grids. Since we use our own renderers where each cell returns table and it is a bit complicated to for loop and find it out. Kindly let me know for more information!

[fabio.mazza]

janan,

What you are trying is have column width synchronised for all 3 grids?

Could you clarify exactly what you need to do?

Thank you!

[janan]

Yes. Exactly. The column width synchronised in all 3 grids but not having a fixed column width but adapting to the width of the widest cell.

[alex.l]

Hi janan,

There is no better way here than check all columns as you did, find max width and set it to all columns after you get it. We don't have a special method to find it.
Btw, if you need an assistance with development, you could use our Professional Services: https://www.bryntum.com/services/

All best,
Alex