Save function for Drag and Drop Grid

[Mohd Mohaimin Zakaria]

Hi,

From the demo https://ej2.syncfusion.com/aspnetcore/Grid/RowDragAndDrop#/material

I would like to save the data from the target grid to a database after I finish choosing(drag and drop) the data.

How could that be possible ?

Thanks.

[Thavasianand Sankaranarayanan]

Hi Mohd, 

Greetings from Syncfusion support. 

We suspect that you will be selecting the rows in Grid and you need to store these selected rows in a data base. If so, then we would like to suggest you to get the selected records in Grid using the “getSelectedRecords()” method of Grid, and now you can store the selected records to a database. 

Documentation : https://ej2.syncfusion.com/javascript/documentation/api/grid/#getselectedrecords 

 

If we have misunderstood your requirement, we need more details to further proceed on this. Please get back to us with the following details for better assistance, 

1. Share a screenshot/video demonstration explaining your requirement.
2. Are you willing to save the changes to the target grid(excluding the records which are chose).
3. Are you willing to save the dragged and dropped records to a separate database(not the Grid’s).
4. Or do you need to remove the dragged and dropped records from the target grid and update the result to the target grid’s database?

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 

Thavasianand S. 

[Mohd Mohaimin Zakaria]

Here are my screenshot.

The data in the left grid is populate from a table database. And I've drag and drop some of the data to the right grid.

I want to save the data in the right grid. (Argentine, Austrian, Bahamian) to another table of database while maintaining the data on the left grid.

Here are my code.

        <div class="col-lg-6">

            <ejs-grid id="Grid"

                      allowRowDragAndDrop="true"

                      allowSelection="true"

                      allowPaging="true"

                      allowSorting="true"

                      allowFiltering="true"

                      showColumnMenu="true"

                      created="created">

                <e-data-manager url="@Url.Action("GetSubReference", "Admin")" adaptor="UrlAdaptor"></e-data-manager>

                <e-grid-editSettings allowAdding="true"

                                     allowEditing="true"

                                     allowDeleting="true"

                                     mode="Dialog"

                                     showDeleteConfirmDialog="true"></e-grid-editSettings>

                <e-grid-selectionsettings type="Single"></e-grid-selectionsettings>

                <e-grid-pagesettings pageCount="3" pageSize="20"></e-grid-pagesettings>

                <e-grid-filterSettings type="Menu"></e-grid-filterSettings>

                <e-grid-rowdropsettings targetID="DestGrid"></e-grid-rowdropsettings>

                <e-grid-columns>

                    <e-grid-column field="SubReferenceID" headerText="SubReferenceID" visible="false" showInColumnChooser="false" isPrimaryKey="true" defaultValue="@ViewBag.Guid"></e-grid-column>

                    <e-grid-column field="ReferenceID" headerText="ReferenceID" visible="false" showInColumnChooser="false"></e-grid-column>

                    <e-grid-column field="ReferenceName" headerText="ReferenceName" validationRules="@(new { required = false })" width="200" defaultValue="@ViewBag.ReferenceName" allowEditing="false" visible="false" showInColumnChooser="false"></e-grid-column>

                    <e-grid-column field="SubReferenceID" headerText="SubReferenceID" textAlign="Right" isPrimaryKey="true" width="120" visible="false" showInColumnChooser="false"></e-grid-column>

                    <e-grid-column field="Name" headerText="Name" width="135"></e-grid-column>

                    @*<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="130"></e-grid-column>*@

                </e-grid-columns>

            </ejs-grid>

        </div>

        <div class="col-lg-5">

            <ejs-grid id="DestGrid"

                    allowRowDragAndDrop="true" 

                    allowSelection="true" 

                    allowPaging="true" 

                    allowSorting="true">

                <e-grid-selectionsettings type="Single"></e-grid-selectionsettings>

                <e-grid-pagesettings pageCount="1"></e-grid-pagesettings>

                <e-grid-rowdropsettings targetID="Grid"></e-grid-rowdropsettings>

                <e-grid-columns>

                    <e-grid-column field="SubReferenceID" headerText="SubReferenceID" textAlign="Right" isPrimaryKey="true" width="120" visible="false"></e-grid-column>

                    <e-grid-column field="Name" headerText="Name" width="135"></e-grid-column>

                    @*<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="130"></e-grid-column>*@

                </e-grid-columns>

            </ejs-grid>

        </div>

