Checkbox column remains groupable even when specifically set to false

[taauntik]

Forum Post

Hi,

We are using a Grid that has both selection and grouping enabled. For our use case, we would like grouping to be disabled in the "checkbox" column. To disable grouping in this way, we have added the following code to our config:

selectionMode: {
  	checkbox: {
		groupable: false
        }
}

However, the grouping options still appear inside the checkbox column when right clicking the column header:

This can be replicated in the Grouping Demo using the following code:

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

const
    increaseRating = ({ record }) => {
        if (record.rating < 5) {
            record.rating++;
        }
    },
    decreaseRating = ({ record }) => {
        if (record.rating > 1) {
            record.rating--;
        }
    },
    grid           = new Grid({
        appendTo : 'container',

    fillLastColumn : true,

    features : {
        sort  : 'age',
        group : {
            field : 'food',
            // Renderer used when grouped by a column that does not define its own groupRenderer.
            // Applied to all cells, whereas a column specific renderer is only used for the first column.
            renderer({ column, groupColumn, groupRowFor, count, isFirstColumn, record }) {
                // groupColumn can be missing, so we cannot rely on it
                // Check group field in the group record
                if (record.meta.groupField === 'rating') {
                    // Use RatingColumn's renderer to render stars in its group header
                    if (column.type === 'rating') {
                        return column.renderer({ value : groupRowFor });
                    }
                    // Also customize the contents of the first columns group header
                    else if (isFirstColumn) {
                        return `${count} <span style="font-size: .7em; margin: 0 .5em">x</span> ${groupRowFor} star ratings`;
                    }
                }
            },

            listeners : {
                disable() {
                    groupByCombo.disabled = true;
                },
                enable() {
                    groupByCombo.disabled = false;
                }
            }
        }
    },
    selectionMode: {
       checkbox: {
         groupable: false
       }
    },

    columns : [
        { text : 'Name (not groupable)', field : 'name', flex : 1, groupable : false },
        {
            type          : 'number',
            text          : 'Age (custom)',
            field         : 'age',
            align         : 'right',
            width         : 120,
            min           : 1,
            groupRenderer : ({ groupRowFor, count }) => `Age ${groupRowFor} (${count})`
        },
        { text : 'City', field : 'city', flex : 1 },
        {
            text  : 'Food (custom)',
            field : 'food',
            flex  : 1,
            groupRenderer({ groupRowFor, groupRecords }) {
                const
                    max = groupRecords.reduce((max, r) => Math.max(r.age || 0, max), 0),
                    min = groupRecords.reduce((min, r) => Math.min(r.age || 0, min), max);

                return `${groupRowFor} liked by ages ${min} - ${max}`;
            }
        },
        { type : 'rating', text : 'Rating (feature)', field : 'rating', width : 100 },
        {
            text   : 'Jersey (custom)',
            field  : 'color',
            editor : {
                type        : 'combo',
                listItemTpl : ({ text }) => StringHelper.xss`<div class="combo-color-box ${text}"></div>${text}`,
                editable    : false,
                items       : [
                    'Black',
                    'Green',
                    'Orange',
                    'Pink',
                    'Purple',
                    'Red',
                    'Teal'
                ]
            },
            htmlEncode    : false,
            groupRenderer : ({ groupRowFor, count }) => `<div class="group-color-box ${groupRowFor}"></div> ${count} ${groupRowFor} jerseys`,
            renderer      : ({ value }) => StringHelper.xss`<div class="color-box ${value}">${value}</div>`
        },
        {
            type    : 'action',
            field   : 'rating',
            actions : [{
                cls     : 'b-fa b-fa-minus-circle',
                tooltip : 'Decrease rating',
                onClick : decreaseRating
            }, {
                cls     : 'b-fa b-fa-plus-circle',
                tooltip : 'Increase rating',
                onClick : increaseRating
            }, {
                cls          : 'b-fa b-fa-minus',
                showForGroup : true,
                tooltip      : 'Decrease rating for all group',
                onClick      : ({ record }) => {
                    record && record.groupChildren.forEach(record => decreaseRating({ record }));
                }
            }, {
                cls          : 'b-fa b-fa-plus',
                showForGroup : true,
                tooltip      : 'Increase rating for all group',
                onClick      : ({ record }) => {
                    record && record.groupChildren.forEach(record => increaseRating({ record }));
                }
            }]
        }
    ],

    store : {
        data : DataGenerator.generateData(50)
    },

    tbar : [
        {
            type        : 'combo',
            ref         : 'groupBy',
            label       : 'Group by',
            placeholder : 'No grouping',
            editable    : false,
            clearable   : true,
            inputWidth  : '7em',
            items       : [
                { value : 'age', text : 'Age' },
                { value : 'city', text : 'City' },
                { value : 'food', text : 'Food' },
                { value : 'rating', text : 'Rating' },
                { value : 'color', text : 'Color' }
            ],
            value : 'food',
            onSelect({ source : combo, record }) {
                if (combo.selecting) {
                    return;
                }

                if (record) {
                    // Change grouping but prevent change from triggering yet another group
                    combo.selecting = true;
                    grid.store.group(record.value);
                    combo.selecting = false;
                }
                else {
                    grid.store.clearGroupers();
                }
            }
        },
        {
            type     : 'button',
            ref      : 'expandAllButton',
            icon     : 'b-fa-angle-double-down',
            text     : 'Expand all',
            onAction : () => grid.expandAll()
        },
        {
            type     : 'button',
            ref      : 'collapseAllButton',
            icon     : 'b-fa-angle-double-up',
            text     : 'Collapse all',
            onAction : () => grid.collapseAll()
        }
    ]
}),
groupByCombo   = grid.widgetMap.groupBy;

// Adding store listener after grouping combo is created
grid.store.addListener({
    group({ groupers, isGrouped }) {
        groupByCombo.selecting = true;
        groupByCombo.value = isGrouped ? groupers[0].field : null;
        groupByCombo.selecting = false;
    }
});