Kanban Customization

Question

HelloI read the documents of the site. Thank you for answering the following questions about the Kanban component.1-In each column, when I change the order of the cards, it is not applied. I want the order to be preserved based on the user's changes.The second thing is, based on which event, should I notice the order change in the columns and save the information in the database? Until next time, I will show the order of the user based on the latest changes.2-I used the CardDoubleClick Event to display my dialog. After double clicking, syncfusion dialog will be displayed. How can I prevent the default dialog from showing?3-How can I change the background color of each column?4-How can I change the background color of the card?5-How can I reduce the distance between the cards in the column?6-How can I change the Kanban component font?7-How to define context menu for cards?

Vinitha Jeyakumar · Answer

Hi Sarah,Query 1. "In each column, when I change the order of the cards, it is not applied. I want the order to be preserved based on the user's changes"We are quit unclear about your reported issue. So can you please share us with the more details about the issue for our better understanding.Query 2. "The second thing is, based on which event, should I notice the order change in the columns and save the information in the database?"Using ActionComplete event arguments, you can get the changed records while drag and drop between the columns in the Kanban.Code snippet: ..... ........ @code { public void ActionComplete(Syncfusion.Blazor.Kanban.ActionEventArgs args){ }}Query 3. "I used the CardDoubleClick Event to display my dialog. After double clicking, syncfusion dialog will be displayed. How can I prevent the default dialog from showing?"You can achieve your requirement by using the DialogOpen event argument Cancel. Please check the code below,Code snippet: @code { public void DialogOpen(Syncfusion.Blazor.Kanban.DialogOpenEventArgs args){args.Cancel = true; }}Query 4. "How can I change the background color of each column"You can achieve your requirement by customizing the CSS styles like below,Code snippet:Query 5. "How can I change the background color of the card?"Your requirement to add unique background colors to the Kanban cards can be achieved by using the Card template, in which we can pass the required color to the card by getting it through datasource as like below,Code snippet: public class TasksModel { public string Id { get; set; } public string Title { get; set; } public string Status { get; set; } public string Summary { get; set; } public string Type { get; set; } public string Priority { get; set; } public string Assignee { get; set; } public string Color { get; set; } } public List Tasks = new List() { new TasksModel { Id = "Task 1", Color = "red", Title = "BLAZ-29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer.", Assignee = "Nancy Davloio", Type = "Story", Priority = "Low" }, new TasksModel { Id = "Task 2",Color = "blue", Title = "BLAZ-29002", Status = "InProgress", Summary = "Improve application performance", Assignee = "Andrew Fuller", Type = "Improvement", Priority = "Normal" }, new TasksModel { Id = "Task 3",Color = "red", Title = "BLAZ-29003", Status = "Open", Summary = "Arrange a web meeting with the customer to get new requirements.", Assignee = "Janet Leverling", Type = "Others", Priority = "Critical" }, new TasksModel { Id = "Task 4",Color = "blue", Title = "BLAZ-29004", Status = "InProgress", Summary = "Fix the issues reported in the IE browser.", Assignee = "Janet Leverling", Type = "Bug", Priority = "Release Breaker" }, new TasksModel { Id = "Task 5",Color = "red", Title = "BLAZ-29005", Status = "Review", Summary = "Fix the issues reported by the customer.", Assignee = "Steven walker", Type = "Bug", Priority = "Low" }, new TasksModel { Id = "Task 6",Color = "blue", Title = "BLAZ-29006", Status = "Review", Summary = "Fix the issues reported in Safari browser.", Assignee = "Nancy Davloio", Type = "Others", Priority = "Low" }, new TasksModel { Id = "Task 7", Color = "red",Title = "BLAZ-29007", Status = "Close", Summary = "Test the application in the IE browser.", Assignee = "Margaret hamilt", Type = "Improvement", Priority = "Low" }, new TasksModel { Id = "Task 8",Color = "blue", Title = "BLAZ-29008", Status = "Validate", Summary = "Validate the issues reported by the customer.", Assignee = "Steven walker", Type = "Story", Priority = "Release Breaker" }, new TasksModel { Id = "Task 9", Color = "red",Title = "BLAZ-29009", Status = "Open", Summary = "Show the retrieved data from the server in grid control.", Assignee = "Margaret hamilt", Type = "Bug", Priority = "Release Breaker" },}Query 6. "How can I reduce the distance between the cards in the column"You can achieve your requirement by customizing the CSS styles like below,Code snippet:Query 7. "How can I change the Kanban component font?"Code snippet:Sample: https://blazorplayground.syncfusion.com/VjhqWCCpfIKhCgkEQuery 8. "How to define context menu for cards?"You can customize the default card layout using template as per your application needs. This can be achieved by template of the KanbanCardSettings property.Documentation : https://blazor.syncfusion.com/documentation/kanban/cards#templateRegards,Vinitha

