Premium support for our pure JavaScript UI components


Post by 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


Post by 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
Screenshot 2024-02-19 at 09.31.19.png (108.75 KiB) Viewed 265 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 });

Post by 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


Post by Animal »

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


Post by 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


Post by 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


Post by Animal »

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


Post by 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


Post by 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.


Post by shashank.yadav »

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

Regards,
Shashank Yadav


Post Reply