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.
Unfortunately, activation email could not send to your email. Please try again.

drag and drop card into the Kanban control from external sources

Thread ID:

Created:

Updated:

Platform:

Replies:

128835 Feb 12,2017 08:25 AM Feb 16,2017 08:11 AM JavaScript 5
loading
Tags: ejKanban
Jonas de Abreu Resenes
Asked On February 12, 2017 08:25 AM

Guys,
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 07:47 AM

  
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. 
 
[Kanban.html] 
 
    <script type="text/javascript"> 
        $(function () { 
            var data = ej.DataManager(window.gridData); 
            $("#Grid").ejGrid({ 
                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)); 
            $("#Kanban").ejKanban( 
                { 
                    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'); 
            else 
                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’. 
            } 
        } 
    </script> 
 
 
 
Please refer the attach the sample  
 
 
Please let us know if you need any further assistance.  

Regards, 

Rajesh kumar.A 


Jonas de Abreu Resenes
Replied On February 13, 2017 09:10 AM

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 06:12 AM

 
 
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.   
  
Regards,   
   
Rajesh kumar. A   


Jonas de Abreu Resenes
Replied On February 15, 2017 09:25 PM

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) {
                    attachKanbanDropEvents();
                },

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 () {
                    targetDragClone(inProgressColumn);
                    $(inProgressColumn).attr("cursor", "move");
                });

                $(closeColumn).mouseover(function () {
                    targetDragClone(closeColumn);
                });

                $(openColumn).mouseover(function () {
                    targetDragClone(openColumn);
                });
            }

Sarath Kumar P [Syncfusion]
Replied On February 16, 2017 08:11 AM

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. 
 
Regards,                
               
Sarath Kumar P.      


CONFIRMATION

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.

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.

;