[ANGULAR] Sticky Row

[thomasb]

Hi

Just wondering, does that issue (https://github.com/bryntum/support/issues/4831) comes with the new v6.0.0-alpha3 version?

Thanks for the inf

[tasnim]

Hi,

Yes, We also have a demo for this here https://bryntum.com/products/scheduler-next/examples/backlog/
You can check the code by clicking on the code icon on the top right corner.

Docs https://bryntum.com/products/scheduler-next/docs/#Scheduler/feature/LockRows

Good Luck ,
Tasnim

[thomasb]

ah perfect, thanks!

[thomasb]

Clicking on the button to open the built-in code editor doesn't seem to work:
https://bryntum.com/products/scheduler-next/examples/backlog/

[tasnim]

Thanks for reporting. We'll fix it. Here is the ticket https://github.com/bryntum/support/issues/9071

And here is how the code looks like

JS

import { Scheduler } from '../../build/scheduler.module.js';
import shared from '../_shared/shared.module.js';

// Scheduler filters "backlog" resource to the top.
new Scheduler({
    appendTo    : 'container',
    startDate   : new Date(2023, 0, 29),
    endDate     : new Date(2023, 1, 12),
    viewPreset  : 'weekAndDayLetter',
    rowHeight   : 100,
    tickSize    : 75,
    crudManager : {
        autoLoad   : true,
        eventStore : {
            // Custom fields used on events in the demo
            fields : [
                'description',
                { name : 'percentDone', type : 'number', defaultValue : 0 }
            ]
        },
        resourceStore : {
            // Custom fields used on resources in the demo
            fields : [
                'city'
            ]
        },
        loadUrl : 'data/data.json'
    },

features : {
    group       : false,
    columnLines : false,
    eventDrag   : {
        constrainDragToTimeline : false
    },
    lockRows : {
        filterFn : r => r.id === 'backlog'
    },
    nonWorkingTime : true,
    stickyEvents   : false
},

columns : [
    { field : 'name', text : 'Name', width : 150 },
    { field : 'city', text : 'City', width : 150 }
],

eventRenderer({ eventRecord, resourceRecord, renderData }) {
    // Add a progress bar to the event bar
    renderData.children.push({
        className : 'progress',
        style     : {
            width : `${eventRecord.percentDone}%`
        },
        children : [
            {
                className : {
                    percent  : true,
                    hasValue : eventRecord.percentDone
                },
                text : `${eventRecord.percentDone}%`
            }
        ]
    });

    // "Unfinished" part of the par, for styling purposes
    renderData.children.push({
        className : 'remaining',
        style     : {
            width : `${100 - eventRecord.percentDone}%`
        }
    });

    // Events displayed in the top scheduler (backlog) are styled differently
    if (resourceRecord.id === 'backlog') {
        renderData.eventColor = 'gray';
        renderData.cls += 'backlog-event';
    }

    // Event contents
    return [
        { className : 'name', text : eventRecord.name },
        { className : 'desc', text : eventRecord.description }
    ];
}
});

[thomasb]

Thanks for posting the snippet, it's very helpful.

I made it work with adding in the template (I add it as it might not be obvious for newcomers):

[lockRowsFeature]="scheduler.features.lockRows"

The doc says the LockRows functionality doesn't work with the Split feature, it also doesn't seem to work when the scheduler(1) is added as a partner by another scheduler(2). It makes Scheduler 2 displayed on top of Scheduler 1.

[tasnim]

Hi,

I made it work with adding in the template (I add it as it might not be obvious for newcomers):

Thanks for sharing the code.

scheduler(1) is added as a partner by another scheduler(2). It makes Scheduler 2 displayed on top of Scheduler 1.

I'm not able to reproduce it. Seems to work fine

msedge_UgrO6mRy6x.png (99.54 KiB) Viewed 789 times

[thomasb]

Thanks Tasnim, I tried again and made it work by using another record prop.

If 'lockRowsFeature' is added only to the first scheduler it will move it in the DOM below the second one. This is however fixable by setting 'column-reverse' on the container element.
In my case I'll add the lockRowsFeature on both schedulers, so it works correctly out of the box.

[tasnim]

Hi,

So, is your problem solved?

[thomasb]

Hi, I still have one question:

I would like to change the locked rows by toggling CheckColumn.

lockRows : {
  filterFn : r => r.selected === true
},

Do you think it's possible? I'm not sure how to refresh the schedulers in order to lock the selected rows.

Thanks,