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 |
![]() |
Tags: Grid |
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>
|
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>
.
. |
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.
This page will automatically be redirected to the sign-in page in 10 seconds.