Kanban Swimlane Settings Issues

Question

Hi, we are trying to use SF Blazor Kanban component on our project but has hit into issues. Particularly with Kanban Swimlane properties and configuration.

Issue #1:

I have set the "ShowEmptyRow" to true, so that any row or swimlane category that is empty will still be shown, however when a card from a swimlane category is dragged and dropped to a different swimlane category. The source swimlane category is now hidden. How can I make it so that the swimlane category still shows even without any card falls under it?

Issue #2:

DayOfWeek as Swimlane KeyField is not working. In our model we have a DayOfWeek property (with value of the same type. eg. DayOfWeek.Monday, DayOfWeek.Tuesday). This is shown when rendered and our cards are ordered properly. However, when dragging and dropping cards to different swimlane category, it hangs and does not work.

We had to add an arbitrary property called "DayOfWeekAsString" to make it work. The dragging and dropping to different swimlane category now works but:

Issue #3:

Since the swimlane keyfield is set to the string version of DayOfWeek (eg. "Monday", "Tuesday"). The default order or sorting is based on the string name. How do we set a custom sorting rule for the swimlane category similar to columns where we can define a custom sorting? We want to show it in ascending order from Monday to Sunday.

Attachment: screenshot_f2767293.zip

Revanth Krishnan · Accepted Answer

Hi Raven,

Greetings from Syncfusion support.

We have validated your queries,

Query 1: “I have set the "ShowEmptyRow" to true, a card from the swimlane category is dragged and dropped to a different swimlane category. The source swimlane category is now hidden. How can I make it so that the swimlane category still shows even without any card falls under it?”

By default, when "ShowEmptyRow" is set to true, the empty swimlane will be shown only when the cards have the data which is not in the ‘KeyField’ of the Kanban which is the default behavior.

Your requirement can be achieved by following the below steps,

Store the current card data and the assignee ‘name’ in the DragStart event.
Then in the DragStop event, check whether the dragged swimlane category has no data.
If it has no data, dummy data can be added to the data source for that particular Swimlane KeyField using the ‘AddCard’ method.
This will make the swimlane show the category when there is no data.

We have prepared a sample for your reference,

Code Snippet:

<SfKanban TValue="TasksModel" @ref="Kanbanobj" KeyField="Status" DataSource="Tasks">

<KanbanColumns>

<KanbanColumn HeaderText="Backlog" KeyField="@(new List<string>() { "Open" })"></KanbanColumn>

<KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() { "InProgress" })"></KanbanColumn>

<KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() { "Testing" })"></KanbanColumn>

<KanbanColumn HeaderText="Done" KeyField="@(new List<string>() { "Close" })"></KanbanColumn>

</KanbanColumns>

<KanbanCardSettings HeaderField="Id" ContentField="Summary"></KanbanCardSettings>

<KanbanSwimlaneSettings KeyField="Assignee" AllowDragAndDrop="true" ShowEmptyRow="true" SortDirection="SortDirection.Descending" ShowItemCount="false"></KanbanSwimlaneSettings>

<KanbanEvents TValue="TasksModel" DragStart="@kanbanDragStart" DragStop="@kanbanDragStop"></KanbanEvents>

</SfKanban>

@code {

. . .

SfKanban<TasksModel> Kanbanobj;

public string assignee { get; set; }

public TasksModel dragData { get; set; }

public void kanbanDragStart(DragEventArgs<TasksModel> args)

{

//Store card data.

this.dragData = args.Data[0];

//Store current assignee name.

this.assignee = args.Data[0].Assignee;

}

public void kanbanDragStop(DragEventArgs<TasksModel> args)

{

var totalData = this.Kanbanobj.DataSource.ToArray().Length;

var currentCount = 0;

var isValid = false;

//Ensuing if the dragged swimlane have no other data.

foreach (var data in this.Kanbanobj.DataSource)

{

var currentData = data;

if (currentData.Assignee == this.assignee && currentData != this.dragData)

{

return;

}

else

{

currentCount++;

if (currentCount == totalData)

{

isValid = true;

}

// Adding dummy data to the swimalane with the keyfield which is not shown in the Kanban.

if (isValid)

{

this.Kanbanobj.AddCard(new TasksModel { Id = "Dummy ID", Title = "Dummy Title", Status = "Validate", Summary = "Dummy Summary", Assignee = this.assignee });

}

. . .

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Kanban_Blazor_App1404098253

Query 2: “DayOfWeek type as Swimlane KeyField is not working”.

The Kanban Swimlane KeyField only accepts the string type, which is the default behavior.

Query 3: “The swimlane keyfield is set to the string version of DayOfWeek (eg. "Monday", "Tuesday"). The default order or sorting is based on the string name. How do we set a custom sorting rule for the swimlane category similar to columns where we can define a custom sorting?”

We have validated your query and currently, Kanban supports only sorting the data by alphabetical order. So we have considered “Provide an event to customize(sort) the data in the Kanban” as a feature request from our end and logged the report for the same and the fix will be included with any of our upcoming releases.

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/25721

Regards,

Revanth