Bryntum Support Forums

Hi,

Is there a way to show dependency lines between events only on event hover/drag? We don't want to show the dependency lines in the scheduler always. Only want to show if event is hovered or dragged in the scheduler.

Hi,
You can tune CSS for dependency lines and make them visible only on hover. Please see https://bryntum.com/products/gantt/docs/api/Gantt/feature/Dependencies#styling-dependency-lines

Hello,
you can set highlightDependenciesOnEventHover config to true

...
    features : {
        dependencies : {
            highlightDependenciesOnEventHover : true
        },
        ...
    }
...

and then, as Alex said, in your CSS

.b-sch-dependency {
	display: none;

&-over {
	display: block;
}
}

Let me re-phrase my question

How can I handle the on hover event for tasks in JS/CSS?

I tries using multiple selectors like

$("div.b-sch-event").hover(function() {
	console.log(this);
});

But this doesn't seem to work either.

I just want to show dependency lines related to the event only when event is hovered otherwise hide it. Hovering on event and not on dependency line.

I tried the above code as well but it didn't work. I am looking for a solution related to scheduler.

There is no JS events for hover. It's all handled with CSS. You can inspect in DOM inspector all styles and classes applied to the dependency line and to event itself to make sure that CSS we provided above is that you need to make:

• all dependencies invisible by default.
• dependency lines showed up when hover over an event bar.

Does it that you want to achieve, or I misunderstood you?

This was resolved with below code.

.b-sch-dependency
{
    display: none;
}

.b-sch-dependency-over
{
    display: block !important;
}

Also, had to set highlightDependenciesOnEventHover setting for dependencies to true.

dependencies:
        {
            highlightDependenciesOnEventHover: true,
        },

Hi,

Glad that you've found a solution.

Good Luck
Tasnim