Bryntum Support Forums

Hello, Mats and Bryntum team,
How to change taskbar color on row selection and other styling and which method calling on row selection.
Also how change style on hover(renderData.style) or any other option?

Our component version: 4.2.1

Browser version, OS: Google Chrome: Version 92.0.4515.159 (Official Build) (64-bit)
Windows 10

Thanks in advance.

Anyone can help

@Mats and @Bryntum team

How to change taskbar color on row selection and other styling and which method calling on row selection.

Use this rule to style selected tasks.

.b-task-selected {
}

This event fires after selection changes: https://bryntum.com/docs/gantt/#Grid/view/mixin/GridSelection#event-selectionChange

Also how change style on hover(renderData.style) or any other option?

Please see https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

.b-gantt-task:hover {
}

mats wrote: ↑Mon Sep 27, 2021 9:11 am

Also how change style on hover(renderData.style) or any other option?

Please see https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

is there any opportunity to change hover style within eventRenderer() method in renderData.style? For my app hover color depends on data which I can access in eventRenderer () method and also I would like to keep all styles related to event bar in one place

my current piece of code and I need smth similar but for hover

    const mainColor = eventRecord.defectStatus === 2 ? '208, 68, 68' : '143, 209, 18';
    renderData.style = `
      border-radius: 3px;
      background-color: rgba(${mainColor},0.16);
      border-left: 8px solid rgba(${mainColor},1);
      color: #000000;
      font-size: 12px;
    `;

Hi,

You could achieve it by adding a cls to the taskRecord in taskRenderer

    taskRenderer({ taskRecord }) {
        if (taskRecord.isLeaf && !taskRecord.isMilestone) {
            taskRecord.cls.add('new-cls');
            return StringHelper.encodeHtml(taskRecord.name);
        }
    }

And this is the code of CSS

.b-gantt-task-hover .new-cls.b-gantt-task {
    background: red;
}

taskRecord.cls.add('new-cls');

adding class like this works only for events which are in the view at the moment of initialization. If I scroll scheduler (I'm working with scheduler and virtual scrolling) then this class isn't added to the events which I see after scrolling

Hi,

Sorry, I thought you are using Gantt.

So you could use renderData to add that cls

        eventRenderer(props) {
            props.renderData.cls.add('new-cls');
            return props.eventRecord.name;
        }

And here is the style

.b-sch-event-hover .b-sch-event.new-cls {
    background: red;
}

This should fix your problem