Our state of the art Gantt chart


Post by sagars92 »

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?

Row-selection.png
Row-selection.png (18.9 KiB) Viewed 608 times

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.


Post by sagars92 »

Anyone can help


Post by sagars92 »

@Mats and @Bryntum team


Post by mats »

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 {
}

Post by cokguzel »

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;
    `;

Post by tasnim »

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

Post by cokguzel »

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


Post by tasnim »

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


Post Reply