How to get target ID?

[Sam Tran]

Hi,

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?

Thanks!

[Arun Palaniyandi]

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"); 

            if(!ej.isNullOrUndefined(obj.model.fields.swimlaneKey)) 

                alert("Dropped Swimlane Id: " + args.draggedElement.parents(".e-columnrow").prev().attr("id")); 

            alert("Dropped Column mapping key: " + args.draggedElement.parent().attr("data-ej-mappingkey")); 

        } 

 

 

 

 

Demo Link: http://jsplayground.syncfusion.com/jnysb05s 

API Link: https://help.syncfusion.com/api/js/ejkanban#events:carddrop 

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

Regards,
Arun P.  

[Sam Tran]

Thank you for helping me with this!

I'm using MVC and for some reason

     args.draggedElement.parent().attr("data-ej-mappingkey")

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

[Sam Tran]

I got it.

Instead of:

args.draggedElement.parent().attr("data-ej-mappingkey")); 

I used:

args.draggedElement.parent().attr("ej-mappingkey")); 

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?

Thanks!!!

[Arun Palaniyandi]

 

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 (15.3.0.26), 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.   

  

Regards,   

Arun P.