Question

I have a JQGrid that has the custom setup fro editing and saving row data changes I am however a little confused. The data from my select does not appear in my post and I can select another row while editing a row which changes the value of the currently selected row and throws a bug into the editing process.

$.ajax({
    type: 'POST',
    url: '/myserver/myservice.asmx/GetMyData',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    data: params
}).success(function(data) {
    clearNotSatisifiedConcessionList();
    var rowid;
    var response = data.d;
    if (response.length > 0) {
        $('p.infotext').html('<span class="ui-icon ui-icon-info"></span><strong>Information: </strong>Click a row, then click <b><i>Edit</i></b>');
        var lastsel2;
        var grid = $("#myList").jqGrid({
            datatype: "local",
            data: response,
            height: '100%',
            autowidth: true,
            hidegrid: false,
            ajaxSelectOptions: { type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json' },
            colNames: ['ID', 'Date', 'col1', 'col2', 'col3'],
            colModel: [
                { name: 'ID', index: 'ID', width: 20 },
                { name: 'Date', index: 'Date', width: 30, sorttype: 'date', formatter: 'date', formatoptions: { srcformat: 'd/m/Y', newformat: 'd/m/Y' }, datefmt: 'd/m/Y' },
                { name: 'col1', index: 'col1', width: 20 },
                { name: 'col2', index: 'col2', width: 25, sorttype: 'int' },
                { name: 'col3', index: 'col3', width: 35, sorttype: 'int' }
            ],
            pager: '#MyPager',
            rowNum: 15,
            editurl: '/myserver/myservice.asmx/SaveMyData',
            editData : {"SmodifiedByPersonRef":getCurrentUserPersonRef(), "modifiedByPostRef": getCurrentUserPostRef()},
            sortname: 'Date',
            sortorder: 'desc',
            viewrecords: true,
            gridview: true,
            caption: ''
        });
    } else {
        clearList();
        $('p.infotext').html('<span class="ui-icon ui-icon-info"></span><strong>Information: </strong>No data found');
    }
}).error(function(jqXHR, textStatus, errorThrown) {
    errorHandler(errorThrown, 'List', 'Load  List');
});

this is my list above my edit select and cancel functions

$("#editRow").click(function(event) {
    event.preventDefault();
    var selectedRow = $('#myList').jqGrid('getGridParam', 'selrow');
    if (selectedRow === null) {
        alert('No row Selected!');
    }else {
        $("#myList").jqGrid('editRow', selectedRow);
        $(".editButton").hide();
        $(".saveButton").show();
        $(".cancelButton").show();    
    }
});

$("#saveRow").click(function(event) {
    event.preventDefault();
    var selectedRow = $('#myList').jqGrid('getGridParam', 'selrow');
    var coincessionId = $("#myList").getCell(selectedRow, "ID");
    $("#myList").jqGrid('saveRow', coincessionId);
    $(".saveButton").hide();
    $(".cancelButton").hide();
    $(".editButton").show();
});

$("#cancelEdit").click(function(event) {
    event.preventDefault();
    var selectedRow = $('#myList').jqGrid('getGridParam', 'selrow');
    $("#myList").jqGrid('restoreRow', selectedRow);
    $(".saveButton").hide();
    $(".cancelButton").hide();
    $(".editButton").show();
});

has anyone done similar with a solution as trawling the internet has not yet provided me with an answer, any questions or comments please don’t hesitate to ask, but please take into account this code has many edits due to the nature of the application which this list will appear within.

Answer 1

I have added handlers that upon edit add the rowid to a window variable and this variable is checked upon cancel and save making sure the row that is currently selected is the row that was originally selected this seems to work, but is a loose work around