jqGrid inline editing not working after adding new row

Question

I'm currently using free-jqGrid version 4.14.1 (using cdn hyperlink). I would like to let the users add a new row with their input values, and edit the row if they want to make any change by clicking the row. For adding new row, I created an adding button (not using jqGrid pager).

I'm now facing two different issues:

1) I refered this demo for inline editting. According to this demo code, I need to use the line

grid.jqGrid('restoreRow', lastSelection);

However, with this line, everytime I am adding new row, the previous row is deleted and only newly added row is displayed. Please check this fiddle .

2) Due to 1), I commented out that line(I don't think I supposed to do that for proper functioning), and tried to run. The previously added rows remain after adding new row, but all rows displayed is showing in textbox like this (fiddle) :

What I would like to have is only after user clicks the row to modify, it changes to the textboxes like the guriddo demo.

I have not found any post related to this issues. Is there anyone please help me??

============================================

Add:

I started with some base table value just for verification. The base data rows were functioning as I wanted (click the row for modification), but the new rows were not. It seems like new rows are not selected and not focused when I click, and not exiting the edit mode after hitting enter key..

============================================

============================================

The below is the code of grid just for reference:

$(document).ready(function () {

        Load_Bin();

        $('#Bin-QtyBin').focus();
        $('#btnEnter-Bin').click(function () {

                var valNumBin = $('#Bin-numBin').val();
                //if bins are dropbox: select enabled one

                var valQtyBin = $('#Bin-QtyBin').val();


                var paramRow = {
                    rowId: "new_row",
                    initdata: {
                        numBin: valNumBin,
                        QtyPutAway: valQtyBin
                    },
                    position: "first" //"last"
                }

                $("#tbBin").jqGrid('addRow', paramRow);
                $('#Bin-numBin').val('');
                $('#Bin-QtyBin').val('');

        });
});
    var lastSelection;

    function Load_Bin() {
        var tbBinArea = $('#tbBin');
        tbBinArea.jqGrid({
            datatype: "local",
            colModel: [
                { label: 'Bin', name: 'numBin', sorttype: 'text', searchoptions: { clearSearch: true }, width: 310, editable: true },
                { label: 'Put Away Qty.', name: 'QtyPutAway', sorttype: 'number', searchoptions: { clearSearch: true }, width: 310, editable: true }],
            rowNum: 10,
            rowList: [10, 15, 30, "10000:All"],
            prmNames: {
                page: 'defaultPageNumber',
                rows: 'rowsPerPage'
            },
            //forceClientSorting: true,
            rownumbers: true,
            //autowidth: true,
            viewrecords: true,
            loadonce: true,
            multiselect: false,
            multiPageSelection: false,
            iconSet: "fontAwesome",
            pager: true,
            height: 250,
            onSelectRow: editRow, 
            searching: {
                searchOperators: true,
                defaultSearch: 'cn',
                closeOnEscape: true,
                searchOnEnter: false,
                multipleSearch: true
            }
        });

    }


    function editRow(id) {

        if (id && id !== lastSelection) {
            var grid = $("#tbBin");
            grid.jqGrid('restoreRow', lastSelection);
            grid.jqGrid('editRow', id, { keys: true });
            lastSelection = id;
        }
    };

(ps thanks to the owner of this fiddle since I was struggling to move the code to fiddle, and sorry for not addressing him/her since I lost the original answer link for that fiddle... )

Answer 1

I ended up just reload the whole grid after adding new row. It works fine, except that newly added line does not turn to edit mode since it doesn't detect whether user clicks it or not since it is already highlighted when it was created..

After creating new row, just added this code:

            var reloaddata = $('#tbBin').jqGrid("getGridParam", "data");

            $('#tbBin')
                .jqGrid('setGridParam',
                {
                    datatype: 'local',
                    data: reloaddata
                })
                .trigger("reloadGrid");