Drag and drop cards within the same column

[Devinitely]

Hello,

When I try to reorder cards within the same column in the Kanban control, it doesn't seem to work, although I can move the cards to a different column. Please can you let me know if I can drag and drop cards within the same column?

Many thanks!

[Vinitha Jeyakumar]

Hi Claire, 

 

 

Currently, we are validating your reported query. We will update you the further details on 13^th September. 

 

Regards, 

Vinitha. 

[Gunasekar Kuppusamy]

Hi Claire,

 

Good day to you.

We have validated your reported query from our end.

You can drag and drop the cards within the same columns by enabling the KanbanSortSettings property. We have prepared a sample for your reference. In this sample, we have configured the SortBy and Field properties inside the KanbanSortSettings tag.

Code Snippets:

<div class="col-lg-12 control-section">

    <SfKanban KeyField="Status" DataSource="@cardData">

        <KanbanColumns>

            @foreach (ColumnModel item in columnData)

            {

                <KanbanColumn HeaderText="@item.HeaderText" KeyField="@item.KeyField"></KanbanColumn>

            }

        </KanbanColumns>

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

        <KanbanSortSettings SortBy="@KanbanSortBy" Field="@KanbanField"></KanbanSortSettings>

    </SfKanban>

</div>

@code{

    public bool isLoadingData { get; set; }

    private List<KanbanDataModel> cardData = new KanbanDataModel().GetTasks();

    public SortOrderBy KanbanSortBy { get; set; } = SortOrderBy.Index;

    public string KanbanField { get; set; } = "Index";

    private List<ColumnModel> columnData = new List<ColumnModel>() {

        new ColumnModel(){ HeaderText= "To Do", KeyField= new List<string>() { "Open" } },

        new ColumnModel(){ HeaderText= "In Progress", KeyField= new List<string>() { "InProgress" } },

        new ColumnModel(){ HeaderText= "Testing", KeyField= new List<string>() { "Testing" } },

        new ColumnModel(){ HeaderText= "Done", KeyField=new List<string>() { "Close" } }

    };

}

Sample: https://www.syncfusion.com/downloads/support/forum/168729/ze/KANBAN~1-161262115

Please check the sample and let us know if the sample helps,

Regards,

Gunasekar

[Devinitely]

Thank you, the fix in the sample works!

[Gunasekar Kuppusamy]

Hi Devinitely, 

 

Thanks for the update.  

We are glad that the provided solution worked for you. Please let us know if you need further assistance. 

 

Regards,  

Gunasekar