Collapsible Columns Not Opening

[taauntik]

Forum post

chrome_8845LpcMnT.mp4

I think a good example would be the collapsible-columns example in the documentation. I modified it locally to re-create what I am experiencing in our project. I just manually added more collapsible columns to move it off screen to the right. I also removed the locked property in the first two columns because our project isn't using locked columns.

When I scroll to the right and try to open a column, it just snaps back to the beginning and doesn't open the column. It works, though, when I leave the columns locked. I'll paste the code I have below:

Reproducible here locally : http://lh/bryntum-suite/grid/examples/collapsible-columns/
Replace the demo code with the code below

import '../_shared/shared.js'; // not required, our example styling etc.
import Grid from '../../lib/Grid/view/Grid.js';
import '../../lib/Grid/feature/RegionResize.js';
import '../../lib/Grid/feature/CellTooltip.js';
import '../../lib/Grid/column/RatingColumn.js';
import '../../lib/Grid/column/DateColumn.js';
import '../../lib/Grid/column/TemplateColumn.js';
import PercentColumn from '../../lib/Grid/column/PercentColumn.js';
import ColumnStore from '../../lib/Grid/data/ColumnStore.js';
import DataGenerator from '../../lib/Core/helper/util/DataGenerator.js';

const tooltipRenderer = ({ record, event }) => {
    const
        { field  } = event.target.closest('.b-percent-bar-outer').dataset,
        column     = grid.columns.get(field),
        value      = Math.round(record[field]);

return `<i class="b-fa b-fa-chart-line" style="margin-right:1em"></i>${column.text}: <strong>${value} μg/m3</strong>`;
};

// Define a custom bar column, that renders contents differently when parent column is collapsed
class BarColumn extends PercentColumn {
    static get type() {
        return 'bar';
    }

static get defaults() {
    return {
        editor         : false,
        headerRenderer : ({ column }) => `${column.text} <small>(μg/m3)</small>`,
        width          : 170,
        tooltipRenderer
    };
}

calculatePercentage(record) {
    const measurement = record.originalData[this.field];

    return 100 * measurement / this.max;
}

renderer({ record }) {
    const columns = this.nextSibling?.hidden ? this.parent.children : [this];

    // Generate DOM element config objects either for this column only (when parent is expanded) or for all
    // metrics if parent is expanded (and this is first child)
    return columns.map(column => {
        const barConfig   = super.defaultRenderer({ record, value : column.calculatePercentage(record) });

        // set a field attribute on the outer bar element for styling
        barConfig.dataset = {
            field : column.field
        };

        return barConfig;
    });
}
}

ColumnStore.registerColumnType(BarColumn, true);

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

features : {
    columnPicker : true,
    regionResize : true,
    cellTooltip  : {
        forSelector : '.b-percent-bar-outer'
    }
},

columns : [
    { text : 'City', field : 'city', width : 170, editor : false },
    { type : 'rating', text : 'Overall Air Quality', field : 'rating', width : 170, editor : false },
    {
        id          : 'airquality',
        text        : 'Air Quality Metrics',
        collapsible : true,
        collapsed: true,
        sealed      : true,
        children : [
            {
                type  : 'bar',
                text  : 'PM 2.5',
                field : 'pm25',
                max   : 80
            },
            {
                type  : 'bar',
                text  : 'PM 10',
                field : 'pm10',
                max   : 80
            },
            {
                type  : 'bar',
                text  : 'NO2',
                field : 'no2',
                max   : 200
            },
            {
                type  : 'bar',
                text  : 'Ozone',
                field : 'ozone',
                max   : 100
            }
        ]
    },
    {
        type     : 'template',
        text     : 'Weather',
        width    : 100,
        align    : 'center',
        cellCls  : 'weather',
        field    : 'weather',
        template : ({ value }) => `<span>${value}</span>`
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        text        : 'Meta',
        collapsible : true,
        collapsed: true,
        children    : [
            { type : 'date', text : 'Date measured', field : 'start', width : 120, editor : false },
            { type : 'column', text : 'Verified by', field : 'name', width : 150 },
            { type : 'check', text : 'Certified', field : 'done' }
        ]
    },
    {
        type     : 'date',
        text     : 'Next measure date',
        flex     : 1,
        minWidth : 150,
        field    : 'finish'
    }
],

// Generate some dummy data and calculate the bar widths for air quality metrics
data : DataGenerator.generateData({
    count       : 50,
    rowCallback : () => ({
        pm25  : 25 + (0.5 * 80 * (Math.random() - 0.5)),
        pm10  : 30 + (0.5 * 80 * (Math.random() - 0.5)),
        no2   : 120 + (0.5 * 200 * (Math.random() - 0.5)),
        ozone : 60 + (0.5 * 100 * (Math.random() - 0.5)),

        weather : ['🌨', '🌤', '⛅️', '🌩', '☁️', '🌤'][Math.round(Math.random() * 5)]
    })
})
});