Products

[admin]

Hi Mehran,
Only low, normal and high priorities are currently supported with the Kanban API. We will add a work item for adding new API for changing the priorities.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Maserati,
Gantt Checkboxes are currently built-in and there’s no option to remove them. This was requested by other users, too and is a priority item for out team.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Mehran,
We will revise the implementation for sub-columns drag and drop in a future version of the Kanban component. Thanks for the feedback.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[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/

[admin]

Hi Mehran,
Column reorder for sub columns is not supported.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[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/

[admin]

Hi Mehran,
Thank you for the suggestions. We will consider them. Ability to drag columns, set templates to tasks which also allow you to re-define dueDate, priority, etc. rendering is actually already available. The task priority is not fixed, too. It depends on the data source. The size and height of inputs, etc. is available in Material design and Bootstrap which are currently mostly used in modern web app development. With the help of SCSS and the available CSS variables API you can easily customize the UI appearance for your apps.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi John,
Follow up on this post. The reported behavior is resolved.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi,
In the next version, 2 new events will be present. The batchChange event occurs when ‘OK’ is pressed. batchCancel occurs when ‘Cancel’ is pressed.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Mehran,
Only tasks currently support custom templates. Example for task templates: https://www.htmlelements.com/demos/kanban/task-template/.
Column header templates are not yet implemented.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Mehran,
It is possible. Example: https://www.htmlelements.com/demos/kanban/adding-tasks-columns/. Programmatically, you can use addColumn and pass column data object.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[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/

[admin]

Hi davout,
1. From your Forum’s profile nickname, we are not aware whether you’re a customer or not.
2. This is a Community forum so by requesting help from other forum users or from our team requires at least some steps to reproduce an issue. Posting a topic which says: “this is not working” without adding details will most probably result in an unanswered topic.
3. Thanks for the further details. By double-checking the angular support for this component, it is not in the list of supported components in Angular Reactive Forms: https://www.htmlelements.com/docs/angular-reactive-forms/.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Oleg,
We tested this once again with different devices and were able to reproduce the reported behavior and added a work item. Thanks for the feedback.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi davout,
We cannot reproduce an issue with the provided details. If you share a stackblitz sample which shows your scenario and the behavior which you report, we will try it once again.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts