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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Save function for Drag and Drop Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

144219 Apr 25,2019 09:11 AM UTC Jan 13,2021 01:45 PM UTC ASP.NET Core - EJ 2 7
loading
Tags: DataGrid
Mohd Mohaimin Zakaria
Asked On April 25, 2019 09:11 AM UTC

Hi,

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 [Syncfusion]
Replied On April 26, 2019 12:39 PM UTC

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. 
 
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
Replied On April 28, 2019 04:58 PM UTC

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 [Syncfusion]
Replied On April 29, 2019 01:27 PM UTC

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. 
 
Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


Mohd Mohaimin Zakaria
Replied On April 30, 2019 08:38 AM UTC

Once the data has been populated from the right grid.
How do I save it to the database ?

Renjith Singh Rajendran [Syncfusion]
Replied On May 1, 2019 04:54 PM UTC

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
Replied On January 12, 2021 06:59 PM UTC

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 [Syncfusion]
Replied On January 13, 2021 01:45 PM UTC

 
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 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon