Gantt chart is not loading from database ASP.NET

Gantt
#1

I am trying to create a simple example with DHTMLX Gantt on ASP.NET Blazor. I have managed to get it working until storing data in the database. Data get stored, but I am not able to load the chart on opening the page. Any ideas what might be the problem? I have gone through the documentation available, but I can’t find the root cause of this behavior.

This is how SQL Server looks like after triggering Save button on Gantt chart:

5	New task	21.5.2021 0.00.00	1	0,0000	0	NULL	0
6	Joiuwqeowqe	21.5.2021 0.00.00	6	0,0000	0	NULL	0
7	New task	21.5.2021 0.00.00	4	0,0000	0	NULL	0
8	New task	21.5.2021 0.00.00	1	0,0000	0	NULL	0
9	New task	21.5.2021 0.00.00	1	0,0000	0	NULL	0
10	New task	21.5.2021 0.00.00	1	0,0000	0	NULL	0
NULL	NULL	NULL	NULL	NULL	NULL	NULL	NULL

GanttLoader.js here Gantt js is loaded:

import 'https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js';

// ../gantt-master/codebase/dhtmlxgantt.js
// https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js

export function InitDHTML() {


  // specifying the date format
  gantt.config.date_format = "%Y-%m-%d %H:%i";
  // initializing gantt
  gantt.init("gantt_here");
  // initiating data loading
  gantt.load("/api/data");
  // initializing dataProcessor
  var dp = new gantt.dataProcessor("/api/");
  // and attaching it to gantt
  dp.init(gantt);
  // setting the REST mode for dataProcessor
  dp.setTransactionMode("REST");
}

Index.razor:

@page "/gantt"

<h3>Gantt</h3>

<div id="gantt_here" style="width: 100%; height: 100vh;"></div>

@inject IJSRuntime JS
@code{
  private IJSObjectReference importedDHTML;
  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    if (firstRender)
    {
      // import the script from the file
      importedDHTML = await JS.InvokeAsync<IJSObjectReference>(
          "import", "./GanttLoader.js");

      // Initialize dhtmlxgantt
      await importedDHTML.InvokeAsync<IJSObjectReference>(
          "InitDHTML");
    }
  }
}

While going to the webpage and loading chart I see the following errors:

2021-05-25_10-03-29
2021-05-25_10-03-291298×490 35.8 KB

Have been following their tutorial and can’t figure out what I have missed.

Here is full code if somebody is interested: Link

Nice chart by the way! Made me think about paid version.

#2

Hello,
Thank you for the positive feedback.
When I try to run your code in Visual Studio, it tells me that some packages are not installed. When I agree to download them, Visual Studio Installer never finishes its job, and it doesn’t print any errors. If I try to run the project after restarting Visual Studio, I get an error message that the file `WebApplication2.Server.exe is missing, and there is no such file in that folder.

As I see, the first message on the screenshot is a warning. It is related to AJAX. It may or may not be related to the second message.
You can try to connect the unminified file:
https://raw.githubusercontent.com/DHTMLX/gantt/master/codebase/sources/dhtmlxgantt.js
The issue occurs in the following condition:

        if (method == "GET" && !this.cache) {
          url += (url.indexOf("?") >= 0 ? "&" : "?") + "dhxr" + new Date().getTime() + "=1";
        }

You can try to replace it with the following one to see if it helps:

        if (method == "GET" && this && !this.cache) {
          url += (url.indexOf("?") >= 0 ? "&" : "?") + "dhxr" + new Date().getTime() + "=1";
        }

You can open the dev tools on the network tab and check if there is any response from the server.

The second message is an error that is related to the blazor.webassembly.js file that is not included in the source code.

If you tried the guides from our documentation, they are related to different frameworks, so there is no guarantee that it will work the same way for other frameworks:
https://docs.dhtmlx.com/gantt/desktop__howtostart_dotnet.html
https://docs.dhtmlx.com/gantt/desktop__howtostart_dotnet_core.html

1 Like
#3

Thank you master, this worked! Blazor is rather new one out there. ASP.NET instruction worked fine with slight edits tho.

For repo on GitHub. I have just tested it with latest Visual Studio. Opened repo and selected open with Visual Studio and added it as a new folder (new repo on my computer). It opens without issues.

Just as a notice, I think there is a typo in instructions, underscore “_”. You also don’t have it in your example repo on GItHub (code does not compile, should be just “return …”).

Snag_91b7a94
Snag_91b7a941720×1296 144 KB

P.S. You don’t need to answer to this question, as it is a little bit off-topic. Maybe I better to create separate one? Anyway if you have time at some point, what is the preferred way of building SQL structure in case I would have different projects and for each project there will be own Gantt chart?

#4

Hello,

Just as a notice, I think there is a typo in instructions, underscore “_”. You also don’t have it in your example repo on GItHub (code does not compile, should be just “return …”).

Thank you for letting us know about that issue. I added it to our internal bug tracker. We’ll fix that in the future.

P.S. You don’t need to answer to this question, as it is a little bit off-topic. Maybe I better to create separate one? Anyway if you have time at some point, what is the preferred way of building SQL structure in case I would have different projects and for each project there will be own Gantt chart?

It would be better to create a different topic for a different question.
Anyway, if you want to use the same database, you will need to create different tables. Then, depending on the project you load, you need to change the variable that will define which tables should be loaded.
Here is an example:

Unfortunately, I don’t have a ready demo.

1 Like