[ANGULAR] Record using selectRow with scrollIntoView always shows up at the last in the view

[shashank.yadav]

Hi Team,

We are using below function to jump to a particular record.

Query1: Selected record always show-up at the last in the view, we want it to the top in that view.

let selectedRowOptions = {
                record: this.nodeDetails.GUID,
                scrollIntoView: true
            }
            this.gantt.selectRow(selectedRowOptions);

Query2: Also, it is possible to put a floating/disappearing CSS to highlight the selected record?

Thanks,
Shashank Yadav
Hatch Digital

[Animal]

Looks like our docs has a bug. When you followed the link to see what BryntumScrollOptions were, it did not lead to the info you seek.

Screenshot 2024-02-19 at 09.31.19.png (108.75 KiB) Viewed 307 times

This is a docs bug that let you down, and we'll fix it.

That is in fact an object and you can specify

myGridOrGantt.scrollRowIntoView(myGridOrGantt.store.getAt(500), { block : 'start', highlight : true });

[Animal]

The link does work from scrollRowIntoView. The options can be studies here: https://bryntum.com/products/grid/docs/#Core/helper/util/Scroller#typedef-BryntumScrollOptions

[Animal]

The link to the options info should work: https://github.com/bryntum/support/issues/8624

[Animal]

And it would be most convenient if you could pass these options in from your start point at selectRow: https://github.com/bryntum/support/issues/8631

[shashank.yadav]

Hi, I tried piece of code provided by you, but it didn't make any difference.
I will go through doc provided by you, meanwhile any other lead for me, please?

this.gantt.scrollRowIntoView(this.nodeDetails.GUID, { block : 'start', highlight : true });

Thanks

[Animal]

That is correct code. You just need to debug now.

[shashank.yadav]

Thank you, that worked for me.
Just need one quick assistance, do you know the class for changing the color of highlighted row CSS ?
Later that we can close this ticket.

Regards,
Shashank

[Animal]

Its done by this animation:

@keyframes b-fx-highlight-animation {
    0% {
        box-shadow : none;
    }
    50% {
        box-shadow : 0 0 10px 5px $row-highlight-box-shadow-color;
    }
    100% {
        box-shadow : none;
    }
}

Override that in your own CSS. We will have that colour as a CSS property that you can set when we refactor our CSS.

[shashank.yadav]

Thank you so much, it worked. We can close this ticket.

Regards,
Shashank Yadav