Support Forum
Hi There
When trying to add the Gantt (based on Gantt Advanced Demo) in our prototype which already contains the "Scheduler" then we are facing an issue, that does not enable us to have the Gantt fully operational.
Please have a look at the pictures herewith.
It seems that both modules (Scheduler & Gantt) are in conflict, and then when displaying the Gantt (after the Schedule) an error occurs "Duplicate Float Root".
Moreover, even if the Gantt is displayed (as per the picture) most of the function (ContextMenu + Dependencies + etc..) are not functioning as it should be.
What can we do to ensure that both module "scheduler.modules.js" and "gantt.module.js" can both work in the same application?
The same issue goes for the css file. Indeed, "scheduler.material.css" and "gantt.scheduler.css" can't cohabit together, since there refers to the same class. Thus, if some updates have been in one css file then there are overridden by the other css file.
So far, our app cannot work properly when both modules (Scheduler & Gantt) are present in the app.
Thank you for your help
When trying to add the Gantt (based on Gantt Advanced Demo) in our prototype which already contains the "Scheduler" then we are facing an issue, that does not enable us to have the Gantt fully operational.
Please have a look at the pictures herewith.
It seems that both modules (Scheduler & Gantt) are in conflict, and then when displaying the Gantt (after the Schedule) an error occurs "Duplicate Float Root".
Moreover, even if the Gantt is displayed (as per the picture) most of the function (ContextMenu + Dependencies + etc..) are not functioning as it should be.
What can we do to ensure that both module "scheduler.modules.js" and "gantt.module.js" can both work in the same application?
The same issue goes for the css file. Indeed, "scheduler.material.css" and "gantt.scheduler.css" can't cohabit together, since there refers to the same class. Thus, if some updates have been in one css file then there are overridden by the other css file.
So far, our app cannot work properly when both modules (Scheduler & Gantt) are present in the app.
Thank you for your help
- Attachments
-
- Capture d’écran 2019-05-18 à 11.55.46.png (120.54 KiB) Viewed 2475 times
-
- Capture d’écran 2019-05-18 à 11.48.14.png (117.22 KiB) Viewed 2475 times
-
- Capture d’écran 2019-05-18 à 11.51.14.png (394.51 KiB) Viewed 2475 times
Similar to grid & scheduler using both scheduler and gantt bundles is not supported by now. We have a ticket to solve it. For now please use gantt.module.js as the biggest bundle which contains some of scheduler classes. Please keep in mind that scheduler and gantt have separate license.What can we do to ensure that both module "scheduler.modules.js" and "gantt.module.js" can both work in the same application?
Pavlo Miklashevych
Sr. Frontend Developer
Hi Pavel
First, we have one license for each of the JS component (Scheduler & Gantt)
Secondly, we cannot reconsider all our current implementation, replacing "Scheduler.module.js" by "Gantt.module.js"; because we will have to re-run all our units test....
Moreover, the "Gantt.module.js" does not support "SchedulerContextMenu"; meaning there is not contextMenu on the GanttChart itself (only on Event and Header) whilst with Scheduler we have all contextMenu (Scheduler Chart + Scheduler Header TimeLine + Event).
Question: if we replace the module.js :
by
Will this work correctly? Then we can simply delete from or project "scheduler.module.js" plus all css file related?
First, we have one license for each of the JS component (Scheduler & Gantt)
Secondly, we cannot reconsider all our current implementation, replacing "Scheduler.module.js" by "Gantt.module.js"; because we will have to re-run all our units test....
Moreover, the "Gantt.module.js" does not support "SchedulerContextMenu"; meaning there is not contextMenu on the GanttChart itself (only on Event and Header) whilst with Scheduler we have all contextMenu (Scheduler Chart + Scheduler Header TimeLine + Event).
Question: if we replace the module.js :
import {Scheduler, Toast, DateHelper, Popup, ArrayHelper, WidgetHelper, StringHelper} from '../../scheduler.module.js';
by
import {Scheduler, Toast, DateHelper, Popup, ArrayHelper, WidgetHelper, StringHelper} from '../../gantt.module.js';
I can understand your concerns. Some scheduler classes are missing in gantt, so this approach will work until you need something specific to scheduler. So this approach we cannot consider to be right. We'll have an internal discussion and get back to you tomorrow with an update. Please stay tuned.
Pavlo Miklashevych
Sr. Frontend Developer
Hi Pavel
As per your response, it seems that replacing "Scheduler.module.js" by "Gantt.module.js" won't allow us to meet our expectation.
Then, we've got to wait until you feedback.
But please, you guys have to find a solution otherwise it will become a tremendous issue for us and our Migration Project.
Looking forward to reading you very soon
As per your response, it seems that replacing "Scheduler.module.js" by "Gantt.module.js" won't allow us to meet our expectation.
Then, we've got to wait until you feedback.
But please, you guys have to find a solution otherwise it will become a tremendous issue for us and our Migration Project.
Looking forward to reading you very soon
Hello,
We've discussed the issue and raised the priority. Hope to have it fixed in the next couple of releases.
Here is the ticket to track the issue: https://app.assembla.com/spaces/bryntum/tickets/7561
As a temporary workaround I can suggest you to use iframe for one of the products.
Will keep you updated.
Cheers,
Pavel
We've discussed the issue and raised the priority. Hope to have it fixed in the next couple of releases.
Here is the ticket to track the issue: https://app.assembla.com/spaces/bryntum/tickets/7561
As a temporary workaround I can suggest you to use iframe for one of the products.
Will keep you updated.
Cheers,
Pavel
Pavlo Miklashevych
Sr. Frontend Developer
Hi Pavel,
Thank you for your reactivity.
BUT I'm Sorry to tell you that the issue is still there.
As you can see the screenshot, the error message is sent to the console.
The Scheduler seems to respond correctly but did not run the full-scale test; since the Gantt does not work.
Indeed, the Gantt is loaded but most of the function (ContextMenu + Dependencies +, etc..) are not functioning as it should be.
Then, so far having both "Scheduler" and "Gantt" modules in the same application does not work at all.
The error message indicates clearly that there is a "Duplicate Float roots" element in the DOM.
As per our own investigation, both "Scheduler" and "Gantt" have the same Element Name "float-root" in the module.js and in the css file.
We definitely think that there is conflict and when trying to render this in the DOM the conflict occurs, since the element "float-roots" is already present.
We cannot afford to dig out so as to figure out what is the problem, but I can tell you that our Development is on stand-by; which is not good at all for our project delivery.
Maybe you should do the same correction (update) in the "Gantt.Module.js" as you've done in the nightly fix, with the "Scheduler.module.js".
Because if both are using the same Element Name, then why don't you simply test this in both "Scheduler" and "Gantt" that "float-root" element is not already used. That should be working NO !!
Thank you for your reactivity.
BUT I'm Sorry to tell you that the issue is still there.
As you can see the screenshot, the error message is sent to the console.
The Scheduler seems to respond correctly but did not run the full-scale test; since the Gantt does not work.
Indeed, the Gantt is loaded but most of the function (ContextMenu + Dependencies +, etc..) are not functioning as it should be.
Then, so far having both "Scheduler" and "Gantt" modules in the same application does not work at all.
The error message indicates clearly that there is a "Duplicate Float roots" element in the DOM.
As per our own investigation, both "Scheduler" and "Gantt" have the same Element Name "float-root" in the module.js and in the css file.
We definitely think that there is conflict and when trying to render this in the DOM the conflict occurs, since the element "float-roots" is already present.
We cannot afford to dig out so as to figure out what is the problem, but I can tell you that our Development is on stand-by; which is not good at all for our project delivery.
Maybe you should do the same correction (update) in the "Gantt.Module.js" as you've done in the nightly fix, with the "Scheduler.module.js".
Because if both are using the same Element Name, then why don't you simply test this in both "Scheduler" and "Gantt" that "float-root" element is not already used. That should be working NO !!
- Attachments
-
- Capture d’écran 2019-05-18 à 11.51.14.png (394.51 KiB) Viewed 2424 times
Hi Mats & Pavel
Thank you for your support.
Look we have found a solution, that works perfectly; meaning that both "Scheduler" & "Gantt" can cohabit together without any error sent.
Moreover, that solution we found out, enables "Gantt" functioning properly (ContextMEnu + Dependencies, etc..); that was impossible before our fix.
We would like to share our fix and we would appreciate your feedback concerning whether or not that fix is in compliance with your development rules & methodology.
Here is what we have made :
As the conflict between "Scheduler.module.js" and "Gantt.module.js" regarding the element called "float root" that is present in both module (Scheduler & Gantt) we simply ask yourself why not having a different element for each of the module (Scheduler & Gantt).
We, then, made a small update in "Scheduler.module.js". Our fix is based on the release 2.0.2, May 10th.
We simply renamed the DOM element ".bl-float-root" BY ".bl-float-root-SC"
Original Code :
Our fix - Updated Code
That's It
Of course, we have also updated the CSS file (but so far only one is used "marerial.css"); since in the css file there are 14 references to ".b-float-root". Then we also change ".b-float-root" BY ".b-float-root-SC"
And Voila...
Now our application that includes both "Scheduler" & "Gantt" works perfectly and there is no more error message sent to the console regarding "Duplicate float roots".
We're looking forward to reading you concerning whether or not that fix is in compliance with your development rules & methodology.
Thank you for your support.
Look we have found a solution, that works perfectly; meaning that both "Scheduler" & "Gantt" can cohabit together without any error sent.
Moreover, that solution we found out, enables "Gantt" functioning properly (ContextMEnu + Dependencies, etc..); that was impossible before our fix.
We would like to share our fix and we would appreciate your feedback concerning whether or not that fix is in compliance with your development rules & methodology.
Here is what we have made :
As the conflict between "Scheduler.module.js" and "Gantt.module.js" regarding the element called "float root" that is present in both module (Scheduler & Gantt) we simply ask yourself why not having a different element for each of the module (Scheduler & Gantt).
We, then, made a small update in "Scheduler.module.js". Our fix is based on the release 2.0.2, May 10th.
We simply renamed the DOM element ".bl-float-root" BY ".bl-float-root-SC"
Original Code :
static get floatRoot() {
if (!this._floatRoot) {
if (document.querySelector('.b-float-root')) {
if (window.parent.Siesta) {
...
this._floatRoot = document.querySelector('.b-float-root');
return this._floatRoot;
}
else {
throw new Error('Duplicate float roots');
}
}
this._floatRoot = DomHelper.createElement({
className : 'b-float-root',
parent : document.body
});
}
return this._floatRoot;
}
Our fix - Updated Code
static get floatRoot() {
if (!this._floatRoot) {
if (document.querySelector('.b-float-root-SC')) {
if (window.parent.Siesta) {
....
this._floatRoot = document.querySelector('.b-float-root-SC');
return this._floatRoot;
}
else {
throw new Error('Duplicate float roots');
}
}
this._floatRoot = DomHelper.createElement({
className : 'b-float-root-SC',
parent : document.body
});
}
return this._floatRoot;
}
Of course, we have also updated the CSS file (but so far only one is used "marerial.css"); since in the css file there are 14 references to ".b-float-root". Then we also change ".b-float-root" BY ".b-float-root-SC"
And Voila...
Now our application that includes both "Scheduler" & "Gantt" works perfectly and there is no more error message sent to the console regarding "Duplicate float roots".
We're looking forward to reading you concerning whether or not that fix is in compliance with your development rules & methodology.