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 1 year, 10 months ago by jackanderson80@gmail.com.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts

August 6, 2021 at 11:11 am #102118

ggavrilut

Member

Hello,
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 #102119

Hristofor

Member

Hi ggavrilut,
Gantt Chart projects with tasks attribute can only be initialized through the dataSource property or via the insertTask method. Setting the tasks 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 the insertTask 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 calling ganttChart.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 the addTask 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.com

August 27, 2021 at 1:02 pm #102158

Maserati

Member

V. 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
John

August 27, 2021 at 2:53 pm #102159

admin

Keymaster

Hi 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 #102160

Maserati

Member

Peter,
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
John

August 31, 2021 at 5:22 am #102171

admin

Keymaster

Hi 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 #102173

Maserati

Member

Peter,
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
John

August 31, 2021 at 9:02 am #102175

admin

Keymaster

Hi 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 #102178

Maserati

Member

Peter,
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 #102183

YavorDashev

Member

Hi Maserati,
I have tried the RemoveTask 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 #103325

valve1023@gmail.com

Participant

hello.
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 1 year, 10 months ago by valve1023@gmail.com.

June 24, 2022 at 8:52 am #103327

jackanderson80@gmail.com

Participant

Hi,

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 #103328

valve1023@gmail.com

Participant

Hello.

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 you

June 25, 2022 at 8:27 am #103329

jackanderson80@gmail.com

Participant

Hi,

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/

Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.