Premium support for our pure JavaScript UI components


Post by sameer1710 »

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.


Post by alex.l »

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

All the best,
Alex


Post by fabio.mazza »

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

Best regards,
Fabio


Post by sameer1710 »

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.


Post by alex.l »

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?

All the best,
Alex


Post by sameer1710 »

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

Post by tasnim »

Hi,

Glad that you've found a solution.

Good Luck :)
Tasnim


Post Reply