How to save( or persistence ) row drag and drop result ?

[Yu Kawamura]

I'm currently creating a task management tool using syncfusion's Gannt component.

I would like to implement the ability to drag and drop rows to swap tasks.

For this reason, I implemented a function to swap lines by referring to the demo below.

https://ej2.syncfusion.com/vue/demos/#/material3/gantt/drag-and-drop.html

However, if I reload the page, the drag and drop result will be cleared.

How can I save the results of dragging and dropping?

[Ajithkumar Gopalakrishnan]

Hi Yu Kawamura,

Greetings from Syncfusion Support,

To meet your requirement, we recommend storing the data in database or browser local storage, after drag and drop action. On loading page, retrieve data from database or browser local storage so that updated data will be used. Use actionComplete and load events of gantt to achieve this requirement. After a drop action, store the data source in local storage. Then, upon reloading, update the stored data source in the Gantt chart instance. We have attached a code snippet and sample for your reference.

Ug link: Local-Storage

<ejs-gantt ref='gantt' id="GanttContainer"

           …

          :allowTaskbarDragAndDrop="true"

           :actionComplete="actionComplete"

           :load="load">

</ejs-gantt>

data: function()

{

    return{

    …

   actionComplete: function(args) {

            if (args.requestType == "rowDropped")

            {

                var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];

                window.localStorage.setItem('ganttGanttArray', JSON.stringify(ganttObj.dataSource));

            }

        },

    load: function(args) {

            let storedData = window.localStorage.getItem('ganttGanttArray');

            let retrievedArray = JSON.parse(storedData);

            if (retrievedArray !== null && retrievedArray.length > 0)

            {

                var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];

                ganttObj.dataSource = retrievedArray;

            }

        }

    };

},

Sample link: https://stackblitz.com/edit/t4bfnw-8xqt2t?file=src%2FApp.vue

If you have any specific concerns or encounter issues, please provide additional details or share a sample that replicates the problem. We are here to assist you further.

Regards,

Ajithkumar G