Reorder cards on drag and drop

[Renan Monteiro da Silva]

I would like to know how can I reorder the Kanban data with drag and drop. When I do that, the UI is changed but I can't save the new reorded data because the data is not updated and I can't get with any events the new and old card index to do that manually. 

<ejs-kanban

ref="kanbanInstance"

id="kanban"

keyField="status"

:dataSource="cards"

:cardDoubleClick="cardDoubleClick"

:cardSettings="cardSettings"

:dialogSettings="dialogSettings"

:cardRendered="cardRendered"

class="kanban-component">

<e-columns>

<e-column

v-for="column in kanbanColumns"

:key="column.key"

:headerText="column.text"

:keyField="column.key">

</e-column>

</e-columns>

</ejs-kanban>

cardSettings = {

contentField: 'id',

headerField: 'id',

template: () => ({

template: KanbanCard,

}),

}

[Balasubramanian Sattanathan]

Hi Renam, 

Greetings from Syncfusion Support. 

We have validated your requirement at our end and suspect that your need is to get the reordered data after drag/drop action. And we let you know that the cards will be dropped based on the DataSource only by default. And if you would like to get the reorder data first we need to change the sortBy order as Index like the below code snippet. 

UG: https://ej2.syncfusion.com/vue/documentation/kanban/cards/#drag-and-drop 

dragStop: https://ej2.syncfusion.com/vue/documentation/api/kanban#dragstop 

onDragStop: function (args) { 

    let kanbanObj = this.$refs.KanbanObj.ej2Instances; 

    // You can get the card data by using args.data 

    console.log(args.data[0]); 

    // You can get the card data by using args.element like below code 

    var cardData = kanbanObj.getCardDetails(args.element); 

    console.log(cardData); 

    // You can get reordered data of the target column using the below code 

    console.log(kanbanObj.getColumnData(cardData.Status)); 

} 

Sample: https://codesandbox.io/s/kanban-card-drag-drop-forked-b2ji8 

Online demo: https://ej2.syncfusion.com/vue/demos/#/material/kanban/sorting.html 

Kindly try the above solution and let us know if you need further assistance. 

Regards, 

Balasubramanian S 

[Renan Monteiro da Silva]

Thanks for your reply, Balasubramanian.

I can solve the first part of my problem. Now I can get the new index of a reordered card. Now I need to get the new values of other cards. I mean, if I move the last card to the first position, all of the cards indexes bellow will be changed. There is some way to do that?

[Balasubramanian Sattanathan]

Hi Renan, 

Thanks for the reply. 

As we have mentioned earlier, we can get the reordered data by using the getColumnData public method. Kindly refer to the below code snippet and the sample. 

onActionComplete: function (args) { 

  if (args.requestType === "cardChanged") { 

    let kanbanObj = this.$refs.KanbanObj.ej2Instances; 

    setTimeout(() => { 

      // You can get reordered data of the target column using the below code 

      console.log("reordered data"); 

      console.log(kanbanObj.getColumnData(args.changedRecords[0].Status)); 

    }, 1000); 

  } 

} 

 

Sample: https://codesandbox.io/s/kanban-card-drag-drop-forked-pydqb 

Please let us know if you need further assistance. 

Regards, 

Balasubramanian S