Sarah · Answer

Hi

Vinitha Jeyakumar,Thank you for your replyQuery 1. "In each column, when I change the order of the cards, it is not applied. I want the order to be preserved based on the user's changes"We are quit unclear about your reported issue. So can you please share us with the more details about the issue for our better understanding.

Vinitha Jeyakumar · Answer

Hi Sarah,We have considered the reported issue "Couldn't drag and drop the cards within the same column in Kanban" as a bug from our end and the fix for the issue will be included with our upcoming patch release scheduled for the first week of December 2023.Now you can track the status of the reported issue through the feedback below,https://www.syncfusion.com/feedback/48758/couldnt-drag-and-drop-the-cards-within-the-same-column-in-kanbanDisclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”Regards,Vinitha

Vinitha Jeyakumar · Answer

Hi Sarah,We are facing some complexities in fixing the reported issue. We will include the fix with our upcoming Vol 4 2023 release which is expected to be rolled out on the mid of December 2023.Regards,Vinitha

Sarah · Answer

Hi,Thank you for your follow up .I used DragStop and ActionComplete events to determine which Kanban Card was dragged from which column to which column, but unfortunately I didn't get the result. Is it possible to help me? I use version 23.1.36.

Vinitha Jeyakumar · Answer

Hi Sarah,On further validating the query "Couldn't drag and drop the cards within the same column in Kanban" , we found that in Blazor Platform sortSetting property default is DataSourceOrder. So add the Index property with Field Like below code snippet for Same column drag and drop. For Reference Link : https://blazor.syncfusion.com/documentation/kanban/sort#index @code { public class TasksModel { public string Id { get; set; } public string Title { get; set; } public string Status { get; set; } public string Summary { get; set; } public string Assignee { get; set; } public int Id1 { get; set; } } public List Tasks = new List(){ new TasksModel { Id = "Task 7",Id1 = 7, Title = "BLAZ-29007", Status = "Close", Summary = "Test the application in the IE browser.", Assignee = "Margaret hamilt" }, new TasksModel { Id = "Task 8",Id1 = 8, Title = "BLAZ-29008", Status = "Validate", Summary = "Validate the issues reported by the customer.", Assignee = "Steven walker" }, new TasksModel { Id = "Task 9",Id1 = 9, Title = "BLAZ-29009", Status = "Open", Summary = "Show the retrieved data from the server in grid control.", Assignee = "Margaret hamilt" }, new TasksModel { Id = "Task 10",Id1 = 10, Title = "BLAZ-29010", Status = "InProgress", Summary = "Fix cannot open user’s default database SQL error.", Assignee = "Janet Leverling" }, new TasksModel { Id = "Task 11",Id1 = 11, Title = "BLAZ-29007", Status = "Close", Summary = "Test the application in the IE browser.", Assignee = "Margaret hamilt" }, new TasksModel { Id = "Task 12",Id1 = 12, Title = "BLAZ-29008", Status = "Validate", Summary = "Validate the issues reported by the customer.", Assignee = "Steven walker" }, new TasksModel { Id = "Task 13",Id1 = 13, Title = "BLAZ-29009", Status = "Open", Summary = "Show the retrieved data from the server in grid control.", Assignee = "Margaret hamilt" }, new TasksModel { Id = "Task 14",Id1 = 14, Title = "BLAZ-29010", Status = "InProgress", Summary = "Fix cannot open user’s default database SQL error.", Assignee = "Janet Leverling" }, };} Query ".I used DragStop and ActionComplete events to determine which Kanban Card was dragged from which column to which column, but unfortunately I didn't get the result"You can get the dragged column details of the Card using the DragStart event and the dropped column details using the DragStop event like below,Code snippet: ..... @code { public void DragStart(DragEventArgs args) { Console.WriteLine("Drag started from", args.Data[0].Status); } public void DragStop(DragEventArgs args) { Console.WriteLine("Drag stopped to", args.Data[0].Status); }API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_DragStarthttps://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_DragStopRegards,Vinitha

Sarah · Answer

HelloThank you for your replyHow can I reduce the height of the header??

Vinitha Jeyakumar · Answer

Hi Sarah,Your requirement to customize the height of the Kanban header can be achieved by using the below CSS styles,Code snippet:Regards,Vinitha