[Ahud07]

I need to be able to reorder the rows in my jqgrid as well as resetting the row ID when reordering. I can get it to drag and drop(Line 40) but it does not reset the row ID and I need the row ID to change with it because I use it in other parts of the code. I made the move up and move down buttons because I thought that would be easier but I cannot find anything online about reordering the rows.

var tzOffsetMillis = new Date().getTimezoneOffset() * 60000;

jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        url: '/Presentations/GetSecList',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Section Name', 'Actions'],
        colModel: [
          { name: 'Name', index: 'Name', width: 150, align: 'left', resizable: false, sortable: false, searchoptions: { sopt: ['eq', 'ne', 'cn']} },
          { name: 'Actions', index: 'Actions', width: 175, align: 'center', resizable: false, sortable: false }
          ],
        pager: jQuery('#pager'),
        rowNum: 20,
        rowList: [20],
        imgpath: '',
        height: "100%",
        caption: 'All Sections',
        gridComplete: function () {
            var secIndices = jQuery("#list").jqGrid('getDataIDs');
            for (var i = 0; i < secIndices.length; i++) {
                var si = secIndices[i];
                ed = "<input style='height:22px;width:55px;' type='button' value='Edit' onclick=\"editSection('" + si + "');\"  />";
                rm = "<input style='height:22px;width:55px;' type='button' value='Remove' onclick=\"removeSection('" + si + "');\"  />";
                up = "<input style='height:22px;width:25px;' type='button' value='↑' onclick=\"moveUp('" + si + "');\"  />";
                dn = "<input style='height:22px;width:25px;' type='button' value='↓' onclick=\"moveDown('" + si + "');\"  />";
                //vw = "<input style='height:22px;width:55px;' type='button' value='View' onclick=\"jQuery('#list').viewSection('" + si + "');\" />";
                jQuery("#list").jqGrid('setRowData', secIndices[i], { Actions: ed + rm + up +dn});
            }
        }
    }); 

    jQuery("#list").jqGrid('navGrid', '#pager', { view: false, del: false, add: false, edit: false, searchtext: 'Search' },
                {}, /* edit settings */
                {}, /* add settings */
                {}, /* delete settings */
                {multipleSearch: true, closeOnEscape: true, closeAfterSearch: true },
                {} /* view settings */
              );
    //jQuery("#list").jqGrid('sortableRows');
    
});


function editSection(secIndex) {
    var form = document.createElement('form');
    form.setAttribute('method', 'post');
    var dest = '/Presentations/EditSection?secIndex=';
    form.setAttribute('action', dest + secIndex);
    form.setAttribute('class', 'jsform');
    document.body.appendChild(form);
    form.submit();
}

function removeSection(secIndex) {
    var form = document.createElement('form');
    form.setAttribute('method', 'post');
    var dest = '/Presentations/RemoveSection?secIndex=';
    form.setAttribute('action', dest + secIndex);
    form.setAttribute('class', 'jsform');
    document.body.appendChild(form);
    form.submit();
}

function moveUp(secIndex) {

}

function moveDown(secIndex) {

}

[Ahud07]

I figured it out here is the code:

var tzOffsetMillis = new Date().getTimezoneOffset() * 60000;

jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        url: '/Presentations/GetSecList',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Section Name', 'Actions'],
        colModel: [
          { name: 'Name', index: 'Name', width: 150, align: 'left', resizable: false, sortable: false, searchoptions: { sopt: ['eq', 'ne', 'cn']} },
          { name: 'Actions', index: 'Actions', width: 175, align: 'center', resizable: false, sortable: false }
          ],
        pager: jQuery('#pager'),
        rowNum: 20,
        rowList: [20],
        imgpath: '',
        height: "100%",
        caption: 'All Sections',
        gridComplete: function () {
            var secIndices = jQuery("#list").jqGrid('getDataIDs');
            for (var i = 0; i < secIndices.length; i++) {
                ed = "<input style='height:22px;width:55px;' type='button' value='Edit' onclick=\"editSection('" + i + "');\"  />";
                rm = "<input style='height:22px;width:55px;' type='button' value='Remove' onclick=\"removeSection('" + i + "');\"  />";
                up = "<input style='height:22px;width:25px;' type='button' value='↑' onclick=\"move(" + i + ", -1, '"+ secIndices.length +"');\"  />";
                dn = "<input style='height:22px;width:25px;' type='button' value='↓' onclick=\"move(" + i + ", +1, '"+ secIndices.length +"');\"  />";
                //vw = "<input style='height:22px;width:55px;' type='button' value='View' onclick=\"jQuery('#list').viewSection('" + si + "');\" />";
                jQuery("#list").jqGrid('setRowData', secIndices[i], { Actions: ed + rm + up +dn});
            }
        }
    }); 

    jQuery("#list").jqGrid('navGrid', '#pager', { view: false, del: false, add: false, edit: false, searchtext: 'Search' },
                {}, /* edit settings */
                {}, /* add settings */
                {}, /* delete settings */
                {multipleSearch: true, closeOnEscape: true, closeAfterSearch: true },
                {} /* view settings */
              );
    //jQuery("#list").jqGrid('sortableRows');
    
});


function editSection(secIndex) {
    var form = document.createElement('form');
    form.setAttribute('method', 'post');
    var dest = '/Presentations/EditSection?secIndex=';
    form.setAttribute('action', dest + secIndex);
    form.setAttribute('class', 'jsform');
    document.body.appendChild(form);
    form.submit();
}

function removeSection(secIndex) {
    var form = document.createElement('form');
    form.setAttribute('method', 'post');
    var dest = '/Presentations/RemoveSection?secIndex=';
    form.setAttribute('action', dest + secIndex);
    form.setAttribute('class', 'jsform');
    document.body.appendChild(form);
    form.submit();
}

function move(secIndex, step, secCount) {

    if (secIndex == 0 && step == -1) {
        return;
    }

    else if (secIndex == secCount - 1 && step == +1) {
        return;
    }

    var newSecIndex = secIndex + step;

    $.post("/Presentations/ReorderSections", { "secIndex": secIndex, "newSecIndex": newSecIndex },
                function () {
                    jQuery("#list").trigger('reloadGrid');
                });


}

//Reorders sections within a presentation
[HttpPost]
public void ReorderSections(int secIndex, int newSecIndex)
{
   var editState = PresentationEditState.GetPresEditState(this.HttpContext);
   editState.ReorderSection(secIndex, newSecIndex);
   editState.SaveUpdate(this.HttpContext);
}

public void ReorderSection(int secIndex, int newSecIndex)
{
  var tmp = Sections[secIndex];
  Sections[secIndex] = Sections[newSecIndex];
  Sections[newSecIndex] = tmp;
}