A few questions.

[Yordan]

1. I have a few tens of Columns, which i wish to have only horizontally, since they are stacking right now in form or grid. How to do that ?
   
2. I wish to be able to move the cards only inside the same Column. How to do that ?
3. I wish to lock a card not to be able to be m

[Vinitha Jeyakumar]

Hi Yordan,

Query 1. "I have a few tens of Columns, which i wish to have only horizontally, since they are stacking right now in form or grid. How to do that ?"

In Kanban, we have feature called Swimlanes, which are horizontal categorizations of cards on the Blazor Kanban Board. It is used for grouping of cards, which brings transparency to the workflow process.

Please check the demos and documentation below,

https://blazor.syncfusion.com/documentation/kanban/swimlane

https://blazor.syncfusion.com/demos/kanban/swimlane?theme=fluent

Query 2. "I wish to be able to move the cards only inside the same Column. How to do that ?"

Your requirement can be achieved by using the TransitionColumns property of KanbanColumn, which defines the list of column key fields to allow drag and drop.

Code snippet:

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

    <KanbanColumns>

        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})" TransitionColumns="@TransitionColumnsOpen"></KanbanColumn>

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

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

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

    </KanbanColumns>

    <KanbanEvents TValue="TasksModel" DragStart="DragStart"></KanbanEvents>

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

</SfKanban>

@code {

    public List<string> TransitionColumnsOpen = new List<string> { "Open" };

    public List<string> TransitionColumnsInProgress = new List<string> { "InProgress" };

    public List<string> TransitionColumnsTesting = new List<string> { "Testing" };

    public List<string> TransitionColumnsClose = new List<string> { "Close" };
}

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanColumn.html#Syncfusion_Blazor_Kanban_KanbanColumn_TransitionColumns

Query 3: "I wish to lock a card not to be able to be move"

Using the DragStart event of the Kanban control, you can cancel the dragging of a card using Cancel argument. Please check the code below,

Code snippet:

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

    <KanbanColumns>

        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})" TransitionColumns="@TransitionColumnsOpen"></KanbanColumn>

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

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

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

    </KanbanColumns>

    <KanbanEvents TValue="TasksModel" DragStart="DragStart"></KanbanEvents>

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

</SfKanban>

@code {

    public List<string> TransitionColumnsOpen = new List<string> { "Open" };

    public List<string> TransitionColumnsInProgress = new List<string> { "InProgress" };

    public List<string> TransitionColumnsTesting = new List<string> { "Testing" };

    public List<string> TransitionColumnsClose = new List<string> { "Close" };

    public class TasksModel

    {

        public string Id { get; set; }

        public string Title { get; set; }

        public string Status { get; set; }

        public string Summary { get; set; }        

    }

    public List<TasksModel> Tasks = new List<TasksModel>()

    {

        new TasksModel { Id = "Task 1", Title = "BLAZ-29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer." },

        new TasksModel { Id = "Task 2", Title = "BLAZ-29002", Status = "Open", Summary = "Show the retrieved data from the server in grid control." },

        new TasksModel { Id = "Task 3", Title = "BLAZ-29003", Status = "InProgress", Summary = "Improve application performance" },

        new TasksModel { Id = "Task 4", Title = "BLAZ-29004", Status = "Testing", Summary = "Fix the issues reported by the customer." },

        new TasksModel { Id = "Task 5", Title = "BLAZ-29005", Status = "Testing", Summary = "Fix the issues reported in Safari browser." },

        new TasksModel { Id = "Task 6", Title = "BLAZ-29006", Status = "Close", Summary = "Analyze SQL server 2008 connection." },

        new TasksModel { Id = "Task 7", Title = "BLAZ-29007", Status = "Close", Summary = "Analyze grid control." },

        new TasksModel { Id = "Task 8", Title = "BLAZ-29008", Status = "Close", Summary = "Stored procedure for initial data binding of the grid." }

    };

    public void DragStart(DragEventArgs<TasksModel> args)

    {

        if(args.Data[0].Id == "Task 2")

        {

            args.Cancel = true;

        }

    }

}

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.KanbanEvents-1.html#Syncfusion_Blazor_Kanban_KanbanEvents_1_DragStart

Regards,

Vinitha

[Yordan]

Thank You very much  Vinitha Jeyakumar

[Vinitha Jeyakumar]

Hi Yordan,

You are welcome.

Regards,

Vinitha