Our blazing fast Grid component built with pure JavaScript


Post by h.singh3..shell.com »

Hi,
I have a functionality where I have to implement reorder with the 1st column cells will be merged (common values),
But while reordering with the merge, Merge is not happening in the cells., The Values are coming in all the rows.


Post by marcio »

Hey h.singh3..shell.com,

Could you provide a minimal test case with your configuration and the behavior that you mentioned? That would help a lot to understand what's going on on your side and assist you with that.

Please check the guidelines here https://www.bryntum.com/forum/viewtopic.php?f=1&t=772

Also, we have a merge demo available here https://bryntum.com/products/grid/examples/merge-cells/

Best regards,
Márcio


Post by h.singh3..shell.com »

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

const icons = {
    'Fish n chips' : 'b-fa-fish',
    'Mac n cheese' : 'b-fa-cheese',
    Pancake        : 'b-fa-cookie',
    Burger         : 'b-fa-hamburger',
    Waffles        : 'b-fa-stroopwafel',
    Carbonara      : 'b-fa-bacon',
    Salad          : 'b-fa-carrot',
    Bolognese      : 'b-fa-blender'
};

const grid = new Grid({
    appendTo : 'container',

features : {
//Reorder the Row
rowReorder: {
      showGrip: true
      },

    // Turn on cell merging
    mergeCells : {
        // This is the default, included here to show that it exists
        passthrough : true
    },
    // FilterBar in stealth mode
    filterBar : {
        compactMode : true
    }
},

store : {
    sorters : [
        { field : 'city' },
        { field : 'food' }
    ]
},

columns : [
    // This column merges by default
    { text : 'City', field : 'city', flex : 1, mergeCells : true },
    // This column does not allow toggling merge in the header menu
    { text : 'Chef (no merge)', field : 'name', flex : 1, mergeable : false },
    {
        text  : 'Cooks',
        field : 'food',
        flex  : 1,
        renderer({ value }) {
            return [
                { tag : 'i', className : `b-fa ${icons[value] || 'b-fa-candy-cane'}` },
                value
            ];
        }
    },
    { type : 'rating', text : 'Rating', field : 'rating' }
],

data : DataGenerator.generateData(50),

tbar : [
    {
        text        : 'Merge cells',
        icon        : 'b-fa-square',
        pressedIcon : 'b-fa-check-square',
        toggleable  : true,
        pressed     : true,
        onToggle({ pressed }) {
            grid.features.mergeCells.disabled = !pressed;
        }
    }, {
        text        : 'Passthrough',
        icon        : 'b-fa-square',
        pressedIcon : 'b-fa-check-square',
        toggleable  : true,
        pressed     : true,
        tooltip     : 'Allow pointer events to pass through or not',
        onToggle({ pressed }) {
            grid.features.mergeCells.passthrough = pressed;
        }
    }
]
});

Please Reorder from this code and see the merge is not happening.


Post by tasnim »

Hi,

Merge cells require sorting by the column to merge cells in it. Using row reorder means it is no longer sorted. This is the intended behavior from our side.

But we have an FR to support for unsorted column
Here it is https://github.com/bryntum/support/issues/5012

Good Luck :),
Tasnim


Post Reply