Products

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

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

[admin]

We publish the information about new releases here: https://www.htmlelements.com/docs/release-notes/, https://www.htmlelements.com/blog/, https://www.facebook.com/jqwidgets and https://twitter.com/jqwidgets.

[admin]

Hi dijar.kadriu,
It definitely will be in a future version of the DataGrid component.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Joko Pitoyo,
The source code for the Admin Templates is available for licensed users. In order to get it, you need to login our client portal and download the Smart UI source code package. The src folder for the Admin Templates is called ‘templates’.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi dijar.kadriu,
The Blazor Grid currently does not support nested grids.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi dijar.kadriu,
We will have such event in the next version of the Datagrid component which is planned for the next week.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

Hi Riyaz Quresh,
That blazor demo is available online only for the moment. We will consider adding it to the download package, too.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[admin]

It works, many thanks!

[admin]

Hi Peter,
Sorry for the late reply. It works, thanks for your help!
One last question 🙂
We want the tab position to be on the left or right and we need the option of automatic height (https://www.htmlelements.com/demos/tabs/auto-height/).
But when we use the right tab position and the auto height styles the transition doesn’t work properly. The tab to be slides in is not animated and the tab that slides away is visible in the background.
can you help ?
many Thanks!

[admin]

Example with Scrollbar that changes DIV tag using Smart.Blazor 9.4.15
Here is a sample built with Smart.Blazor 9.4.15

@page "/"
<Example Name="ScrollBar">
	<ScrollBar @ref="scrollbar" OnChange="ChangeHandler"></ScrollBar>
    <div style="@scrollStyle">
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
        Some text content here Some text content here Some text content here Some text content here
    </div>
</Example>
@code {
    ScrollBar scrollbar;
    string scrollStyle = "overflow: auto; width: 100px; height:100px;";
    private void ChangeHandler(Event args) {
        ScrollBarChangeEventDetail detail = args["Detail"] as ScrollBarChangeEventDetail;
        scrollStyle = "overflow: auto; width: " + detail.Value + "px; height: " + detail.Value + "px;";
    
        Console.WriteLine(detail.OldValue + "/" + detail.Value);
    }
}

Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts