Include JavaScript component into Blazor component

Question

I am just starting with Blazor, trying to set up some simple project to see how to interact with different parts and components. I have been trying to include dhtmlxGantt into Blazor index page. It seems to be working by replacing index.html content with example from dhtmlxGantt. However as a result I get only gantt chart without any other Blazor components. How to do it in a proper way so that as a result I would see gantt chart on first page index.razor?

index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>DHX.Gantt</title>
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="DHX.Gantt.styles.css" rel="stylesheet" />
  <link href="manifest.json" rel="manifest" />
  <link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function (event) {
      // 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");
    });
  </script>
  <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>

<body>
  <div id="app">Loading...</div>

  <div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
  </div>
  <script src="_framework/blazor.webassembly.js"></script>
  <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>

</html>

Index.razor

@page "/"
@inject IJSRuntime jsRuntime

<h1>Hello, world!</h1>

Welcome to your new app. OOOO 1123154

<SurveyPrompt Title="How is Blazor working for you? jjjj" />

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

@code{
}

Basically I need to get below part into Index.razor somehow, otherwise gantt chart on Index.razor could not find necessary resources:

  <script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function (event) {
      // 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");
    });
  </script>

DekuDesu · Accepted Answer · 2021-05-16 19:51:57Z

6

Consider injecting the javascript so that it runs immediately after Blazor starts on the page.

One way we may be able to accomplish this is by changing the way Blazor begins when the page is first loaded.

In wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server) we can modify the Blazor initializing to invoke a script after Blazor starts.

For Example (Blazor WebAssembly):

<body>
    <!-- The Rest of the wwwroot/index.html -->
    <script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
    <script src="_framework/blazor.{webassembly|server}.js" 
        autostart="false"></script>
    <script>
      Blazor.start().then(function () {
          // 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");
      });
    </script>
</body>

An alternative option could be, if you need to arbitrarily invoke this function dynamically(on different components for example). You could create a local .js javascript file in wwwroot/MyCustomScript.js and import https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js and create a method to initialize dhtmlxgantt that we can call from any component using IJSRuntime.

For example: wwwroot/MyCustomScript.js

import '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");
}

The we can call that method from any component using IJSRuntime.

For example: Pages/Index.razor

// inject the runtime so we can import javascript from local files
@inject IJSRuntime JS

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

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

edited May 16, 2021 at 19:51

answered May 16, 2021 at 19:28

DekuDesu

2,2921 gold badge7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

10101 Over a year ago

Don't know why, but first solutions does not work for some reason. Gantt is not appearing. However I think second option is anyway a cleaner way taking in consideration growing project?

DekuDesu Over a year ago

Oops! When i created the first one, the document.addEventListener("DOMContentLoaded" may not actually be firing since the DOM may be loaded. I've updated. But i would agree i would lean more towards the second option!

10101 Over a year ago

Thank you now I got it! I will continue experimenting with it.

Collectives™ on Stack Overflow

Include JavaScript component into Blazor component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related