We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Gantt Chart - Crud operations with Mongodb


Please how do perform crud operations on syncfusion gantt chart using Mongodb database and blazor server? 

Is there any other option other than using DataManager? Can I not grab the updated gantt data from the UI (Client side) and submit that to my database without sending it to your server?


1 Reply

DA Divya Ayyachamy Syncfusion Team March 25, 2023 05:25 AM UTC

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>


Please refer the below documentation link for more details.


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


Pooja K.

Live Chat Icon For mobile
Up arrow icon