drag and drop card into the Kanban control from external sources

[Jonas de Abreu Resenes]

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]

  

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  

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/172203/ze/KanbanExternal_DragDrop1368062431 

 

Please let us know if you need any further assistance.  

Regards, 

Rajesh kumar.A 

[Jonas de Abreu Resenes]

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]

 

 

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,   

   

Sample video: http://www.syncfusion.com/downloads/support/forum/128835/ze/kanbandrag_and_drop1125476642   

   

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]

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]

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.