How to reorder rows using drag and drop inside same grid and change value in row in batchedit grid
var dropSelectedRowIndex = [];
let gObj = this; //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');
if (targetRow == null) return;
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);
//Corrects the order of the row.
let start = Math.min(startRowIndex, targetRowIndex);
let end = Math.max(startRowIndex, targetRowIndex);
let grid = this.element.ej2_instances[0];
for (let i = start; i <= end; i++) {
//grid.updateCell(i, 'Ordem', i + 1);
gObj.currentViewData[i].Ordem = i + 1;
}
gObj.contentModule.refreshContentRows();
dropSelectedRowIndex.push(targetRowIndex);
if (gObj.sortSettings.columns.length > 0) {
args.cancel = true;
}
if (dropSelectedRowIndex.length > 0) {
gObj.clearSelection();
gObj.selectRows(dropSelectedRowIndex);
}
}
}
}
}
|
Based on your query, we would like to inform you that by default in EJ2 Grid, while Drag and Drop the rows in the Grid, the changes are made only in the Grid UI and it will not affect the database. |
I know. I want to reorder visually the rows, and ONLY THEN, mark some cells of eordered rows as edited by user (if it was him as edited some values), so the user can submit the changes to server.
|
If you have to preform the Sorting after the row reordering, It will change the row order because the sorting actions need to be performed based on the Grid database, in this case we cannot maintain that row reorder. This is our default behavior. |
I though i should had a sorted column to have the rows ordered. if i have to give up the sorted column to achieve my intentions, it's ok.
|
In your provided information, we
could see that you have used a UpdateCell method, By default in EJ2
Grid editing feature requires a primary key column(unique column) for CRUD
operations. Because all the CRUD actions in the grid component are done based
on the primaryKey. So please ensure this in your sample and use a
unique column in your dataSource as primaryKey column to perform the CRUD
operations. Refer the below document for more information. |
|
function
DetailDataBoundAmostrasOperacoes(e) { |
| As a Database constrain, we cannot able to change the primaryKey column(unique column) value dynamically. The same behavior in Grid also. By default, all the CRUD actions in the grid component are done based on the primaryKey value. So, we are unable to change the primaryKey value. |
I dont want to change primaryKey. I only want a way to the user reorder some rows, by using Drag and Drop and ONLY THEN change some values in those rows, so i can mark them as edit by user, so the user can submit them to server as if was him who made the changes.
Like this, but automatically:
