Our state of the art Gantt chart


Post by SIM-LTD »

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
Attachments
Capture d’écran 2019-05-18 à 11.55.46.png
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
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
Capture d’écran 2019-05-18 à 11.51.14.png (394.51 KiB) Viewed 2475 times

Post by pmiklashevich »

What can we do to ensure that both module "scheduler.modules.js" and "gantt.module.js" can both work in the same application?
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.

Pavlo Miklashevych
Sr. Frontend Developer


Post by SIM-LTD »

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.... :oops:
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';
Will this work correctly? Then we can simply delete from or project "scheduler.module.js" plus all css file related?

Post by pmiklashevich »

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


Post by SIM-LTD »

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

Post by pmiklashevich »

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

Pavlo Miklashevych
Sr. Frontend Developer


Post by pmiklashevich »

Hello,

The issue is fixed in our nightlies! Let me know please if it works for you now.

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by SIM-LTD »

Hi Pavel,

Thank you for your reactivity.

BUT I'm Sorry to tell you that the issue is still there. :( :o
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 !! :D
Attachments
Capture d’écran 2019-05-18 à 11.51.14.png
Capture d’écran 2019-05-18 à 11.51.14.png (394.51 KiB) Viewed 2424 times

Post by mats »

Nightly builds seem to have failed, we're working on getting them back so please have look tomorrow again (you'll need both Gantt + Scheduler nightly builds)

Post by SIM-LTD »

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

That's It :D

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... :D :D
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.

Post Reply