cannot read the new data in edit mode in the grid

[ryan paulParticipant]

I am having a problem in edit mode.
When i am changing data in the grid, i cannot get the new data using this code until I navigate to the other column or until i press enter.

var dataRecord = $("#MainGrid").jqxGrid('getrowdata', row); 
var obj = { Field1: dataRecord.Field1, ID: dataRecord.ID };

this is my full source code:

$(function () {
    $("#MainGrid").jqxGrid({ width: 686, theme: theme, pageable: true, pagesize: 10, autoheight: true, sortable: true, altrows: false, editable: true, columnsresize: true,
        columns: [
    { text: 'Field1', datafield: 'Field1', width: 506, editable: true },
    { text: 'Field2', datafield: 'Field2', width: 120, editable: false },
            {
                text: '', datafield: 'Ok', columntype: 'button', width: 60,
                cellsrenderer: function () { return "Submit" },
                buttonclick: function (row) {
                    var dataRecord = $("#MainGrid").jqxGrid('getrowdata', row);
                    var obj = { Field1: dataRecord.Field1, ID: dataRecord.ID };
                    var jsonData = JSON.stringify(obj);
                    $.ajax({ url: 'SamplePage.aspx/SubmitData', dataType: 'json', contentType: 'application/json; charset=utf-8', type: 'POST', async: false, data: jsonData,
                        success: function (data) {
                            var temp = data.d;
                            if (temp.IsSuccess) {
                                PopulateGrid();
                            }                            
                        }
                    });
                }
            }
	]
    });
});
$(function () {
    PopulateGrid();
});
var PopulateGrid = function () {
    $.ajax({ url: 'SamplePage.aspx/GetData', dataType: 'json', contentType: 'application/json; charset=utf-8', type: 'POST', async: false,
        success: function (data) {
            var temp = JSON.parse(data.d);
            if (temp.IsSuccess) {
                var gridSource = { id: 'ID', datatype: 'json', localdata: temp.JsonString,
                    datafields: [
                    { name: 'ID' },
                    { name: 'Field1' },
                    { name: 'Field2' }
                ]
                };
                $("#MainGrid").jqxGrid({ source: gridSource });
            }            
        }
    });
};

is there anyway to solve this?

[Peter StoevKeymaster]

Hi ryan paul,

While the Grid is in edit mode, the cell’s value will not be changed. You will be able to edit it through the editor. When you exit the edit mode, it will be either changed or not depending on whether the changes are confirmed or cancelled by pressing the “Esc” key.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[ryan paulParticipant]

is there no other way to programmatically made the changes when pressing the button of the row?

[ryan paulParticipant]

hi peter, is there any ways to solve this?

[Peter StoevKeymaster]

Hi ryan paul,

You cannot get the new data of the edited row/cell until it is in edit mode. That is the idea of editing to edit something or to cancel it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[ryan paulParticipant]

hi peter,

is there no way to programmatically leave the edit mode and let the data will remain,
some user will not press the enter key before clicking the button, they will automatically click the button when they are finished in entering data.

regards,
ryan

[Peter StoevKeymaster]

Hi ryan paul,

You can use the “endcelledit ” method.

// @param row index
// @param column datafield.
// @param Boolean. – “true” cancels the changes, “false” confirms the changes.
$(“#jqxGrid”).jqxGrid(‘endcelledit’, 0, “firstname”, false);

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts