@boikom
@boikom
Forum Replies Created
-
AuthorPosts
-
admin
KeymasterHi Trist B,
There is no openColumnDialog event in our DataGrid component. My colleague prepared an example which shows how to open a custom window when a column is clicked so basically you decide when you open and close that custom window and what action is will perform – add column or something else based on your web application needs.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/KeymasterHi,
That can be achieved by using templates for all columns. We do not have a row template in the Grid component.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/KeymasterHi aconley,
Thanks for the feedback. From the next version, these CSS errors will be resolved.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/KeymasterHi,
How can we reproduce that? We have multiple demos and stackblitz samples which work fine without such errors.
Regards,
PeterKeymasterHi aconley,
That is an issue in our code which needs to be fixed in order to use the column/row ‘autoSize’ feature. You can subscribe to our newsletter so when we release a new version, you will receive an email. We usually release a new version every 1.5-2 months.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/KeymasterHi Dark Beccio,
You can achieve that with the following code:window.onload = () => { const cardview = document.querySelector('smart-card-view'); const cards = cardview.querySelectorAll('smart-card'); for(let i = 0; i < cards.length; i++) { cards[i].onclick = () => { alert("click"); } }}In the above code we get all smart-card instances inside the card view and add click event handler to them.
Hope this helps.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/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/ -
AuthorPosts