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

drag and drop card into the Kanban control from external sources

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?

5 Replies

RK Rajesh Kumar Anburajan Syncfusion Team 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 

JD Jonas de Abreu Resenes 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?

RK Rajesh Kumar Anburajan Syncfusion Team 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   

JD Jonas de Abreu Resenes 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 () {

SK Sarath Kumar P Syncfusion Team 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.      

Live Chat Icon For mobile
Up arrow icon