bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
53 stars 6 forks source link

Lock rows feature display broken with grouping and filtering #9801

Closed ghulamghousdev closed 3 weeks ago

ghulamghousdev commented 1 month ago

Forum post

Go to lock-rows example and use this code:

import '../_shared/shared.js'; // not required, our example styling etc.

import StringHelper from '../../lib/Core/helper/StringHelper.js';
import '../../lib/Grid/column/RowNumberColumn.js';
import Scheduler from '../../lib/Scheduler/view/Scheduler.js';
import '../../lib/Scheduler/feature/LockRows.js';
import Group from '../../lib/Grid/feature/Group.js';

const resources = [
    {
        id         : 1,
        name       : 'Rob',
        type       : 'Sales',
        eventColor : 'orange',
        fixed      : true
    },
    {
        id         : 2,
        name       : 'Mike',
        type       : 'Sales',
        eventColor : 'orange',
        fixed      : true
    },
    {
        id         : 3,
        name       : 'Kate',
        type       : 'Sales',
        eventColor : 'blue',
        fixed      : true
    },
    {
        id         : 4,
        name       : 'Lisa',
        type       : 'Developer',
        eventColor : 'orange'
    },
    {
        id         : 5,
        name       : 'Dave',
        type       : 'Developer',
        eventColor : 'blue'
    }
];

const scheduler = new Scheduler({
    appendTo    : 'container',
    crudManager : {
        autoLoad      : true,
        resourceStore : {
            fields : [{ name : 'fixed', type : 'boolean' }]
        }
    },

    columns : [
        {
            text  : 'Name',
            field : 'name',
            width : 200
        },
        { type : 'check', text : 'Fixed', field : 'fixed', width : 200 }
    ],

    features : {
        regionResize : false,
        lockRows     : { field : 'fixed' },
        group        : {
            type  : `group`,
            field : `name`
        }
    },

    tbar : {
        items : {
            applyFilter : {
                type    : 'button',
                text    : 'apply filter',
                onClick : () => {
                    scheduler.resourceStore.filterBy((record) => record?.favorite);
                }
            },
            loadData : {
                type    : 'button',
                text    : 'load resources',
                onClick : () => {
                    scheduler.resourceStore.add(resources);
                }
            }
        }
    }
});
  1. click on load resources to load the data
  2. click on filter button to apply filters
  3. see that both lock rows and below contains all the records

https://github.com/user-attachments/assets/07e1b9a6-1d03-4d5c-8fb3-217b739ccaf6