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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

drag and drop card into the Kanban control from external sources

Thread ID:





128835 Feb 12,2017 01:25 PM UTC Feb 16,2017 01:11 PM UTC JavaScript 5
Tags: ejKanban
Jonas de Abreu Resenes
Asked On February 12, 2017 01:25 PM UTC

I am trying to drag and drop items into the Kanban control from ejgrid, but it's not working. Do you know if it's possible?

Rajesh Kumar Anburajan [Syncfusion]
Replied On February 13, 2017 12:47 PM UTC

Hi Jonas de Abreu Resenes, 
Thanks for contacting syncfusion support. 
The requested requirement of “ Drag and drop ejgrid rows into Kanban control ” can be achieved through simple workaround solution using  grid’s “rowDrop” event and kanban’s “addCard” method. 
Please refer to the following code snippets for workaround solution. 
    <script type="text/javascript"> 
        $(function () { 
            var data = ej.DataManager(window.gridData); 
                dataSource: data, 
                allowPaging: true, 
                allowSorting: true, 
                allowRowDragAndDrop: true, 
                rowDropSettings: { dropTargetID: "#Kanban" }, 
                isResponsive: true, 
                rowDrop: "rowDrop"          //bind the rowDrop event 
            var data = ej.DataManager(window.kanbanData).executeLocal(ej.Query().take(10)); 
                    dataSource: data, 
                    columns: [ 
                        { headerText: "Backlog", key: "Open" }, 
                        { headerText: "In Progress", key: "InProgress" }, 
                        { headerText: "Testing", key: "Testing" }, 
                        { headerText: "Done", key: "Close" } 
                    keyField: "Status", 
                    allowTitle: true, 
                    fields: { 
                        content: "Summary", 
                        primaryKey: "Id" 
                    allowSelection: false, 
                    editSettings: { 
                        allowAdding: true 
        function rowDrop(args) {             //Here you can define the rowDrop event 
            var kanban, cardId, target = $(args.target), key, data; 
            kanban = $('#Kanban').data('ejKanban'); 
            data = kanban.getCurrentJsonData(); 
            cardId = data[data.length - 1][kanban.model.fields.primaryKey] + 1; 
            if (target.hasClass('e-rowcell')) 
                key = target.attr('ej-mappingkey'); 
                key = target.parents('.e-rowcell').attr('ej-mappingkey'); 
            for (var i = 0; i < args.data.length; i++) {   // args.data is grid dragged data 
                args.data[i][kanban.model.keyField] = key; 
                kanban.KanbanEdit.addCard(cardId, args.data[i]);  //Add dragged card into kanban using public method ‘addCard’. 
Please refer the attach the sample  
Please let us know if you need any further assistance.  


Rajesh kumar.A 

Jonas de Abreu Resenes
Replied On February 13, 2017 02:10 PM UTC

Hi Anburajan

First of all, thanks a lot for you answer. I just tested the sample you sent and it worked fine. I saw that we don't have same behavior, I mean, the mouse pointer doesn't change and you can't see the draggable area as you can see and you move one item from in progress to done column. Do you know if we can fix it?

Rajesh Kumar Anburajan [Syncfusion]
Replied On February 14, 2017 11:12 AM UTC

Hi Jonas,   
Query-1: The mouse pointer doesn't change   
Valid mouse pointer is showing for Grid and Kanban control. For invalid droppable areas, the following invalid symbol (red color) will be displayed to denote the invalid target.   
Query-2: You can't see the draggable area as you can see and you move one item from Inprogress to done column   
We understand that your requirement is to add “clone elements to denote the droppable area” like we denoted the inside Kanban control drag and drop as shown in image below.   
The above-mentioned behavior is achievable only with the “External drag and drop feature” implemented. Currently, we don’t have support for your reported requirement “External drag and drop feature in Kanban”. We will consider this as a feature request and it will be implemented in any of our releases. Before that, please confirm some specific details regarding this feature, that would help us to implement the feature in line with your requirement.  
Please refer to the sample video below,   
Please let us know if we misunderstood the requirement, if so please provide a sample which replicates the requirement. It would help us to proceed further.   
Rajesh kumar. A   

Jonas de Abreu Resenes
Replied On February 16, 2017 02:25 AM UTC

Hello, thanks a lot for you support.

I could implement what I wanted using some jquery functions and it's working fine with the code below:

rowDragStart: function (args) {

function targetDragClone(column) {
                var attached = false;

                if (!attached) {
                    var inProgressColumnsChildren = column[0].children;

                    for (var i = 0; i < inProgressColumnsChildren.length; i++) {
                        var element = inProgressColumnsChildren[i];

                        var elementClass = $(element).attr('class');

                        if (elementClass.startsWith('e-shrinkheader') && !elementClass.includes("e-targetdragclone") && !attached) {
                            var lastCard = inProgressColumnsChildren[i - 1];

                            var lastCardWidth = $(lastCard).width();
                            var lastCardHeight = $(lastCard).height();

                            $(lastCard).after("<div class=\"e-targetdragclone\" style=\"width:" + lastCardWidth + "px; height:" + lastCardHeight + "px; cursor: move\"></div>");

                            attached = true;


            function attachKanbanDropEvents() {
                var openColumn = $("td[ej-mappingkey='Open']");
                var inProgressColumn = $("td[ej-mappingkey='InProgress']");
                var closeColumn = $("td[ej-mappingkey='Close']");

                $(inProgressColumn).mouseover(function () {
                    $(inProgressColumn).attr("cursor", "move");

                $(closeColumn).mouseover(function () {

                $(openColumn).mouseover(function () {

Sarath Kumar P [Syncfusion]
Replied On February 16, 2017 01:11 PM UTC

Hi Jonas, 
Thanks for the update. We are happy to hear that issue has been solved. 
Let us know if you have any other queries, we will be happy to assist you. 
Sarath Kumar P.      


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon