Disable Dropping in certains Columns

Question

Hi Guys,I am still working with the kanban component and I want to be able that when I drag some card it won't let me drop it in certain columns depending its origin. For example, if my columns are status values and I drag a card in canceled status it should only let me dropped in the To Do column (that means I can only reset a canceled card) , or for example some cards can not change its swimlane, so I need to check when the drag event occurs check the card data and see in what areas (swimlanes are columns) can be dropped. is this possible?

Buvana Sathasivam · Answer

Hi Marco, 

Greetings from Syncfusion support. 

You can achieve your requirement by using the allowDrop property for the corresponding column property. In the below code, we have set the allowDrop property as false on the close column, which means any card dropped into the close column is not allowed.  
We have also provided support for the transitionColumns property, which is used to provide restrictions on columns when performing drag and drop. The allowDrag property is used to prevent the drag action on a particular column.  
Please see below the code and sample. 




let kanbanObj: Kanban = new Kanban({ 
columns: [ 
    { headerText: 'To Do', keyField: 'Open' }, 
    { headerText: 'In Progress', keyField: 'InProgress' }, 
    { headerText: 'Testing', keyField: 'Testing' }, 
    { headerText: 'Done', keyField: 'Close', allowDrop: false }, 
  ], 
…….. 
}); 
 
 
Sample: https://stackblitz.com/edit/mc5ekc 
 
API link: https://ej2.syncfusion.com/documentation/api/kanban/columnsModel/#allowdrop 
 
Demo link: https://ej2.syncfusion.com/demos/#/bootstrap5/kanban/workflow.html 
 
Please let us know if you have any concerns. 

Regards, 
Buvana S