Row merge if previousRecord.data and record.data is same

[janan]

Screenshot 2021-08-31 at 13.44.47.png (245.06 KiB) Viewed 1028 times

Screenshot 2021-08-31 at 13.40.14.png (314.02 KiB) Viewed 1028 times

I am trying to merge the rows which has same record.city (like in excel).
In the example https://www.bryntum.com/examples/grid/filtering/ I have made the following changes in the filterbar

features : {
        filterBar : true,
        stripe    : true,
        quickFind : true
 },

,
and in columns

{ text : 'City', field : 'city' ,ascending : true ,
renderer : function(ref) {
var value           = ref.value,
    record          = ref.record,
    data            = ref.record.data,
    rowElementCls   = ref.row.cls,
    cellElement     = ref.cellElement,
    prevRecord      = record.firstStore ? record.firstStore.getPrev(record,true ,true) : '',
    nextRecord      = record.firstStore ? record.firstStore.getNext(record,true ,true) : '';

console.log('1',record.city, nextRecord.city, prevRecord.city);

if (record.city!== prevRecord.city ) {
  cellElement.classList.add('cell-group-start');
} else if (nextRecord && (nextRecord.city=== record.city)) {
  cellElement.classList.add('cell-group');
  return '';
} else {
  cellElement.classList.add('cell-group-end');
  return '';
}

return record.city;
//return ref.record.city;
}
},

Sorting the city column. screenshot attached
While I search 'Paris' the record.city, nextRecord.city, prevRecord.city all become 'Paris' and city column is empty as in screenshot. Is there a better way to achieve this?

[johan.isaksson]

Hi,

I guess you dont get a .cell-group-start in that scenario, you could try "forcing" it by changing

if (record.city!== prevRecord.city ) {

to

if (record.city!== prevRecord.city || record === record.firstStore.first) {

To always make the first record a .cell-group-start

[janan]

Hi,

Tried the above solution, but when i group the 'city' it does not work. Is there a better way to do this?

[johan.isaksson]

Hi,

It works for me when I try it, I replaced the demo you used with the following minimal case:

const grid = new Grid({

appendTo : 'container',

features : {
    filterBar : true,
    sort      : 'city'
},

columns : [
    { text : 'Name', field : 'name', flex : 1 },
    {
        text  : 'City',
        field : 'city',
        renderer({ record, cellElement }) {
            const
                { firstStore } = record,
                prevRecord     = firstStore.getPrev(record, true, true),
                nextRecord     = firstStore.getNext(record, true, true);

            if (record.city !== prevRecord.city || record === firstStore.first) {
                cellElement.classList.add('cell-group-start');
            }
            else if (nextRecord && (nextRecord.city === record.city)) {
                cellElement.classList.add('cell-group');
                return '';
            }
            else {
                cellElement.classList.add('cell-group-end');
                return '';
            }

            return record.city;
        }
    }
],

data : DataGenerator.generateData(100)
});

Starts like this:

lh_bryntum-suite_Grid_examples_filtering_.png (79.62 KiB) Viewed 992 times

And if I filter:

lh_bryntum-suite_Grid_examples_filtering_ (1).png (51.18 KiB) Viewed 992 times

Or am I misunderstanding? If so then please clarify

[janan]

I grouped the 'city' column, please find attached screenshot.

[johan.isaksson]

I would not apply the rowspan logic when grouped, they both kind of defeat the purpose of the other. Try skipping it if firstStore.isGrouped and return the value for the cell as usual instead