@boikom
@boikom
Forum Replies Created
-
AuthorPosts
-
admin
KeymasterHi aconley,
This is an issue in our code which will be resolved in the next version. In previous versions the allowColumnAutoSizeOnDoubleClick was wrongly part of the ‘appearance’ settings and the resizing still checks for that.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/KeymasterHi Mehran,
Swimlanes are expected to be set by using the ‘swimlanes’ property.
Example:const kanban = document.querySelector("#kanban"); kanban.swimlanes = [ { label: 'Client "Energo"', dataField: 'client1' }, { label: 'Client "Sim-Prod Ltd."', dataField: 'client2', color: '#C90086' }, { label: 'Other clients', dataField: 'other', color: '#03C7C0' } ];
Full example:
/// <reference path="../../source/typescript/smart.elements.d.ts" />const data = [ { text: 'Research of energy business', userId: 3, status: 'done', swimlane: 'client1' }, { text: 'Create Gannt chart', userId: 2, status: 'inProgress', swimlane: 'client1' }, { text: 'Develop prototype', userId: 4, status: 'testing', swimlane: 'client1' }, { text: 'Data extrapolation', userId: 3, status: 'inProgress', swimlane: 'client1' }, { text: 'Prepare requirements', userId: 1, status: 'done', swimlane: 'client2' }, { text: 'Try out new simulation', userId: 1, status: 'testing', swimlane: 'client2' }, { text: 'Create blueprints for new product', userId: 1, status: 'toDo', swimlane: 'client2' }, { text: 'Calculate hours necessary for "EMV" project', userId: 2, status: 'toDo', swimlane: 'other' }, { text: 'Distribute final product', userId: 4, status: 'done', swimlane: 'other' }];window.Smart('#kanban', class { get properties() { return { collapsible: true, dataSource: data, editable: true, userList: true, users: [ { id: 0, name: 'Andrew', image: '../../images/people/andrew.png' }, { id: 1, name: 'Anne', image: '../../images/people/anne.png' }, { id: 2, name: 'Janet', image: '../../images/people/janet.png' }, { id: 3, name: 'John', image: '../../images/people/john.png' }, { id: 4, name: 'Laura', image: '../../images/people/laura.png' } ], columns: [ { label: 'To do', dataField: 'toDo' }, { label: 'In progress', dataField: 'inProgress' }, { label: 'Testing', dataField: 'testing' }, { label: 'Done', dataField: 'done' } ] }; }});window.onload = () => { const kanban = document.querySelector("#kanban"); kanban.swimlanes = [ { label: 'Client "Energo"', dataField: 'client1' }, { label: 'Client "Sim-Prod Ltd."', dataField: 'client2', color: '#C90086' }, { label: 'Other clients', dataField: 'other', color: '#03C7C0' } ]; }
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/KeymasterHi Mehran,
How did you try to set Kanban’s swimlanes in your code?
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/KeymasterHi 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/KeymasterHi 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/KeymasterHi 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/KeymasterHi 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/KeymasterHi Mehran,
Column reorder for sub columns is not supported.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/KeymasterHi 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/KeymasterHi 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/KeymasterHi John,
Follow up on this post. The reported behavior is resolved.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/KeymasterHi,
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/KeymasterHi 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/KeymasterHi 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/KeymasterHi 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/ -
AuthorPosts