[ANGULAR] Gantt won't integrate with application

[Obould]

Pavel,

Sorry I haven't had the time to try out the steps.

To update you guys what I've done is, I took the zip file from Saki, and I still can't get the bryntum-angular-shared to work in our main project, so in the mean-time I just scrapped using that and just use the main bryntum gantt component. I still get the style errors, so I just added a "build" folder with the style in the solution so that way it will work(we will figure this out later, we just need to move on and actually evaluate the gantt itself). So I have attached a sample of our next hurdle we are experiencing.

I took the solution that Saki attached which was a simple project from our original version. I took out the bryntum-angular-shared stuff and just use the non-wrapper way to integrate Bryntum into our application. I then looked at the angular/advanced demo where it does not use a wrapper and I took most of the code and put it in this test app(and in our real application) and we don't see any tasks or anything. Keep in mind I can run the advanced sample on my own machine and it works great, but if I take the exact config, etc.. into this test app or into our real project it doesn't work. I am confused as if I take the exact same ganttconfig, toolbar, etc.. from the demo and it doesn't work.

This is one of the errors we see in the console, not sure if its related or what-not:

TypeError: Cannot read property 'querySelector' of null
    at _0x555a9f.getElementsByRecord (gantt.umd.js:10)
    at _0x555a9f.onStoreChanged (gantt.umd.js:10)
    at _0x555a9f.updateCurrentTimeLine (gantt.umd.js:10)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:26760)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:498)
    at ZoneTask.invoke (zone.js:487)
    at timer (zone.js:3070)
defaultErrorLogger @ core.js:7376
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:7424
next @ core.js:27270
schedulerFn @ core.js:24413
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:192
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:24397
(anonymous) @ core.js:26791
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:26728
onHandleError @ core.js:26791
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:198
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:3070

To run the sample, extract the zip file, you should see these files/folder in the folder you extracted it to:

3rdParty
BryntumTestApp
BryntumTestApp.sln

I opened the solution and then opened a command prompt window at the path:

BryntumTestApp\BryntumTestApp\ClientApp

Ran the commands:

npm i
npm start

Then ran the solution, and saw the error. This is how our main project is ran as well. We can't just run it without Visual Studio.

If there's a way we can setup a web meeting or something to go over this and figure out that will be great.

Thanks!

[pmiklashevich]

While I'm checking your "BryntumTestApp with advanced demo.zip" could you please let me know if you're able to run "angular-vs.zip" I attached yesterday? I integrated Bryntum Gantt into Visual Studio environment. Also I wonder why in your application you should run "npm i" and "npm start" individually? In the angular-vs example I just clicked run and the IDE did everything. What url you expect your application to run? localhost:4200? or maybe localhost:5001? or localhost:7200?

[pmiklashevich]

Ok, I've managed to reproduce the problem with our sources. 'bryntum-gantt' is reserved tag name by our GanttTag class. We will address: https://github.com/bryntum/support/issues/822

Meanwhile please:
- Rename 'bryntum-gantt' to something else, for example 'bryntum-gantt-panel':
ClientApp/src/app/gantt/gantt.component.html

<bryntum-gantt-panel></bryntum-gantt-panel>

ClientApp/src/app/shared/components/bryntum-gantt/bryntum-gantt.component.ts

@Component({
  selector: 'bryntum-gantt-panel',

- Give a height to the gantt, for example:
ClientApp/src/app/shared/components/bryntum-gantt/ganttConfig.ts

const ganttConfig = {
	height : 500,

- Import gantt.stockholm.css:
1. Basically what we usually recommend is to add import to main css file, for example:
ClientApp/src/styles.css

/*@import "bryntum-gantt/gantt.stockholm.css";*/

But in your case this will make https://localhost:7200/gantt work, but https://localhost:5001/gantt won't work. It will show error that https://localhost:5001/bryntum-gantt/gantt.stockholm.css cannot be found.
2. Maybe you'll find out a better solution, if so please share with us. But for now we only come up with this:
Import css from JS by importing ViewEncapsulation and setting styleUrls and encapsulation to the component:
ClientApp/src/app/shared/components/bryntum-gantt/bryntum-gantt.component.ts

import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core';

import ganttToolbar from './ganttToolbar';
import ganttConfig from './ganttConfig';
import { Gantt, Panel, ProjectModel, Toast, EffectResolutionResult } from 'bryntum-gantt/gantt.umd.js';

@Component({
  selector: 'bryntum-gantt-panel',
  template: '<div></div>',
  styleUrls: ['../../../../../node_modules/bryntum-gantt/gantt.stockholm.css'],
  encapsulation: ViewEncapsulation.None
})

As far as I understood you want to have 2 application split by hosts. First is the client side application, which is hosted on 7200. Second is the .NET application which is hosted on 5001. When you hit "RUN" button at the top left corner of VS it build ClientApp similar to when you run 'npm i' in ClientApp directly. But for some reason it doesn't start the app, so you have to manually call 'npm start' in ClientApp. Maybe it's configurable in VS.

Small hint: when you remove node_modules please also remove package-lock.json file. First I tried to build with your file, and I got npm error, that a module was not found. When I removed the file and node_modules and rebuilt there was no errors.

So final result is:

Снимок экрана 2020-05-22 в 14.10.55.png (649.46 KiB) Viewed 2089 times

Снимок экрана 2020-05-22 в 14.10.46.png (601.92 KiB) Viewed 2089 times

You'll just need to handle some styles, to make it look good in your application, but that is on you

Best regards,
Pavel

P.S. Investigating such cases having only trial bundle is not possible. I replaced trial bundle with our latest gantt.umd.js to be able to set a breakpoint and figure out why our code adds gantt.stockholm.css even if I specified gantt.stockholm.css in ClientApp/src/styles.css and it was loaded to the page.

Finally now you can start evaluating the Gantt! Sorry for the delay! We have managed to overcome this together!

P.S.2 I also removed the folder 'build' you created inside app

[Obould]

Hello again,

So I've tried the stuff you guys posted and it works great and integrates very well with our application.

I have a couple of questions and an updated sample of what were seeing and want some answers on.

First Question: When we integrate Bryntum Gantt into our real application, some of the graphics don't show, such as the arrows for expanding/collapsing arrows in the grid. Why does that happen? I am following the same paradigm as this sample

Here is a screenshot for reference:

graphics missing.png (17.71 KiB) Viewed 2049 times

Second Question: In the sample I provided, we add 3 tasks:

First Task:
"startDate": "2020-01-01"
"endDate": "2020-01-31"

Second Task:
"startDate": "2020-02-01"
"endDate": "2020-02-29"

Third Task:
"startDate": "2020-03-01"
"endDate": "2020-03-31"

I then add two baselines for each task that have the same start date and end date. Notice in the screenshot how the tasks are starting on 01/01/2020.

tasks start not by baseline.png (60.14 KiB) Viewed 2049 times

In the project config, I have tried setting:

this.project.manuallyScheduled = true;

And the gantt still puts the tasks at 01/01/2020.

I expect the tasks to be right above the baselines, I can't attach another screenshot or else I would.

Are we missing something? Essentially we don't want any scheduling to happen, we just want it to where we put the start/end date thats where the tasks will be.

Thank you!

[pmiklashevich]

Images are missing, please edit your post and upload pictures.

[Obould]

Edited the post, let me know if that works for you

[pmiklashevich]

Hello,

Yes, the images are available now. manuallyScheduled should be set on your tasks. Project doesn't have such configuration. By default tasks are scheduled as soon as possible. Alternative solution is to set constraintType and constraintDate.

  public data = [
    {
      "id": 1000,
      "name": "Project 1",
      "expanded": true,
      "children": [
        {
          "id": 11,
          "name": "Task 1",
          "manuallyScheduled": true,
          "startDate": "2020-01-01",
          "endDate": "2020-01-31",
          "baselines": [
            {
              "startDate": "2020-01-01",
              "endDate": "2020-01-31",
              "cls": "baseline1"
            },
            {
              "startDate": "2020-01-01",
              "endDate": "2020-01-31",
              "cls": "baseline2"
            }
          ]
        },
        {
          "id": 12,
          "name": "Task 2",
          "manuallyScheduled": true,
          "startDate": "2020-02-01",
          "endDate": "2020-02-29",
          "baselines": [
            {
              "startDate": "2020-02-01",
              "endDate": "2020-02-29",
              "cls": "baseline1"
            },
            {
              "startDate": "2020-02-01",
              "endDate": "2020-02-29",
              "cls": "baseline2"
            }
          ]
        },
        {
          "id": 13,
          "name": "Task 3",
          "manuallyScheduled": true,
          "startDate": "2020-03-01",
          "endDate": "2020-03-31",
          "baselines": [
            {
              "startDate": "2020-03-01",
              "endDate": "2020-03-31",
              "cls": "baseline1"
            },
            {
              "startDate": "2020-03-01",
              "endDate": "2020-03-31",
              "cls": "baseline2"
            }
          ]
        }
      ],
      "baselines": [
        {
          "startDate": "2020-01-01",
          "endDate": "2020-03-31",
          "cls": "baseline1"
        },
        {
          "startDate": "2020-01-01",
          "endDate": "2020-03-31",
          "cls": "baseline2"
        }
      ]
    }
  ];

  public data = [
    {
      "id": 1000,
      "name": "Project 1",
      "expanded": true,
      "children": [
        {
          "id": 11,
          "name": "Task 1",
          "constraintType": "muststarton",
          "constraintDate": "2020-01-01",
          "startDate": "2020-01-01",
          "endDate": "2020-01-31",
          "baselines": [
            {
              "startDate": "2020-01-01",
              "endDate": "2020-01-31",
              "cls": "baseline1"
            },
            {
              "startDate": "2020-01-01",
              "endDate": "2020-01-31",
              "cls": "baseline2"
            }
          ]
        },
        {
          "id": 12,
          "name": "Task 2",
          "constraintType": "muststarton",
          "constraintDate": "2020-02-01",
          "startDate": "2020-02-01",
          "endDate": "2020-02-29",
          "baselines": [
            {
              "startDate": "2020-02-01",
              "endDate": "2020-02-29",
              "cls": "baseline1"
            },
            {
              "startDate": "2020-02-01",
              "endDate": "2020-02-29",
              "cls": "baseline2"
            }
          ]
        },
        {
          "id": 13,
          "name": "Task 3",
          "constraintType": "muststarton",
          "constraintDate": "2020-03-01",
          "startDate": "2020-03-01",
          "endDate": "2020-03-31",
          "baselines": [
            {
              "startDate": "2020-03-01",
              "endDate": "2020-03-31",
              "cls": "baseline1"
            },
            {
              "startDate": "2020-03-01",
              "endDate": "2020-03-31",
              "cls": "baseline2"
            }
          ]
        }
      ],
      "baselines": [
        {
          "startDate": "2020-01-01",
          "endDate": "2020-03-31",
          "cls": "baseline1"
        },
        {
          "startDate": "2020-01-01",
          "endDate": "2020-03-31",
          "cls": "baseline2"
        }
      ]
    }
  ];

And I don't see any issues with collapse/expand icon. Please see screenshots:

Снимок экрана 2020-06-03 в 22.21.48.png (575.94 KiB) Viewed 2041 times

Снимок экрана 2020-06-03 в 22.22.01.png (568.13 KiB) Viewed 2041 times

Also it was a bit tricky to find why when I change a task in data.json file I don't see any changes on the screen. The I found out you specified data inline in gantt.component.ts.

Best regards,
Pavel

[Obould]

Pavel,

I will try out the manuallyScheduled set on the tasks.

The graphics are not shown when integrating Bryntum into our real application. The test app doesn't reflect this, but our real application is experiencing this. Any thoughts on why that will happen?

[pmiklashevich]

Please check DOM and styles of the element. We use font-awesome free icons. Compare styles in your real application to the styles in test application. Maybe you override some of the rules which are responsible for showing icons. Let us know of your findings, please! Cheers!