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');
});

score 1 · Accepted Answer · edited May 23 '17 at 11:56

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.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 22 '13 at 20:50

Oleg

220,925
34
403
798

Thanks Oleg, sorry i have been out of commission for a few weeks, Form editing fits much better for my requirements. I will give it a try and hope to accomplish my goal. – Bino Mar 10 '13 at 15:45
I adapted your answer however I have a two issues that need attention one is I set the addsettings closeafterAdd:false and added clearAfterAdd:true and beforeSubmit:CheckValues for validation both options are not firing. Do you have any idea of what I am doing wrong. Thanks for your patience with this newbie. :-) – Bino Mar 21 '13 at 15:22
@Bino: Which from my answers you adapted? Do you mean [this one](http://stackoverflow.com/a/12296186/315935)? You should describe more exactly what you do. You should better open new question, post the current "adapted" code which you use with some test data and described detailed the problem which you have. – Oleg Mar 21 '13 at 15:42

JQGrid Save and Continue form edit

1 Answers1