Dragging 1 card pulls an extra card along

[Surinder]

Hi there,

I'm doing a proof of concept with the Kanban control.

When I drag a single card into the next column, after releasing the mouse, it somehow pulls in another card from the bottom of the previous column

See video https://www.screencast.com/t/i2wYkyNL

Here is how the code is structured:

 <div id='TrackBoard' style="height: 70vh;"></div>

    <script>

    function getTrackBoardData(){

      console.log('Retrieve Kanban board data -->');

      var data = $("#TrackBoard").ejKanban("instance").model.dataSource; 

      console.log(data);

     return data;

    }

      

      function updateTrackBoardData(data){

      console.log('Update Kanban board with data -->');

        console.log(data)

        

        // NOTE: Updating the Kanban board any other way results in the control not refreshing itself

        $("#TrackBoard").ejKanban("dataSource", data);

      }

      

    function displayTrackBoard(data) {

        $("#TrackBoard").ejKanban(

            {

              dataSource: data,

                enableTotalCount: true,

                allowTitle: true,

                columns: [

                    { headerText: "To Do", key: "To Do" },

                    { headerText: "Blocked", key: "Blocked" },

                    { headerText: "In Progress", key: "In Progress" },

                    { headerText: "Review", key: "Review" },

                    { headerText: "Done", key: "Done" }

                ],

                fields: {

                    content: "title",

                    primaryKey: "key",

                    // tag: "Tags",

                    title: "key",

                    color: "worktype"

                },

                cardSettings: {

                    colorMapping: {

                        "#cb2027": "Story",

                        "#67ab47": "Task",

                        "#fbae19": "Bug"

                    }

                },

                keyField: "workstatus",

              cardDragStart: function (args) {

                        console.log('TRACK BOARD - CARD DRAG START');

                        console.log(args);

                        

                      

                    },

                    cardDrop: function (args) {

                        console.log('TRACK BOARD - CARD DROP');

                        console.log(args);

                      

                    },

              actionComplete: function (args) {

                        console.log('TRACK BOARD - ACTION COMPLETE');

                        console.log(args);

                    },

                    selectionType: ej.Kanban.SelectionType.Single

            });

}

</script>

Could I be doing something wrong here?

Thanks

SS

[Surinder]

I'm using the following libraries by the way on my page.

<!-- Essential Studio for JavaScript  theme reference -->

<link rel='nofollow' href="https://cdn.syncfusion.com/18.1.0.42/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />

<!-- Essential Studio for JavaScript  script references -->

<script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>

<script src="https://cdn.syncfusion.com/18.1.0.42/js/web/ej.web.all.min.js"></script>

[Balasubramanian Sattanathan]

Hi Surinder, 

 

Greetings from Syncfusion Support. 

 

We have tried to replicate your reported problem “Dragging 1 card pulls an extra card along” at our side. But we are unable to replicate it. Since the Kanban card drag/drop is working properly.  

Here is a video of the sample that works as expected. 

Sample: https://jsplayground.syncfusion.com/iotrexto 

Kindly share with us the below details to serve you better. 

• Replicate your problem in the above sample or
• Share a sample illustrating the problem which would help us to proceed further.

Regards, 

Balasubramanian S