Issue with Blazor Gantt Baselines

[dpcode]

I’m evaluating the Smart Gantt chart for an upcoming project which will require a Blazor gantt component. One of our requirements is that it must be able to display baseline dates to help evaluate project performance.

When adding Baseline dates to the chart I’m encountering a rendering issue. I’ve double checked the documentation and I believe I’ve implemented it correctly. I saw another post from earlier in the year for a similar bug in Angular. Wondering if this is a bug in the Blazor implementation or if there’s something that I’m missing.

Exception:
Uncaught TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property 'tasks' -> object with constructor 'Array'
| index 0 -> object with constructor 'Object'
| property '$' -> object with constructor 'Object'
--- property 'project' closes the circle
at JSON.stringify ()
at BaseElement._setTimelineTaskBaseline (smart.elements.js:83:214560)
at BaseElement._recycleTimelineTasks (smart.elements.js:83:81834)
at BaseElement._handleInfiniteTimeline (smart.elements.js:83:245852)
at BaseElement._horizontalScrollbarHandler (smart.elements.js:83:244897)
at window..ready.e.$.horizontalScrollBar.onChange (smart.elements.js:6:102726)
at BaseElement._updateValue (smart.elements.js:89:8174)
at BaseElement._dragHandler (smart.elements.js:89:3478)
at HTMLDocument.d (smart.elements.js:6:62215)
at f.dispatch (smart.elements.js:6:26757)

[Markov]

Hi dpcode,

Thank you for writing! How did you try to use this feature? What is your gantt setup?

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[dpcode]

Hi Markov,

I’m deserializing a static json file using the below data structure, the gantt chart renders until it gets to a task that has planned dates and then it generates an exception. I’m using Smart.Blazor 20.0.4 and .NET 8

JSON:

[
{
"id": "66",
"label": "(Project-XXXXXX Customer) Description",
"dateStart": "2025-04-01",
"dateEnd": "2026-04-22",
"type": "task",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [
{
"id": "67",
"label": "Project Milestones",
"dateStart": "2025-04-01",
"dateEnd": "2026-02-26",
"type": "task",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [
{
"id": "68",
"label": "Customer Invoice/Payment Milestones",
"dateStart": "2025-04-01",
"dateEnd": "2025-04-01",
"type": "task",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [
{
"id": "69",
"label": "Purchase Order Receipt",
"dateStart": "2025-04-01",
"dateEnd": "2025-04-01",
"type": "milestone",
"progress": 0
"synchronized": true,
"expanded": true,
"tasks": [],
"connections": []
}
],
"connections": []
}
],
"connections": []
},
{
"id": "98",
"label": "(Phase-PRJ)Project",
"dateStart": "2025-04-01",
"dateEnd": "2026-02-26",
"type": "task",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [
{
"id": "99",
"label": "(Phase-DES) Design",
"dateStart": "2025-04-01",
"dateEnd": "2025-05-02",
"type": "task",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [
{
"id": "100",
"label": "Design Kick-off",
"dateStart": "2025-04-01",
"dateEnd": "2025-04-01",
"type": "milestone",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [],
"connections": []
},
{
"id": "102",
"label": "(Phase-MD) Mechanical Design",
"dateStart": "2025-04-09",
"dateEnd": "2025-04-29",
"planned": {
"dateStart": "2025-04-09",
"dateEnd": "2025-04-29"
},
"type": "task",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [
{
"id": "103",
"label": "Station XXXX",
"dateStart": "2025-04-09",
"dateEnd": "2025-04-22",
"type": "task",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [],
"connections": [
{
"target": 12,
"type": 0,
"lag": 14
}
]
},
{
"id": "104",
"label": "Station XXXY",
"dateStart": "2025-04-09",
"dateEnd": "2025-04-22",
"type": "task",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [],
"connections": [
{
"target": 13,
"type": 0,
"lag": 14
}
]
},
{
"id": "105",
"label": "Station XXXZ",
"dateStart": "2025-04-09",
"dateEnd": "2025-04-29",
"type": "task",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [],
"connections": [
{
"target": 14,
"type": 0,
"lag": 14
}
]
}
],
"connections": []
},
{
"id": "106",
"label": "(Phase-ED) Electrical Design",
"dateStart": "2025-04-23",
"dateEnd": "2026-05-02",
"type": "task",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [
{
"id": "107",
"label": "Station XXXX ED",
"dateStart": "2025-04-23",
"dateEnd": "2025-04-29",
"type": "task",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [],
"connections": []
},
{
"id": "108",
"label": "Station XXXY ED",
"dateStart": "2025-04-23",
"dateEnd": "2025-04-29",
"type": "task",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [],
"connections": []
},
{
"id": "109",
"label": "Station XXXZ ED",
"dateStart": "2025-04-23",
"dateEnd": "2025-05-02",
"type": "task",
"progress": 0,
"synchronized": true,
"expanded": true,
"tasks": [],
"connections": []
}
],
"connections": []
}
],
"connections": []
}
],
"connections": []
}
],
"connections": []
}
]

