JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Gantt Programmatically adding elements to GanttChart

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #102118
    ggavrilut
    Member
    Up
    0
    Down

    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.

    #102119
    Hristofor
    Member
    Up
    0
    Down

    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

    #102158
    Maserati
    Member
    Up
    0
    Down

    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

    #102159
    admin
    Keymaster
    Up
    0
    Down

    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/

    #102160
    Maserati
    Member
    Up
    0
    Down

    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

    #102171
    admin
    Keymaster
    Up
    0
    Down

    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/

    #102173
    Maserati
    Member
    Up
    0
    Down

    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

    #102175
    admin
    Keymaster
    Up
    0
    Down

    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/

    #102178
    Maserati
    Member
    Up
    0
    Down

    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.
     

    #102183
    YavorDashev
    Member
    Up
    0
    Down

    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/

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.