Not able to integrate Gantt with Shadow DOM. Live demo at https://codesandbox.io/s/pensive-payne-uuuqs?fontsize=14
I am facing below issue.
Could you please help me to resolve the issue?
Support Forum
Can you check https://codesandbox.io/s/pensive-payne-uuuqs?fontsize=14 ?
class MyGantt extends HTMLElement {
constructor() {
super();
this.attachShadow({
mode: "open"
});
this.shadowRoot.innerHTML = `
<style>
@import 'https://www.bryntum.com/examples/build/gantt.stockholm.css?433787';
.gantt_here {
height: 100vh;
width: 100%;
}
</style>
<div class="gantt_here"></div>
`;
}
connectedCallback() {
const project = new bryntum.gantt.ProjectModel({
startDate: "2017-01-01",
eventsData: [
{
id: 1,
name: "Write docs",
expanded: true,
children: [
{
id: 2,
name: "Proof-read docs",
startDate: "2017-01-02",
endDate: "2017-01-09"
},
{
id: 3,
name: "Release docs",
startDate: "2017-01-09",
endDate: "2017-01-10"
}
]
}
],
dependenciesData: [{ fromEvent: 2, toEvent: 3 }]
});
const gantt = new bryntum.gantt.Gantt({
project: project,
startDate: new Date(2017, 0, 1),
endDate: new Date(2017, 0, 10),
columns: [{ type: "name", field: "name", text: "Name" }],
appendTo: this.shadowRoot.querySelector(".gantt_here")
});
}
disConnectedCallback() {
console.log("Disconnected..");
}
}
customElements.define("my-gantt", MyGantt);
Reproduced, thank you for report.
I opened ticket here: https://app.assembla.com/spaces/bryntum/tickets/8841-trial-validation-code-fails-with-webcomponents/details
Workaround in your case is to include same theme to the page:
I opened ticket here: https://app.assembla.com/spaces/bryntum/tickets/8841-trial-validation-code-fails-with-webcomponents/details
Workaround in your case is to include same theme to the page:
<link rel="stylesheet" href="https://www.bryntum.com/examples/build/gantt.stockholm.css?433787" />
Shadow DOM issues:
1. Dependency line creation is not working
2. Not able to focus on progress bar using the keyboard
3. Right click on cell throwing target not defined exception
Live Demo: https://uuuqs.codesandbox.io/
1. Dependency line creation is not working
2. Not able to focus on progress bar using the keyboard
3. Right click on cell throwing target not defined exception
Live Demo: https://uuuqs.codesandbox.io/
Issues 1 and 3 should be resolved in next gantt release, which will happen in a matter of days.
Thank you for report.
Progress bar element is not focusable. Do you mean you cannot navigate between tasks using keyboard? I can reproduce it locally, ticket is here: https://app.assembla.com/spaces/bryntum/tickets/8879-task-navigation-with-keyboard-doesn--39-t-work-/detailsNot able to focus on progress bar using the keyboard
Thank you for report.