Programmatically adding elements to GanttChart

[ggavrilut]

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.

[Hristofor]

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

[Maserati]

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

[admin]

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/

[Maserati]

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

[admin]

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/

[Maserati]

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

[admin]

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/

[Maserati]

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.
 

[YavorDashev]

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/

[valve1023@gmail.com]

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 2 years, 5 months ago by valve1023@gmail.com.

[jackanderson80@gmail.com]

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/

[valve1023@gmail.com]

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

[jackanderson80@gmail.com]

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