Data Structure:

public partial class GanttDataRecord
{
[JsonPropertyName("id")]
public string Id { get; set; }

[JsonPropertyName("label")]
public string Label { get; set; }

[JsonPropertyName("dateStart")]
public string DateStart { get; set; }

[JsonPropertyName("dateEnd")]
public string DateEnd { get; set; }

[JsonPropertyName("class")]
public string Class { get; set; }

[JsonPropertyName("type")]
public string Type { get; set; }

[JsonPropertyName("progress")]
public int Progress { get; set; }

[JsonPropertyName("duration")]
public int Duration { get; set; }

[JsonPropertyName("synchronized")]
public bool Synchronized { get; set; }

[JsonPropertyName("expanded")]
public bool Expanded { get; set; }

[JsonPropertyName("tasks")]
public List Tasks { get; set; }

[JsonPropertyName("disableResources")]
public bool DisableResources { get; set; }

[JsonPropertyName("planned")]
public object Planned { get; set; } = new object[] { };

[JsonPropertyName("deadline")]
public object Deadline { get; set; } = new object[] { };

[JsonPropertyName("indicators")]
public object Indicators { get; set; } = new object[] { };

[JsonPropertyName("segments")]
public object Segments { get; set; } = new object[] { };

[JsonPropertyName("resources")]
public object Resources { get; set; } = new object[] { };

[JsonPropertyName("connections")]
public List<Dictionary<string, int>> Connections { get; set; } = new List<Dictionary<string, int>>() { };

[JsonPropertyName("disableDrag")]
public bool DisableDrag { get; set; }

[JsonPropertyName("disableResize")]
public bool DisableResize { get; set; }

[JsonPropertyName("minDateStart")]
public string MinDateStart { get; set; }

[JsonPropertyName("maxDateStart")]
public string MaxDateStart { get; set; }

[JsonPropertyName("minDateEnd")]
public string MinDateEnd { get; set; }

[JsonPropertyName("maxDateEnd")]
public string MaxDateEnd { get; set; }

[JsonPropertyName("minDuration")]
public int MinDuration { get; set; }

[JsonPropertyName("maxDuration")]
public int MaxDuration { get; set; }

[JsonPropertyName("value")]
public int Value { get; set; }

[JsonPropertyName("dragProject")]
public bool DragProject { get; set; }
}

• This reply was modified 1 week, 5 days ago by dpcode. Reason: Add version

[Markov]

Hi dpcode,

Thank you for the feedback! We will address this issue as soon as possible.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[dpcode]

Thanks Markov,

Please keep me posted, I’m not certain when we need to demo possible solutions to management but I’d like to include this tool because I think it would be a good, competitive option if we can get it to work for our purposes.

Dave

[Author]

Posts