Attachment: SubRef_8366b105.rar

[Thavasianand Sankaranarayanan]

Hi Mohd, 

We have analyzed your requirement. We suggest you to get the data from the right Grid by using the “dataSource” property of Grid. When drag and drop from the left to right grid, the right Grid’s data will be populated. So you can fetch the data populated in the right grid by using the “dataSource” property and save the fetched data to your table. 

                                                                                                                                               

 

<button onclick="GetDatafromRight()"></button> 

 

<script> 

    function GetDatafromRight() { 

        var DestObj = document.getElementById("DestGrid").ej2_instances[0];  //get instance of destination grid 

        console.log(DestObj.dataSource);            //Fetch the data from destination grid and use this to populate your table 

    } 

</script> 

In the above code, we have fetched the data in the right grid when click on the button after populating the right grid by drag and drop from the left grid. 

Documentation : https://ej2.syncfusion.com/javascript/documentation/api/grid/#datasource 

 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

[Mohd Mohaimin Zakaria]

Once the data has been populated from the right grid.

How do I save it to the database ?

[Renjith Singh Rajendran]

Hi Mohd, 

We would like to inform you that the “DestObj.dataSource” will be returning json data from the destination grid’s datasource. So we suggest you to strigify this data and call an ajax to pass this data to server end, and at server you can get this destination grid’s data. 

Now the data will be at serer, and now you need to handle this json data to b updated to your data table. 

<button onclick="GetDatafromRight()"></button> 

<script> 

    function GetDatafromRight() { 

        var DestObj = document.getElementById("DestGrid").ej2_instances[0]; 

        var destdata = DestObj.dataSource; 

        console.log(DestObj.dataSource);//Fetch the data from destignation grid and use this to populate your table 

        $.ajax({ 

            url: "/Home/Updatetotable", 

            type: "POST", 

            datatype: "json", 

            contentType: "application/json; charset=utf-8", 

            data: JSON.stringify({ gid: JSON.stringify(destdata) }) 

        }); 

    } 

</script> 

Please get back to us if you need further assistance. 

Regards, 

Renjith R. 

[Jesús Mostajo]

Hi Thavasianand,

I tried your solution and it works great while dragging and dropping on the right grid, it gets the datasource correctly.

But it doesn't seem to work well if we pull some element from the right grid back to the left grid. We get the same data source even if we remove all the elements from the right Grid.

Could you help me?

This is our code:

 <ejs-grid id="GridUnOrdered" dataSource="Model.UnOrderedList"

                      allowRowDragAndDrop="true"

                      allowSelection="true"

                      allowPaging="true">

                <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>

                <e-grid-pagesettings pageCount="1" pageSize="12"></e-grid-pagesettings>

                <e-grid-rowdropsettings targetID="GridOrdered"></e-grid-rowdropsettings>

                <e-grid-columns>

                    <e-grid-column field="Orden" headerText="Orden" visible="false" textAlign="Right" isPrimaryKey="true" width="120"></e-grid-column>

                    <e-grid-column field="Cliente" headerText="Cliente" width="200"></e-grid-column>

                    <e-grid-column field="Direccion" headerText="Dirección" width="200"></e-grid-column>

                </e-grid-columns>

</ejs-grid>

 @{

 List<object> toolbarItems = new List<object>();

 toolbarItems.Add("ExcelExport");

 toolbarItems.Add("Search");

 }

