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. (Last updated on: June 24, 2019).
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 May 1,2019 04:54 PM UTC ASP.NET Core - EJ 2 5
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. 


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