JQGrid Save and Continue form edit

Question

I am new to using JQGrid and have searched for the solution to my problem with no success. On the form edit during addition of records, I have created and extra button called Save and Continue. My intention is that this button will save a new record to the grid clear the fields on the form and start the insert on a new one without closing the form. I am trying to using addrowdata and reload the grid but haven't hard any success. Any help will do or if there is a better way to do this I am open to it.

$(document).ready(function () {
    'use strict';
    var mydata = [{
        id: "1",
        startdate: "2007-10-01",
        name: "S008572",
        total: "210.00"
    }, {
        id: "2",
        startdate: "2007-10-02",
        name: "O008975",
        total: "320.00"
    }, {
        id: "3",
        startdate: "2007-09-01",
        name: "S990653",
        total: "430.00"

    }],
        $grid = $("#list"),
        initDateEdit = function (elem) {
            $(elem).datepicker({
                dateFormat: 'dd-M-yy',
                autoSize: true,
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                showWeek: true
            });
        },
        numberTemplate = {
            formatter: 'number',
            align: 'right',
            sorttype: 'number',
            editrules: {
                number: true,
                required: true
            },
            searchoptions: {
                sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni']
            }
        };

    $grid.jqGrid({
        datatype: 'local',
        data: mydata,
        colNames: ['Client', 'Date', 'Total'],
        colModel: [{
            name: 'name',
            index: 'name',
            align: 'center',
            editable: true,
            width: 65,
            editrules: {
                required: true
            }
        }, {
            name: 'startdate',
            index: 'startdate',
            width: 80,
            align: 'center',
            sorttype: 'date',
            formatter: 'date',
            formatoptions: {newformat: 'd-M-Y'},
            editable: true,
            datefmt: 'd-M-Y',
            editoptions: {
                dataInit: initDateEdit
            }
        }, {
            name: 'total',
            index: 'total',
            width: 60,
            template: numberTemplate
        }],
        rowNum: 10,
        rowList: [5, 10, 20],
        pager: '#pager',
        gridview: true,
        rownumbers: true,
        autoencode: true,
        ignoreCase: true,
        sortname: 'startdate',
        viewrecords: true,
        sortorder: 'desc',
        shrinkToFit: false,
        height: '100%',
        caption: 'Demonstrate how to implement searching on Enter'
    });
    $.extend($.jgrid.edit, {
        bSubmit: "Save and Close",
        bCancel: "Cancel",
        width: 370,
        recreateForm: true,
        beforeShowForm: function () {
            $('<a href="#">Save and Continue<span class="ui-icon ui-icon-disk"></span></a>')
                .click(function () {
                alert("click!");
                    var id = $.Guid.New();
                    var newRowData= [{"id":id,"startdate": @startdate,"total":@total}];
                    $("#list").addRowData(id,newRowData);
                    $("#list").trigger("reloadGrid");
            }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
                .prependTo("#Act_Buttons>td.EditButton");
        }
    });
    $grid.jqGrid('navGrid', '#pager');
});

Answer 1

You try to use form editing with local data (datatype: "local"). jqGrid supports currently editing of local data with inline editing or cell editing modes. I would recommend you to use inline editing. For example you can use inlineNav to add alternative buttons in the navigator bar which allows to add and edit rows using inline editing methods.

If form editing are really much better for your requirements then I can forward you to the answer which is modification of another answer. The answers provide demo which shows how form editing can do be implemented for editing local data. I warn you that the code of the demo isn't short and it isn't simple. Nevertheless it works.