I am just starting with Blazor, trying to set up some simple project to see how to interact with different parts and ponents. 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 ponents. 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=".css" rel="stylesheet" type="text/css" />
<script src=".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">