Hi Stephen,
We have prepared a Blazor Gantt Chart sample and fetched data from MongoDB. We bound the data to the Gantt Chart through SfDataManager using UrlAdaptor as shown below.
<SfGantt TValue="TaskData"> <SfDataManager Url=http://localhost:5020/api/GanttURL BatchUrl=http://localhost:5020/api/GanttURL/BatchUpdate Adaptor="Adaptors.UrlAdaptor"></SfDataManager> </SfGantt> |
Please refer the below documentation link for more details.
https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor
We have also updated Gantt on CRUD operations like add, edit, and delete.
In the provided sample, we have created a database called GanttData and collections as TaskData. The following code snippet demonstrates how to fetch data and update the database on CRUD operations.
public class TaskDataAccessLayer : ITaskData { private MongoClient mongoClient = null; private IMongoDatabase mongoDatabase = null; private IMongoCollection<TaskData> ganttTable = null; public TaskDataAccessLayer() { mongoClient = new MongoClient("mongodb://localhost:27017/"); mongoDatabase = mongoClient.GetDatabase("GanttData"); ganttTable = mongoDatabase.GetCollection<TaskData>("TaskData"); } public async void AddRecord(TaskData data) { //... await ganttTable.InsertOneAsync(data); } public async void DeleteRecord(int taskId) { //... await ganttTable.DeleteOneAsync(x => x.taskID == taskId); } public async Task<List<TaskData>> GetAllRecords() { //... var records = ganttTable.Find(FilterDefinition<TaskData>.Empty).ToListAsync(); return await records; } public async void UpdateRecord(TaskData data) { //... await ganttTable.ReplaceOneAsync(x => x.taskID == data.taskID, data); } } |
Please find the complete example and sample JSON data used to render Gantt in the provided sample from the below link.
Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorMongoApp_(1)-299607299
Regards,
Pooja K.
