Multiple jqGrid on one page, how to identify which grid on when click on "add" button on navigator?

Question

A page like http://trirand.com/blog/jqgrid/jqgrid.html Hierarchy example, but more complex, there are 'add' buttons for every grid, when user click on 'add' button, we need to handle added data.

We also refer page http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditing.htm for local editing, related code is below:

jqGrid('navGrid','#pager',{},editSettings,addSettings,delSettings,
    {multipleSearch:true,overlay:false, null});

addSettings = {
   //recreateForm:true,
  jqModal:false,
  reloadAfterSubmit:false,
  savekey: [true,13],
  closeOnEscape:true,
  closeAfterAdd:true,
  onclickSubmit: function (options, postdata) {
      // expected to find grid id in options, but didn't find it.
  }，

},

Melonie

Answer 1

I hope that I understand your question correctly. You create multiple grids on the page and add navigator bar to the grids. You problem probably was in the old code of the referenced demo which I prepared for the old answer.

The answer was written at the time of jqGrid version 3.8.2. Later the code of form editing was changes so that this will be set on the DOM of the current editing grid inside of onclickSubmit like inside of all other jqGrid callbacks. So one can use $(this) to access to the grid. More recent demo created for jqGrid 4.4.1, I posted for the answer.

I looked through the code of local format editing from two referenced answers, but the current version of jqGrid (4.5.4) contains more changes which required to adjusting the code. So I modified my demo one more time. The resulting demo seems me working correctly in jqGrid 4.5.4. It's code I includes below:

var mydata = [
        {id: "1",  invdate: "2013-11-01", name: "test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00"},
        {id: "2",  invdate: "2013-11-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00"},
        {id: "3",  invdate: "2013-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00"},
        {id: "4",  invdate: "2013-11-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00"},
        {id: "5",  invdate: "2013-11-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00"},
        {id: "6",  invdate: "2013-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00"},
        {id: "7",  invdate: "2013-11-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00"},
        {id: "8",  invdate: "2013-11-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00"},
        {id: "9",  invdate: "2013-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00"},
        {id: "10", invdate: "2013-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00"},
        {id: "11", invdate: "2013-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00"},
        {id: "12", invdate: "2013-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00"}
    ],
    onclickSubmitLocal = function (options, postdata) {
        var $this = $(this), p = $(this).jqGrid("getGridParam"),// p = this.p,
            idname = p.prmNames.id,
            id = this.id,
            idInPostdata = id + "_id",
            rowid = postdata[idInPostdata],
            addMode = rowid === "_empty",
            oldValueOfSortColumn,
            newId,
            idOfTreeParentNode;

        // postdata has row id property with another name. we fix it:
        if (addMode) {
            // generate new id
            newId = $.jgrid.randId();
            while ($("#" + newId).length !== 0) {
                newId = $.jgrid.randId();
            }
            postdata[idname] = String(newId);
        } else if (postdata[idname] === undefined) {
            // set id property only if the property not exist
            postdata[idname] = rowid;
        }
        delete postdata[idInPostdata];

        // prepare postdata for tree grid
        if (p.treeGrid === true) {
            if (addMode) {
                idOfTreeParentNode = p.treeGridModel === "adjacency" ? p.treeReader.parent_id_field : "parent_id";
                postdata[idOfTreeParentNode] = p.selrow;
            }

            $.each(p.treeReader, function () {
                if (postdata.hasOwnProperty(this)) {
                    delete postdata[this];
                }
            });
        }

        // decode data if there encoded with autoencode
        if (p.autoencode) {
            $.each(postdata, function (n, v) {
                postdata[n] = $.jgrid.htmlDecode(v); // TODO: some columns could be skipped
            });
        }

        // save old value from the sorted column
        oldValueOfSortColumn = p.sortname === "" ? undefined : $this.jqGrid("getCell", rowid, p.sortname);

        // save the data in the grid
        if (p.treeGrid === true) {
            if (addMode) {
                $this.jqGrid("addChildNode", newId, p.selrow, postdata);
            } else {
                $this.jqGrid("setTreeRow", rowid, postdata);
            }
        } else {
            if (addMode) {
                $this.jqGrid("addRowData", newId, postdata, options.addedrow);
            } else {
                $this.jqGrid("setRowData", rowid, postdata);
            }
        }

        if ((addMode && options.closeAfterAdd) || (!addMode && options.closeAfterEdit)) {
            // close the edit/add dialog
            $.jgrid.hideModal("#editmod" + $.jgrid.jqID(id), {
                gb: "#gbox_" + $.jgrid.jqID(id),
                jqm: options.jqModal,
                onClose: options.onClose
            });
        }

        if (postdata[p.sortname] !== oldValueOfSortColumn) {
            // if the data are changed in the column by which are currently sorted
            // we need resort the grid
            setTimeout(function () {
                $this.trigger("reloadGrid", [{current: true}]);
            }, 100);
        }

        // !!! the most important step: skip ajax request to the server
        options.processing = true;
        return {};
    },
    editSettings = {
        //recreateForm: true,
        jqModal: false,
        reloadAfterSubmit: false,
        closeOnEscape: true,
        savekey: [true, 13],
        closeAfterEdit: true,
        onclickSubmit: onclickSubmitLocal
    },
    addSettings = {
        //recreateForm: true,
        jqModal: false,
        reloadAfterSubmit: false,
        savekey: [true, 13],
        closeOnEscape: true,
        closeAfterAdd: true,
        onclickSubmit: onclickSubmitLocal
    },
    delSettings = {
        // because I use "local" data I don't want to send the changes to the server
        // so I use "processing:true" setting and delete the row manually in onclickSubmit
        onclickSubmit: function (options, rowid) {
            var $this = $(this), id = $.jgrid.jqID(this.id), p = this.p,
                newPage = p.page;

            // reset the value of processing option to true to
            // skip the ajax request to "clientArray".
            options.processing = true;

            // delete the row
            $this.jqGrid("delRowData", rowid);
            if (p.treeGrid) {
                $this.jqGrid("delTreeNode", rowid);
            } else {
                $this.jqGrid("delRowData", rowid);
            }
            $.jgrid.hideModal("#delmod" + id, {
                gb: "#gbox_" + id,
                jqm: options.jqModal,
                onClose: options.onClose
            });

            if (p.lastpage > 1) {// on the multipage grid reload the grid
                if (p.reccount === 0 && newPage === p.lastpage) {
                    // if after deliting there are no rows on the current page
                    // which is the last page of the grid
                    newPage--; // go to the previous page
                }
                // reload grid to make the row from the next page visable.
                $this.trigger("reloadGrid", [{page: newPage}]);
            }

            return true;
        },
        processing: true
    },
    initDateEdit = function (elem) {
        setTimeout(function () {
            $(elem).datepicker({
                dateFormat: "dd-M-yy",
                showOn: "button",
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                showWeek: true
            });
        }, 50);
    },
    initDateSearch = function (elem) {
        setTimeout(function () {
            $(elem).datepicker({
                dateFormat: "dd-M-yy",
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                showWeek: true
            });
        }, 50);
    },
    removeTheOptionAll = function (elem) {
        // We use "value" in the searchoption property of some columns of the colModel.
        // The option {"": "All"} neams "No filter" and should be displayed only
        // in the searching toolbar and not in the searching dialog.
        // So we use dataInit:removeTheOptionAll inside of searchoptions to remove
        // the option {"": "All"} in case of the searching dialog
        if (elem != null && typeof elem.id === "string") {
            if (elem.id.substr(0, 3) !== "gs_") {
                // we are NOT in the searching bar
                $(elem).find("option[value=\"\"]").remove();
            }
        }
    };

$("#list").jqGrid({
    datatype: "local",
    data: mydata,
    colNames: ["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
    colModel: [
        {name: "name", width: 60, editrules: {required: true}},
        {name: "invdate", width: 80, align: "center", sorttype: "date",
            formatter: "date", formatoptions: {newformat: "d-M-Y"},
            editoptions: {dataInit: initDateEdit, size: 14},
            searchoptions: {dataInit: initDateSearch}},
        {name: "amount", width: 70, formatter: "number", align: "right"},
        {name: "tax", width: 50, formatter: "number", align: "right"},
        {name: "total", width: 60, formatter: "number", align: "right"},
        {name: "closed", width: 70, align: "center", formatter: "checkbox",
            edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
            stype: "select",
            searchoptions: {
                sopt: ["eq", "ne"],
                value: ":All;true:Yes;false:No",
                dataInit: removeTheOptionAll
            }},
        {name: "ship_via", width: 100, align: "center", formatter: "select",
            edittype: "select", editoptions: {value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "TN"},
            stype: "select",
            searchoptions: {
                sopt: ["eq", "ne"],
                value: ":All;FE:FedEx;TN:TNT;IN:Intim",
                dataInit: removeTheOptionAll
            }},
        {name: "note", width: 60, sortable: false, edittype: "textarea"}
    ],
    cmTemplate: {editable: true, searchoptions: {clearSearch: false }},
    rowNum: 10,
    rowList: [5, 10, 20],
    pager: "#pager",
    gridview: true,
    rownumbers: true,
    autoencode: true,
    ignoreCase: true,
    sortname: "invdate",
    viewrecords: true,
    sortorder: "desc",
    caption: "Demonstrates implementating of local form editing",
    height: "100%",
    editurl: "clientArray",
    ondblClickRow: function (rowid) {
        var $this = $(this), p = this.p;
        if (p.selrow !== rowid) {
            // prevent the row from be unselected on double-click
            // the implementation is for "multiselect:false" which we use,
            // but one can easy modify the code for "multiselect:true"
            $this.jqGrid("setSelection", rowid);
        }
        $this.jqGrid("editGridRow", rowid, editSettings);
    }
}).jqGrid("navGrid", "#pager", {}, editSettings, addSettings, delSettings, {
    multipleSearch: true,
    overlay: false,
    onClose: function () {
        // if we close the search dialog during the datapicker are opened
        // the datepicker will stay opened. To fix this we have to hide
        // the div used by datepicker
        $("div#ui-datepicker-div.ui-datepicker").hide();
    }
}).jqGrid("filterToolbar", { defaultSearch: "cn" });

Barathea

Could you please see the following link and help. #46238037 – Sikora

@santoshM: You formulate your question very unclear. All what you wrote could be interpreted in different ways. One can implement custom buttons and custom forms in a lot of different ways. You should try to include JavaScript code (at least fragments) to be more exact. beforeSubmit is the callback of editGridRow and it's not clear, whether you use editGridRow directly or indirectly (by navGrid, formatter: "actions" and so on). – Barathea

Thank for the continuous help @Oleg. I have commented back to Tom's answer on the question page. – Sikora

@santoshM: You are welcome! You still don't posted any JavaScript code, which would show how you use jqGrid. I still don't understand where you have a problem. You wrote "it's impossible to make my custom form inline with jqgrid" without posting of any picture, and one don't understand the problem too. I recommend you to modify the text of your question and insert more information. – Barathea

I have updated the question. Hope that would be sufficient to understand the context. Most of the code is written in our own customized framework which may be not understandable. – Sikora

@santoshM: You main question is about beforeSubmit callback, which is callback of editGridRow method. The code, which you posted don't contain any call of editGridRow and I still don't understand what you mean. Probably you use jqGrid methods inside of save_form_data? – Barathea

save_form_data() is completely out of scope from jqgrid, no where jqgrid related code is written. It get's the formObj, extracts it and saves it. editGridRow is not defined in my jqgrid definition. – Sikora

@santoshM: Then I don't understand anything. I suppose now that you wrote beforeSubmit, but you meant something other as the beforeSubmit callback of form editing (the callback of editGridRow). The code, which you posed in your question practically don't contains any jqGrid methods. I don't understand how you use jqGrid at all. – Barathea

The jqgrid is only used to show the data and for a few default functionalities like grid refresh, delete and view. Add and edit are completely out of jqgrid's control now. Add/edit custom buttons are added with a click event, which opens a custom on click. The opened form is independent of jqgrid and in case of edit it gets data from db instantly. Now submit of the form hits a service which save the data. In this case, even though I added a beforeSubmit to my jqgrid, this form is not aware of it. I want to make my custom form inline with the jqgrid and identify the events assigned to it – Sikora

@Sikora Sorry, but I can't follow you. You wrote that you don't use editing features of jqGrid. How could jqGrid knows when you submit the changes to your server? You wrote, that you added beforeSubmit somewhere in your code. It's sure that you placed it in the wrong place because yoo don't use editing. The usage of beforeSubmit has no sense if you don't use form editing. In the same way you wrote about another problem: "I want to make my custom form inline with the jqgrid" without posting pictures or HTML fragments of your code. It's unclear, what problem exactly you have. – Barathea

Thanks a lot for your patience and interest in helping. As you wrote, we are not using the editing features of jgGrid and as I mentioned above, the jqGrid is only used for listing the data. Now when I submit the changes to server, jqGrid is absolutely unaware. The only thing jqgrid does is, showing the data which is on db. Note: Recently we replaced the jqgrid edit/add forms with our own custom forms. Earlier we wrote some validations with beforeSubmit event which were working fine with default(add/edit) forms. Now I want to apply the same validations to the replaced custom forms. – Sikora