JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Gantt › Programmatically adding elements to GanttChart
Tagged: angular gantt chart, chart, custom element, gantt, gantt chart, Ganttchart, GanttChart dynamically adding children to projects, react gantt chart, smart elements, smart framework, vue gantt chart, web component, web components
- This topic has 13 replies, 2 voices, and was last updated 2 years, 2 months ago by
jackanderson80@gmail.com.
-
AuthorPosts
-
August 6, 2021 at 11:11 am #102118
ggavrilut
MemberHello,
I’m trying to programmatically add elements to a gantt chart and I’m having an issue with adding tasks.
When selecting a gantt project, I cannot access the tasks property and add elements through there. I cannot add a task element and specify a parent.
I finally tried this code
this.$refs.ganttchart.insertTask(newPosition, this.createTaskEvent(item));
this.$refs.ganttchart.addTaskTo(newPosition, parentIndex);
but the result was the following (https://ibb.co/JHHmSjx) which seems to be a bug.
Could you point me in the right direction? Is there a way to refresh the dataSource directly? I finally removed the parent element and add it back, but I’m sure that is not the right way to do it.August 9, 2021 at 7:39 am #102119Hristofor
MemberHi ggavrilut,
Gantt Chart projects withtasks
attribute can only be initialized through thedataSource
property or via theinsertTask
method. Setting thetasks
attribute of a project dynamically (after initialization) will not affect the element. Here is an example on how to add a new Project with two child tasks to the end of the task list ( or at index 99 there are many items present) dynamically via theinsertTask
method:document.querySelector('smart-gantt-chart').insertTask(99, { label: 'New Parent Project', dateStart: '2020-02-17', dateEnd: '2020-05-04', tasks: [ { label: 'SubTask 1', dateStart: '2020-03-17', dateEnd: '2020-04-25' }, { label: 'SubTask 2', dateStart: '2020-04-17', dateEnd: '2020-06-25' } ] })
Another approach is to directly set a new project/task structure to the
dataSource
property with the changes that you want to make. In order to do so, first get the current dataSource by callingganttChart.dataSource
. This will return the current structure of the GanttChart tasks and projects. Then modify the dataSource by adding new tasks/projects and re-set it again as the new dataSource –ganttChart.dataSource = newDataSource
.
Regarding your approach:
There seems to be an issue with theaddTask
method by not removing the task before it is added to the new project. However that method will not be part of the API of the new upcoming GanttChart major update this month.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.comAugust 27, 2021 at 1:02 pm #102158Maserati
MemberV. 10.0.15
How do i add a sub task in a blazor example?
Your documentation and your example do not work, the InsertTask method won’t accept two arguments
thanks
JohnAugust 27, 2021 at 2:53 pm #102159admin
KeymasterHi John,
In Blazor, you can use this approach to add, update and insert Gantt tasks:@page "/ganttchart-methods"@using Smart.Blazor.Demos.Data<style> /* This is the CSS used in the demo */smart-gantt-chart { width: 60%; height: auto;} @@media (max-width: 700px) { smart-gantt-chart { width: 95%; margin-left:2%; } }</style><Example Name="GanttChart"> <p> <b>Description:</b> <b>Update</b> method updates the task with index 9 ( if there's one). <b>Insert</b> method insert's a Project Task with two sub-tasks at position 8. <b>Remove</b> method removes the first Task. </p> <GanttChart @ref="gantt" DataSource="Records" TaskColumns="taskColumns" TreeSize="treeSize" HideResourcePanel /> <div class="options"> <h3>Settings</h3> <div class="option"> <Button OnClick="OnUpdateClick" Disabled="@updateDisabled">Update</Button> </div> <div class="option"> <Button OnClick="OnInsertClick" Disabled="@insertDisabled">Insert</Button> </div> <div class="option"> <Button OnClick="OnRemoveClick" Disabled="@removeDisabled">Remove</Button> </div> </div></Example>@code { GanttChart gantt; bool insertDisabled = false; bool updateDisabled = false; bool removeDisabled = false; string treeSize = "45%"; List<GanttChartTaskColumn> taskColumns = new List<GanttChartTaskColumn> { new GanttChartTaskColumn() { Label = "Tasks", Value = "label", Size = "40%" }, new GanttChartTaskColumn() { Label = "Date Start", Value = "dateStart" }, new GanttChartTaskColumn() { Label = "Date End", Value = "dateEnd", Size = "30%" } }; public List<GanttDataRecord> Records; protected override void OnInitialized() { Records = new List<GanttDataRecord>() { new GanttDataRecord() { Label = "Project 1", DateStart = "2020-03-10T12:30:00", DateEnd = "2021-06-10T3:59:00", Expanded = true, Type = "project", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 1 }, { "type", 0 } } }, Tasks = new List<GanttDataRecord>() { new GanttDataRecord() { Label = "Task 1.1", DateStart = "2020-02-10", DateEnd = "2021-01-10", Type = "task", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 2 }, { "type", 1 } }, new Dictionary<string, int>() { { "target", 4 }, { "type", 1 } } } }, new GanttDataRecord() { Label = "Task 1.2", DateStart = "2020-10-10", DateEnd = "2021-02-31", Type = "task", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 3 }, { "type", 1 } } } }, new GanttDataRecord() { Label = "Project 1.1", DateStart = "2020-03-10T12:30:00", DateEnd = "2021-06-10T3:59:00", Expanded = true, Type = "project", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 1 }, { "type", 0 } } }, Tasks = new List<GanttDataRecord>() { new GanttDataRecord() { Label = "Task 1.1.1", DateStart = "2020-02-10", DateEnd = "2021-01-10", Type = "task", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 2 }, { "type", 1 } }, new Dictionary<string, int>() { { "target", 4 }, { "type", 1 } } } }, new GanttDataRecord() { Label = "Task 1.1.2", DateStart = "2020-10-10", DateEnd = "2021-02-31", Type = "task", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 3 }, { "type", 1 } } } } } } } }, new GanttDataRecord() { Label = "Task 2", DateStart = "2020-03-10T15:30:00", DateEnd = "2021-08-10", Type = "task" }, new GanttDataRecord() { Label = "Milestone 1", DateEnd = "2021-05-24", Type = "milestone", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 5 }, { "type", 1 } } } }, new GanttDataRecord() { Label = "Task 3", DateStart = "2021-02-05", DateEnd = "2021-07-08", Progress = 50, Type = "task" }, new GanttDataRecord() { Label = "Task 4", DateStart = "2020-03-10T15:30:00", DateEnd = "2021-08-10" } }; } private void OnInsertClick() { GanttDataRecord task = new GanttDataRecord() { Label = "Inserted Task 1", DateStart = "2020-08-10", DateEnd = "2020-12-23", Tasks = new List<GanttDataRecord>() { new GanttDataRecord() { Label = "Inserted Sub-Task 1.1", DateStart = "2020-09-01", DateEnd = "2020-10-30" }, new GanttDataRecord() { Label = "Inserted Sub-Task 1.2", DateStart = "2020-11-01", DateEnd = "2020-12-23" } } }; gantt.InsertTask(task); insertDisabled = true; } private void OnUpdateClick() { gantt.UpdateTask(0, new Dictionary<string, string>() { { "label", "Task Updated Successfully" }, { "dateEnd", "2021-1-1" } }); updateDisabled = true; } private void OnRemoveClick() { gantt.RemoveTask(0); insertDisabled = false; }}
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/August 27, 2021 at 3:57 pm #102160Maserati
MemberPeter,
I realise now that you can’t leave any of the GanttDataRecord properties as null. It works now.
But i still can’t figure out how to get the parent. How do i get the Project Object? InsertTask(TaskObj, ProjectObj,Index)
thanks
JohnAugust 31, 2021 at 5:22 am #102171admin
KeymasterHi John,
In order to insert a task into a project, the project should have an id. After that you can pass the id as a second parameter in the InsertTask method call. I have updated the sample with additional id for the project 1.1 and the task is inserted into it.@page "/ganttchart-methods"@using Smart.Blazor.Demos.Data<style> /* This is the CSS used in the demo */smart-gantt-chart { width: 60%; height: auto;} @@media (max-width: 700px) { smart-gantt-chart { width: 95%; margin-left:2%; } }</style><Example Name="GanttChart"> <p> <b>Description:</b> <b>Update</b> method updates the task with index 9 ( if there's one). <b>Insert</b> method insert's a Project Task with two sub-tasks at position 8. <b>Remove</b> method removes the first Task. </p> <GanttChart @ref="gantt" DataSource="Records" TaskColumns="taskColumns" TreeSize="treeSize" HideResourcePanel /> <div class="options"> <h3>Settings</h3> <div class="option"> <Button OnClick="OnUpdateClick" Disabled="@updateDisabled">Update</Button> </div> <div class="option"> <Button OnClick="OnInsertClick" Disabled="@insertDisabled">Insert</Button> </div> <div class="option"> <Button OnClick="OnRemoveClick" Disabled="@removeDisabled">Remove</Button> </div> </div></Example>@code { GanttChart gantt; bool insertDisabled = false; bool updateDisabled = false; bool removeDisabled = false; string treeSize = "45%"; List<GanttChartTaskColumn> taskColumns = new List<GanttChartTaskColumn> { new GanttChartTaskColumn() { Label = "Tasks", Value = "label", Size = "40%" }, new GanttChartTaskColumn() { Label = "Date Start", Value = "dateStart" }, new GanttChartTaskColumn() { Label = "Date End", Value = "dateEnd", Size = "30%" } }; public List<GanttDataRecord> Records; protected override void OnInitialized() { Records = new List<GanttDataRecord>() { new GanttDataRecord() { Label = "Project 1", DateStart = "2020-03-10T12:30:00", DateEnd = "2021-06-10T3:59:00", Expanded = true, Type = "project", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 1 }, { "type", 0 } } }, Tasks = new List<GanttDataRecord>() { new GanttDataRecord() { Label = "Task 1.1", DateStart = "2020-02-10", DateEnd = "2021-01-10", Type = "task", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 2 }, { "type", 1 } }, new Dictionary<string, int>() { { "target", 4 }, { "type", 1 } } } }, new GanttDataRecord() { Label = "Task 1.2", DateStart = "2020-10-10", DateEnd = "2021-02-31", Type = "task", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 3 }, { "type", 1 } } } }, new GanttDataRecord() { Label = "Project 1.1", DateStart = "2020-03-10T12:30:00", DateEnd = "2021-06-10T3:59:00", Expanded = true, Type = "project", Id="test", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 1 }, { "type", 0 } } }, Tasks = new List<GanttDataRecord>() { new GanttDataRecord() { Label = "Task 1.1.1", DateStart = "2020-02-10", DateEnd = "2021-01-10", Type = "task", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 2 }, { "type", 1 } }, new Dictionary<string, int>() { { "target", 4 }, { "type", 1 } } } }, new GanttDataRecord() { Label = "Task 1.1.2", DateStart = "2020-10-10", DateEnd = "2021-02-31", Type = "task", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 3 }, { "type", 1 } } } } } } } }, new GanttDataRecord() { Label = "Task 2", DateStart = "2020-03-10T15:30:00", DateEnd = "2021-08-10", Type = "task" }, new GanttDataRecord() { Label = "Milestone 1", DateEnd = "2021-05-24", Type = "milestone", Connections = new List<Dictionary<string, int>>() { new Dictionary<string, int>() { { "target", 5 }, { "type", 1 } } } }, new GanttDataRecord() { Label = "Task 3", DateStart = "2021-02-05", DateEnd = "2021-07-08", Progress = 50, Type = "task" }, new GanttDataRecord() { Label = "Task 4", DateStart = "2020-03-10T15:30:00", DateEnd = "2021-08-10" } }; } private void OnInsertClick() { GanttDataRecord task = new GanttDataRecord() { Label = "Inserted Task 1", DateStart = "2020-08-10", DateEnd = "2020-12-23", Tasks = new List<GanttDataRecord>() { new GanttDataRecord() { Label = "Inserted Sub-Task 1.1", DateStart = "2020-09-01", DateEnd = "2020-10-30" }, new GanttDataRecord() { Label = "Inserted Sub-Task 1.2", DateStart = "2020-11-01", DateEnd = "2020-12-23" } } }; gantt.InsertTask(task, "test", 0); insertDisabled = true; } private void OnUpdateClick() { gantt.UpdateTask(0, new Dictionary<string, string>() { { "label", "Task Updated Successfully" }, { "dateEnd", "2021-1-1" } }); updateDisabled = true; } private void OnRemoveClick() { gantt.RemoveTask(0); insertDisabled = false; }}
Hope this helps.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/August 31, 2021 at 8:38 am #102173Maserati
MemberPeter,
thanks that works.
I have to say its very confusing to have Id as a string especially as numeric values are used for other properties and the third parameter of the InsertTask method is numeric. It took me ages to figure this out. I appreciate your help but i have to say the documentation really could benefit from an update with more examples.
Thanks
JohnAugust 31, 2021 at 9:02 am #102175admin
KeymasterHi John,
We are currently building more samples for the Gannt in Blazor. Hope to see these online, soon.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/August 31, 2021 at 10:34 am #102178Maserati
MemberPeter,
I can’t remove an item. I am using the right id (the id i’ve used when i unsert a new task) but the RemoveTask(id) method does nothing.
I can check the id by catchingit from the OnItemClick event but the remove method still doesn’t do anything. I have tied just setting the remove id to 0 or 1 to see if can get anything to change but nothing happens.
Please advise.
September 1, 2021 at 1:56 pm #102183YavorDashev
MemberHi Maserati,
I have tried theRemoveTask
method and it works as intended, also as Peter shared a code example which also demonstrates this method.
Maybe if you share a bit more context/code example then we will be able to evaluate your issue and be able to assist you.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/June 24, 2022 at 8:17 am #103325valve1023@gmail.com
Participanthello.
insertTask function does not work.
Below is the sample code.Maybe jQuery is the problem?
How do I solve this?Sorry for being written by a translator.
Thank you.
$(document).ready(function () { const ganttchart = document.querySelector('smart-gantt-chart'); const result = ganttchart.insertTask({ label: "Project1", dateStart: '2021-01-01', dateEnd: '2021-06-31', type: "project" }); }); Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf') at BaseElement.insertTask (smart.elements.js:83:32164) at BaseElement.r (smart.elements.js:6:72232) at HTMLDocument.<anonymous> (001.aspx:152:39) at j (jquery-1.11.1.min.js:2:27244) at Object.fireWith [as resolveWith] (jquery-1.11.1.min.js:2:28057) at Function.ready (jquery-1.11.1.min.js:2:29891) at HTMLDocument.J (jquery-1.11.1.min.js:2:30257)
</div>
-
This reply was modified 2 years, 2 months ago by
valve1023@gmail.com.
June 24, 2022 at 8:52 am #103327jackanderson80@gmail.com
ParticipantHi,
Please, take a look at Smart Gantt Web Component | Gantt | Smart UI for Web Components (htmlelements.com). The example shows how to add, remove and update tasks in the latest version of the Gantt.
Best regards,
Jack
Smart UI Team
https://www.htmlelements.com/June 25, 2022 at 2:45 am #103328valve1023@gmail.com
ParticipantHello.
In general, the insertTask sample source works fine.
Currently, I am using jqWidgets and I want to use GanttChart of SMART UI in addition.
However, it seems that an unknown error occurs because of jQuery of jqWidgets.
There seems to be a problem when using jqWidgets and SMART UI together. Is there any way to solve this?
thank youJune 25, 2022 at 8:27 am #103329jackanderson80@gmail.com
ParticipantHi,
We will need a sample in codepen, jsfiddle or similar which shows the issue which you experience. We use jQWidgets and Smart UI in apps together. For example, the theme builder app uses both libraries.
Best regards,
Jack
Smart UI Team
https://www.htmlelements.com/ -
This reply was modified 2 years, 2 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.