jqGrid row ordering by drag and drop

Question

Is there any option for jqGrid row ordering by drag and drop ? I would like to save the order in DB. I have checked all existing solutions relatedto jqGrid drag & drop. But, nothing is working properly.

Disperse

which jqGrid you refer to? this trirand.com/blog or this jqgrid.com/jqgrid ? – Olly

Answer 1

Here is my approach with ASP.NET MVC. But you should know that this easy to implement only if you don't have pager.

The main idea is to get all ids in your grid after drop and change item_order in your DB.

HTML

<table id="jqgTopMenu" cellpadding="0" cellspacing="0"></table>
<div id="jqgpTopMenu" style="text-align: center;"></div>

Script

$('#jqgTopMenu').jqGrid({
    url: '@Url.Action("TopMenus")',
    datatype: 'json',
    mtype: 'POST',
    colNames: ['Id', 'ItemOrder', 'Name', 'Short name'],
    colModel: [
                { name: 'Id', index: 'Id', hidden: true },
                { name: 'ItemOrder', index: 'ItemOrder', hidden: true },
                { name: 'PostName', index: 'PostName', align: 'left', width: 430 },
                { name: 'PostNameShort', index: 'PostNameShort', align: 'left', width: 500 },
    ],
});
//sort Part
$('#jqgTopMenu').jqGrid('sortableRows',
{
    update: function (e, ui) {
        var ids = $("#jqgTopMenu").jqGrid('getDataIDs');
        $.ajaxSettings.traditional = true;
        $.ajax({
            url: '@Url.Action("SortTopMenu","Admin")',
            type: 'post',
            dataType: 'json',
            data: { ids: ids },
            success: function (data) {
                $('#jqgTopMenu').trigger("reloadGrid")
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("status: " + textStatus + " Error: " + errorThrown);
            }
        });
    }
});

Controller

[HttpPost]
public JsonResult SortTopMenu(List<int> ids)
{
    return Json(_dataManager.TopMenu.Sort(ids));
}

Manager DB method

public bool Sort(List<int> ids)
{
    for (int i = 0; i < ids.Count; i++)
    {
        top_menu t = _dataContext.top_menu.FirstOrDefault(tm => tm.id == ids[i]);
        t.item_order = i;
        _dataContext.SubmitChanges();
    }
    return true;
}

Plasticity