We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to get target ID?


After I drag and drop a card from one column to another, how do I get the ID of the column and the id of the swim lane the card was dropped into?


4 Replies

AP Arun Palaniyandi Syncfusion Team September 7, 2017 10:57 AM UTC

Hi Sam Tran , 

Thanks for contacting Syncfusion support. 

We can able to achieve your requirement by using the cardDrop event of the kanban. Bind this event and from the argument draggedElement, we can able get the column and swimlane details of the card was dropped to.  Please find the below code snippets. 
   cardDrop: function (args) { 
            var obj = $("#Kanban").data("ejKanban"); 
                alert("Dropped Swimlane Id: " + args.draggedElement.parents(".e-columnrow").prev().attr("id")); 
            alert("Dropped Column mapping key: " + args.draggedElement.parent().attr("data-ej-mappingkey")); 

If the shared details and sample doesn’t meet your requirement, please give us more information to help us to provide an alternative solution.     

Arun P.  

ST Sam Tran September 8, 2017 06:22 PM UTC

Thank you for helping me with this!

I'm using MVC and for some reason


returns as undefined.

I know the columns are getting the correct ID's because the cards are placed in the correct column.

But when I drag the card to a different column,  args.draggedElement.parent() does exist as object, but the .attr("data-ej-mappingkey")  part is undefined.

Again, if the key was not there, how come the card records were placed in the correct column?

I will attached the partial view...maybe you can see what I did wrong.

Thanks again!

Attachment: ForSyncFusionSupport_f00e9202.rar

ST Sam Tran September 8, 2017 06:42 PM UTC

I got it.

Instead of:


I used:


and that gets me the correct column id...why would the attribute be different??

Your code works fine in your example, and I put your code in the sample SyncFusion project and it also works...what is it about my project that would make the attribute different?


AP Arun Palaniyandi Syncfusion Team September 11, 2017 11:53 AM UTC

Hi Sam Tran,    
Thanks for your update.   
We regret the inconvenience caused. Actually, we have done HTML5 compliance with our web components. When we validate, we found some issues in our Kanban component and then analyzed those issues completely with HTML5 support and fixed. Hence the attribute structure had been changed and these changes are effective from our Volume 3, 2017 main release for most of all our components. So, if you are using the version before Volume 3 (, you can use attr("ej-mappingkey")) to take the values. But if you are using above Volume 3, you must use the attr("data-ej-mappingkey")) to take attributes.   

Arun P. 

Live Chat Icon For mobile
Up arrow icon