[ANGULAR] Sticky Row

[tasnim]

Hi,

Yes, of course. Here are the steps you can follow to achieve it.

First of all define a custom field to your resourceStore for toggling lockRows with checkcolumn

        resourceStore : {
            // Custom fields used on resources in the demo
            fields : [
                { name : 'fixed', type : 'boolean', defaultValue : false }
            ]
        },

And now you can set that field to lockRows feature

        lockRows : {
            fieldName : 'fixed'
        }

And then you can add the column with that field

{ field : 'fixed', type : 'check', width : 100 }

And then you should be good to go.

msedge_qIHathiA26.gif (1.45 MiB) Viewed 1128 times

Here is the whole code I used

// 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',
                { name : 'fixed', type : 'boolean', defaultValue : false }
            ]
        },
        loadUrl : 'data/data.json'
    },

features : {
    group       : false,
    columnLines : false,
    eventDrag   : {
        constrainDragToTimeline : false
    },
    lockRows : {
        fieldName : 'fixed'
    },
    nonWorkingTime : true,
    stickyEvents   : false
},

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

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 }
    ];
}
});

Hope it helps.

Good Luck ,
Tasnim

[thomasb]

Hello Tasnim, thank you, i was able to make the lockRows work in coordination with the CheckColumn.

Maybe it comes from my project but using the LockRows seems to mess up the <bryntum-splitter></bryntum-splitter>, it is now located in the DOM above the two schedulers (which are now wrapped in divs used for the LockRows) and therefore dragging the schedulers up and down is not possible anymore.

Thanks again

[thomasb]

Also using LockRows seems to mess up the 'resourceInfo' column: the renderer doesn't seem to apply on the unlocked rows.
(this i see even when the scheduler has no partner)

[tasnim]

Hi thomasb,

Could you please share a runnable test case with us so we can reproduce this behavior locally and debug it? Could you please also share a picture demonstrating that issue so it's easier for us to better understand the problem?

[thomasb]

Hi Tasnim,

I prepared a small sample project based on the existing example 'drag-between-schedulers'.
I changed the lib the 6.0.0 version to enable LockRows:

    "@bryntum/schedulerpro": "6.0.0-alpha-3",
    "@bryntum/schedulerpro-angular": "6.0.0-alpha-3"

I added a '<bryntum-splitter></bryntum-splitter>' between the two schedulers in the template, also in the configs a lockrows feature and a 'check' column.

What i noticed:

• Having the [lockRowsFeature] set on the schedulers in the template breaks the splitter.
• I added a custom renderer on the resourceInfo columns, to show that they are not used on the unlocked columns.

I hope it helps,

[tasnim]

Hi,

I tried running your test case with npm i && npm start
But doesn't show anything in the page! Is there something I'm missing?

Screenshot 2024-05-01 165247.png (22.16 KiB) Viewed 1091 times

[thomasb]

I tried to run the project outside the examples folder to be sure, and it works.
You have to populate the '.npmrc' file first otherwise the install will fail.

@bryntum:registry=https://npm.bryntum.com
//npm.bryntum.com/:_authToken=YOURTOKEN
always-auth=true

[tasnim]

Thanks, Now I'm able to reproduce it. Looks like it's only reproducible with angular. We'll investigate it. Here is the ticket to track progress https://github.com/bryntum/support/issues/9090

Best regards,
Tasnim

[thomasb]

I made a small video (attached) to illustrate some issues in the columns:

• custom resourceInfo (set with 'renderer) are not shown for unlocked rows
• the first row becomes uncheckable after the lockrows have been used once

I hope it helps,
Best,

[tasnim]

Thanks for sharing this. I've added a comment to that ticket regarding this.

Best regards,
Tasnim