Our blazing fast Grid component built with pure JavaScript


Post by surebhava »

Hi team,

I have attached the screenshot. Is it possible to customize the columns layout as mentioned in screenshot.
Image
If possible how to achieve this?

Thanks

Attachments
column-change.png
column-change.png (9.92 KiB) Viewed 756 times

Post by mats »

Sure, a parent can have children columns as seen in https://bryntum.com/examples/grid/groupedheaders/


Post by surebhava »

Thanks.
But if I add this groupedheaders, why selectionmode column is getting affected.
https://bryntum.com/examples/grid/groupedheaders/ In this same example i have added selection mode.

1) Without groupedheaders, selectionmode checkbox column coming in the first place

import { Grid, DataGenerator, StringHelper } from '../../build/grid.module.js?460469';
import shared from '../_shared/shared.module.js?460469';

new Grid({

appendTo : 'container',
 
  selectionMode: {
        row: true,
        rowCheckboxSelection: true,
        multiSelect: true,
        showCheckAll: true,
        includeChildren: false,
    },
    columns : [
        { text : 'Customer#', field : 'id', width : 150, locked : true, editor : false },
        
{ text : 'First name', field : 'firstName', width : 150 }, { text : 'Surname', field : 'surName', width : 150 }, { text : 'City', field : 'city', width : 150 } ], data : DataGenerator.generateData(50) });
widthout-grouping.PNG
widthout-grouping.PNG (77.8 KiB) Viewed 749 times

2) With groupedheaders, selectionmode checkbox column place is changed

import { Grid, DataGenerator, StringHelper } from '../../build/grid.module.js?460469';
import shared from '../_shared/shared.module.js?460469';

new Grid({

appendTo : 'container',
 
  selectionMode: {
        row: true,
        rowCheckboxSelection: true,
        multiSelect: true,
        showCheckAll: true,
        includeChildren: false,
    },
    columns : [
        { text : 'Customer#', field : 'id', width : 150, locked : true, editor : false },
        {
            text     : 'Contact',
            children : [
                { text : 'First name', field : 'firstName', width : 150 },
                { text : 'Surname', field : 'surName', width : 150 },
                { text : 'City', field : 'city', width : 150 }
            ]
        },
       
], data : DataGenerator.generateData(50) });
with-grouping.PNG
with-grouping.PNG (75.7 KiB) Viewed 749 times

Post by marcio »

Hi surebhava,

This is actually a bug related to selectionMode with grouped headers, I created a ticket for it - https://github.com/bryntum/support/issues/4934

Best regards,
Márcio


Post by surebhava »

Can you provide any workaround.

When we can expect the release?


Post by mats »

In a week or two. You can put a dummy "field" on your grouped columns, that should do it.


Post by surebhava »

Thank you


Post Reply