Update Sort Order based on drop position

Question

Hi,Is there any intention to update the custom sort order based on the position in the column in which the item is dropped, to reflect its position within the list?When dragging a card from one column to the other, slot is highlighted where you wish to drop (ie, position 3), but when the tile is dropped it could end up at the beginning of the list or at the end. I could do this programmatically, but the DropStop event args does not provide any information regarding column or position within the column.Cheers,Anthony

Vinitha Devi Murugan · Accepted Answer

Hi Lorryl, 
 
Thanks for your update. 
 
We have achieved your requirement by making use of setting sortBy property as Index. Please refer below codes and same can be available in below sample.  
 
Sample : https://stackblitz.com/edit/place-the-card-based-on-drop-position-sample?file=app.component.html  
 
App.component.html 
[sortSettings]="sortSettings" 
 
App.component.ts 
public sortSettings = { 
    sortBy: "Index", 
    field: "RankId" 
  }; 
 
Kindly try with the above sample and let us know if you need any further assistance on this.  
 
Regards, 
Vinitha

Balasubramanian Sattanathan · Answer

Hi Anthony Miller, 
 
Greetings from Syncfusion Support. 
 
We have validated your requirement “but the DropStop event args does not provide any information regarding column or position within the column” at our side and we regret to let you know that, we can’t find the position within the column. But we can drop/sort the cards based on it’s priority value like the below code snippet. 





public sortSettings: SortSettingsModel = { 
  soryBy: 'Id', 
  field: 'RankId', 
  direction: 'Ascending' 
}; 
 
Sample: https://stackblitz.com/edit/angular-j1rq8z?file=app.component.ts 
 
Kindly try the above sample and let us know if this is helpful. 
 
Regards, 
Balasubramanian S

lorryl · Answer

Hi Anthony Miller, 
 
Greetings from Syncfusion Support. 
 
We have validated your requirement “but the DropStop event args does not provide any information regarding column or position within the column” at our side and we regret to let you know that, we can’t find the position within the column. But we can drop/sort the cards based on it’s priority value like the below code snippet. 





public sortSettings: SortSettingsModel = { 
  soryBy: 'Id', 
  field: 'RankId', 
  direction: 'Ascending' 
}; 
 
Sample: https://stackblitz.com/edit/angular-j1rq8z?file=app.component.ts 
 
Kindly try the above sample and let us know if this is helpful. 
 
Regards, 
Balasubramanian S Hi,Does the Kanban control support columns in the order based on drop position? I want the fields to be exactly at the dropped position only. No any priority sort.

Balasubramanian Sattanathan · Answer

Hi lorryl, 
 
Thanks for the reply. 
 
We have analyzed your requirement “Does the Kanban control support columns in the order based on drop position?” at our side and we let you know that the Kanban cards will place based on the DataSource order by default. We can achieve your requirement by making use of the sortBy property as Index. We would suggest you to refer the below online demo sample and API to know more details about the Kanban sorting. 
 
Online demo: https://ej2.syncfusion.com/angular/demos/#/material/kanban/sorting 
Sample: https://stackblitz.com/edit/angular-zp7d1p?file=app.component.ts 
API: https://ej2.syncfusion.com/angular/documentation/api/kanban/sortSettingsModel/#sortby 
 
Kindly refer to the above links and let us know if you need further assistance. 
 
Regards, 
Balasubramanian S

lorryl · Answer

Hi lorryl, 
 
Thanks for the reply. 
 
We have analyzed your requirement “Does the Kanban control support columns in the order based on drop position?” at our side and we let you know that the Kanban cards will place based on the DataSource order by default. We can achieve your requirement by making use of the sortBy property as Index. We would suggest you to refer the below online demo sample and API to know more details about the Kanban sorting. 
 
Online demo: https://ej2.syncfusion.com/angular/demos/#/material/kanban/sorting 
Sample: https://stackblitz.com/edit/angular-zp7d1p?file=app.component.ts 
API: https://ej2.syncfusion.com/angular/documentation/api/kanban/sortSettingsModel/#sortby 
 
Kindly refer to the above links and let us know if you need further assistance. 
 
Regards, 
Balasubramanian S I mark a form builder using the kanban control, that can show and drag position dynamic controls. The first column is draggable columns, and the other columns are drop area.I don't want the cards will place based on the DataSource order , I want the drop position.Any idear?Above image setting for the below dynamic control interface: (Maybe the reference 5 can be above on the reference 2 in setting. )

lorryl · Answer

Thank you very much!That's exactly what I want！

Vengatesh Maniraj · Answer

Hi Lorry, 

You are most welcome. 

Please get back to us if you need any further assistance. 

Regards, 
Vengatesh