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

How to reorder rows using drag and drop inside same grid

Thread ID:

Created:

Updated:

Platform:

Replies:

149580 Nov 30,2019 04:10 AM UTC Dec 31,2019 10:28 AM UTC ASP.NET MVC - EJ 2 5
loading
Tags: Grid
Daniel
Asked On November 30, 2019 04:10 AM UTC

Hi!

I'm searching documentations or an example code using mvc to reorder rows using drag and drop inside the same grid. I only found for other technology:


For now, I only now that I need to enable the "AllowRowDragAndDrop" and that's all.

Thanks, regards!

Thavasianand Sankaranarayanan [Syncfusion]
Replied On December 2, 2019 11:28 AM UTC

Hi Daniel, 

Greetings from syncfusion support 

We have analyzed your query that reorder rows using drag and drop inside same grid in MVC platform. We suggest you to please follow the below demos link and Video demo to achieve your requirement. And also we have logged the task for documentation creation in MVC platform and that will be published online ASAP. 



Regards 
Thavasianand S. 


Daniel
Replied On December 12, 2019 06:19 PM UTC

Hi!

Sorry, I did not see your response.

I already added the AllowRowDragAndDrop property but the row is returned to the original position. Is it missing something? I need to drag and save the position of that row.

Thanks, regards! I attached a video of that issue.   

Attachment: ExampleNotWorkingDrag_a3efd2ca.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On December 13, 2019 09:35 AM UTC

Hi Daniel, 
 
Query : Drag and drop not working in the grid. 
 
We have analyzed your video. And saw that you are using Sorting in the grid. The default behavior of allowDragAndDrop is to work fine on non sorted grid columns. If you are using Sorting means you need to follow the another method. Please refer the below code snippet and sample for reference. In the sample, we are dynamically drag and drop the rows, by using selected and target row indexes. To achieve this we are using RowDrop event. 
 
Index.cshtml 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).RowDrop("RowDrop").AllowSorting(true).Columns(col => 
{ 
          … 
}). AllowRowDragAndDrop().Render() 
    <script> 
        function RowDrop(args) { 
            var dropSelectedRowIndex = []; 
            let gObj = document.getElementById('Grid').ej2_instances[0]; 
            let seletedRowIndexes = gObj.getSelectedRowIndexes(); 
            if (gObj.sortSettings.columns.length > 0 ) { 
            let startedRow = args.rows[0]; 
            let startRowIndex = parseInt(startedRow.getAttribute("aria-rowindex"), 10);          //get the index of selected row 
            if (!args.target) { 
                return 
            } 
            let targetRow = args.target.closest('tr'); 
            let targetRowIndex = targetRow.rowIndex;                                                                       //get the target row index where the row should place 
            gObj.getContentTable().querySelector('tbody').insertBefore(startedRow, targetRow); 
 
            if (!ej.base.isNullOrUndefined(targetRow.nextElementSibling)) { 
                let currentIndex = targetRow.rowIndex; 
                if (currentIndex <= startedRow.rowIndex) {                                                                   // check with selected index and target index 
                    gObj.getContentTable().querySelector('tbody').insertBefore(startedRow, targetRow); 
                } else { 
                    gObj.getContentTable().querySelector('tbody').insertBefore(startedRow, targetRow.nextElementSibling); 
            } 
            } else { 
                    gObj.getContentTable().querySelector('tbody').insertBefore(targetRow, startedRow); 
            } 
 
            let startRowObj = gObj.getRowObjectFromUID(startedRow.getAttribute('data-uid')); 
            let targetRowObj = gObj.getRowObjectFromUID(targetRow.getAttribute('data-uid')) 
            for (let i = 0, len = gObj.currentViewData.length; i < len; i++) { 
            let getDataByField = gObj.currentViewData[i];                                                //fetch the selected row using index in grid current view datas 
                if (gObj.sortSettings.columns.length > 0) { 
                sortedCurrentViewData = gObj.currentViewData; 
                sortedCurrentViewData.splice(targetRowIndex, 0, sortedCurrentViewData.splice(startRowIndex, 1)[0]);   // take the target row using splice                             gObj.rowDragAndDropModule.removeBorder(targetRow); 
                gObj.contentModule.refreshContentRows(); 
                dropSelectedRowIndex.push(targetRowIndex); 
                    if (gObj.sortSettings.columns.length > 0) { 
                    args.cancel = true; 
            } 
                    if (dropSelectedRowIndex.length > 0) { 
                    gObj.clearSelection(); 
                gObj.selectRows(dropSelectedRowIndex); 
            } 
            return; 
        } 
    } 
    </script> 




Regards 
Thavasianand S. 


Daniel
Replied On December 30, 2019 07:41 PM UTC

Thanks Sankaranarayanan, this works... but there is still missing the way to save the order.

I'm thinking of adding a column to the SQL table where I will save the index of each row. After each change, I want to save the indexes.

What will be the correct way to save the indexes after each drop/change?

Thanks, regards!

Thavasianand Sankaranarayanan [Syncfusion]
Replied On December 31, 2019 10:28 AM UTC

Hi Daniel, 
 
Query : Save the drag and drop indexes to SQL table 

We have analyzed your query and suggest to use the following way to achieve the requirement. In the RowDrop event, we can get the indexes of the targeted rows separately, and we need to call an ajax post to the server to save the index changes to the corresponding rows. lease refer the below code snippet. 

Index.cshtml 
 
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).RowDrop("RowDrop").AllowSorting(true).Columns(col =>  
{  
          …  
}). AllowRowDragAndDrop().Render()  
    <script>  
        function RowDrop(args) {  
            var dropSelectedRowIndex = [];  
            if (gObj.sortSettings.columns.length > 0 ) {  
              … 
            let targetRow = args.target.closest('tr');  
            let targetRowIndex = targetRow.rowIndex;          // you can get the target row index                                                               
            gObj.getContentTable().querySelector('tbody').insertBefore(startedRow, targetRow);  
  
            if (!ej.base.isNullOrUndefined(targetRow.nextElementSibling)) {  
                let currentIndex = targetRow.rowIndex;  
                if (currentIndex <= startedRow.rowIndex) {                                                                  
           … 
            } else {  
                    gObj.getContentTable().querySelector('tbody').insertBefore(targetRow, startedRow);  
            }  
  
        }  
        // Here you can call ajax post to send the details to server 
        var ajax = new ej.base.Ajax({ 
                        url: "@Url.Action("Editpartial", "Home")",  
                        type: "POST", 
                        contentType: "application/json", 
                        data: JSON.stringify({ value: targetRowIndex }) 
                    }); 
                    ajax.send(). 
 
    }  
    </script>  
.  
                             . 

By the above way you can send the targeted index in a Ajax post and save it in the SQL. 

Regards 
Thavasianand S. 


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