<ejs-grid id="GridOrdered" dataSource="Model.OrderedList"

                      toolbar="toolbarItems"

                      allowRowDragAndDrop="true"

                      allowSelection="true"

                      allowPaging="true">

                <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>

                <e-grid-pagesettings pageCount="1" pageSize="12"></e-grid-pagesettings>

                <e-grid-rowdropsettings targetID="GridUnOrdered"></e-grid-rowdropsettings>

                <e-grid-columns>

                    <e-grid-column field="Orden" headerText="Orden" visible="false" textAlign="Right" isPrimaryKey="true" width="120"></e-grid-column>

                    <e-grid-column field="Cliente" headerText="Cliente" width="200"></e-grid-column>

                    <e-grid-column field="Direccion" headerText="Dirección" width="200"></e-grid-column>

                </e-grid-columns>

</ejs-grid>

<script>

     document.getElementById("saveButton").addEventListener('click', function () {

        var DestObj = document.getElementById("GridOrdered").ej2_instances[0];

        console.log(DestObj.dataSource);

    });

</script> 

[Balaji Sekar]

Hi Mohd, 

 

Greetings from the Syncfusion support. 

 

By default, we have provided a support drag and drop in Grid UI alone. If you want to remove the dragged row from source Grid we suggest you to use the below way to achieve your requirement.  

  

In the below code example, we have bind the rowDrop event for both source and destination Grid and perform the action based on the row drop event arguments. 

 

<div class="col-lg-6"> 

        <ejs-grid id="Grid" dataSource=”Model.UnOrderList” allowRowDragAndDrop="true" rowDrop="rowDrop" allowSelection="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" allowSorting="true"> 

             

            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 

            <e-grid-pagesettings pageSize="4"></e-grid-pagesettings> 

            <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings> 

            <e-grid-pagesettings pageCount="1" pageSize="12"></e-grid-pagesettings> 

            <e-grid-rowdropsettings targetID="DestGrid"></e-grid-rowdropsettings> 

            <e-grid-columns> 

                <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

                <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 

                <e-grid-column field="OrderDate" headerText=" Order Date" format="yMd" width="130" editType="datepickeredit"></e-grid-column> 

            </e-grid-columns> 

        </ejs-grid> 

    </div> 

 

    <div class="col-lg-6"> 

        <ejs-grid id="DestGrid" dataSource=”Model.OrderList” allowRowDragAndDrop="true" rowDrop="rowDropdest" allowSelection="true" allowPaging="true"> 

  

            <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings> 

            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 

 

            <e-grid-rowdropsettings targetID="Grid"></e-grid-rowdropsettings> 

            <e-grid-columns> 

                <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" isPrimaryKey="true" width="120"></e-grid-column> 

                <e-grid-column field="CustomerID" headerText="Customer ID" width="135"></e-grid-column> 

                <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="130"></e-grid-column> 

            </e-grid-columns> 

        </ejs-grid> 

    </div> 

</div> 

<script> 

    function rowDrop(args) { 

        args.cancel = true; 

        // delete record from source grid and add to dest grid 

        document.getElementById('Grid').ej2_instances[0].deleteRecord("OrderID", args.data[0]); 

        document.getElementById('DestGrid').ej2_instances[0].addRecord(args.data[0]); 

    } 

 

    function rowDropdest(args) { 

        args.cancel = true; 

        // delete record from destination grid and add to source grid 

        document.getElementById('DestGrid').ej2_instances[0].deleteRecord("OrderID", args.data[0]); 

        document.getElementById('Grid').ej2_instances[0].addRecord(args.data[0]); 

    } 

</script> 

 

Note : If you are using remote then we suggest you to make your own AJAX and perform the actions in rowDrop event.  

 

If we misunderstood your query then share more details about your requirement that will helpful for us to validate and provide a better solution as soon as possible. 

 

Regards, 

Balaji Sekar