javascriptc#asp.netblazordhtmlx

JS Gantt chart is not loading from database


I am trying to create a simple example with DHTMLX Gantt. 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:

enter image description here

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


Solution

  • Let's continue discussing this question on the forum:

    https://forum.dhtmlx.com/t/gantt-chart-is-not-loading-from-database-asp-net/72605