Multiple jqGrids in one form causing conflicts for separate initiating variables

Question

I am having multiple jqGrids in my form. Now for multiple jqGrids in my form I am achieving it by including a js file which is having its content of jqGrid definition and the contents of that js file are as under:

var MyGridData = MyGridData || (function () {
    var _args = {};
    return {
        init: function (Args){
            _args = Args;
        },
        initiateGrid: function (){
            this.fillGridSchema(_args[6]);
        },
        fillGridSchema: function (){
            $('#' + _args[0]).jqGrid({
                url: _args[1],
                datatype: "json",
                mtype: "POST",
                ajaxGridOptions: {contentType: 'application/json; charset=utf-8' },
                serializeGridData: function(postdata){
                    return JSON.stringify(postdata);
                },
                postData: {colOrder: _args[2], data: _args[3]},
                search: true,
                colNames: _args[4],
                colModel: _args[5],
                viewrecords: true,
                pager: jQuery('#pager_' + _args[7]),
                rowNum: 10,
                rowList: [10, 20, 30, 40],
                //further required jqGrid properties here for ex: sortorder, //loadonce, gridview, ignorecase, etc.
                onSelectRow: function (rowId) {
                    if(_args[8] != ''){
                        var rowData = jQuery(this).getRowData(rowId);
                        var fn = window[_args[4]];
                        if(typeof fn === 'function'){
                            fn(rowData);
                        }
                    }
                }
            });
        }
    }
}

Now for generation of a jqGrid, the following code is being called:

MyGridData.init([
    'GridName1', 'griddataurl', 'colOrder', 'postDataargs', 'colNames', 'colModel', 'ExtraParams', 'pager', 'onSelectRowfunction'
]);
MyGridData.initiateGrid();

Now the problem being faced by me is, I am filling my 2nd grid on rowselect of 1st grid, and I am programmatically making default selection of first row in my grids. So when the first row of 1st grid is being selected, then I am calling a function in onSelectRow of 1st grid so as to fill my 2nd grid as per the selection in my first grid in that function. But the problem is that the _args argument shows me the arguments of the 1st grid, when it is being called for the first time only. Second time when the onSelectRow of first grid is being called, it shows me the _args argument having the values of 2nd grid arguments instead of the arguments of the 1st grid. I am not able to find out the problem in it. Please tell me the solution to this if any one can find out the problem in it.

You wrote about **two grids**, but I see only one call of `MyGridData.init` and `MyGridData.initiateGrid`. Moreover the `onSelectRow` uses undefined `fn` variable. To tell the truth i don't like the code which you posted. It makes simple things very bad for reading and understanding. The code with `_args[5]` is very bad for reading (no names - no meaning). The method `initiateGrid` do the same as `fillGridSchema` and both **can be called only once**. Sorry, for the critic, but I think that you should full rewrite the code to make it **easy to use and to understand**. — Oleg, May 19 '15 at 07:12
By the way you use string values `'colNames', 'colModel'` as the `_args[4]` and `_args[5]` parameters so you would have `colNames: 'colNames', colModel: 'colModel'` which is absolutely wrong. The values of `colNames` and `colModel` should be arrays with the items of the corresponding type instead of strings. — Oleg, May 19 '15 at 07:16
@Oleg I am generating both of my grids by making two calls as under: `MyGridData.init([ 'GridName1', 'griddataurlforGrid1', 'colOrderforGrid1', 'postDataargsforGrid1', 'colNamesGrid1', 'colModelGrid1', 'ExtraParamsGrid1', 'pager', 'onSelectRowfunctionforGrid1' ]); MyGridData.initiateGrid();` `MyGridData.init([ 'GridName2', 'griddataurlforGrid2', 'colOrderforGrid2', 'postDataargsforGrid2', 'colNamesGrid2', 'colModelGrid2', 'ExtraParamsGrid2', 'pager', '' ]); MyGridData.initiateGrid();` — Vinit Sharma, May 19 '15 at 07:38
Consider I am providing the necessary different parameters for my each grid and I need to call onSelectRow for my first grid only and so thats why I provided ''(blank) parameter for the 2nd grid. — Vinit Sharma, May 19 '15 at 07:38
I wrote before that you use `fn` variable (not something like `_args[8]`). So the usage of `'onSelectRowfunctionforGrid1'` or `''` have no difference. Moreover `'onSelectRowfunctionforGrid1'`, ``colNamesGrid1'`, `'colModelGrid1'` and other means **strings**, but you probably have the **objects** with the corresponding names and way to use *objects instead of names* as the parameters. Isn't so? — Oleg, May 19 '15 at 07:59
Inside my `onSelectRow`, I am calling a function from a string value which consists of the function name. Now _args[8] consists of the function name which I need to call in my onSelectRow of 1st grid. Ofcourse 'onselectRowfunctionforGrid1' is the function name I need to call on row select of 1st grid and blank as I don't need to call anything for 2nd grid. All other things like ColModelGrid1, ColNamesGrid1, etc. are all pre-defined object arrays which have the grid definition data. So the only problem is of **_args** which should be different as per from whichever grid it is being called. — Vinit Sharma, May 19 '15 at 08:29
JavaScript don't work so like you describe. Probably you use another language to generate the code which will be executed, but in JavaScript `colNames` and `'colNames'` are absolutely different things and the function name will be not converted to the function. The only exception are **property names**. If you would use *global* variables which defines **properties** of the global `window` object that `colNames` would mean `window.colNames` and `"colNames"` will mean the same `window.colNames`. The usage of common global variables is very bad. So I still think that you should rewrite your code — Oleg, May 19 '15 at 08:48

score 0 · Answer 1 · answered May 19 '15 at 09:10

Sorry, but I don't like the above code. If you need to use some common parameters for both grids you can just defines

$.extend(true, $.jgrid.defaults, {
    datatype: "json",
    mtype: "POST",
    ajaxGridOptions: {contentType: "application/json; charset=utf-8" },
    serializeGridData: function (postdata) {
        return JSON.stringify(postdata);
    },
    search: true,
    viewrecords: true,
    rowNum: 10,
    rowList: [10, 20, 30, 40],
    gridview: true,
    autoencode: true
});

After that you can create both grids skipping the above options. You will creates short and readable code which do what you need.

By the way you want that the second grid will be loaded after the row is selected in the first grid. In the case you can create the second grid first with datatype: "local". It will prevent sending of any requests to url specified in the second grid. Inside of onSelectRow of the first grid you can change datatype of the second grid dynamically to "json", set postData and trigger reloadGrid for the second grid. It's of cause not all what need be done. One can consider to clear the second grid inside of beforeRequest of the first grid (or inside of loadComplete). It clear the second grid of refreshing (and deselecting) the first grid.

Sir I need to make my jqGrid's grid schema as dynamic so that I can add more than one number of grids in my form with having each of its attribute being dynamic and specific to every grid. For example: I might need to call onSelectRow in one grid and not in other. I am thankful that you suggested me many ways for my problem, but as far as I believe, the above solution may not fulfil my problem solving. — Vinit Sharma, May 19 '15 at 09:34
@VinitSharma: If you write `colModel: _args[5]` then the code will be not more "dynamic" because you need to fill somewhere the `_args` with **real specific data**. You need look at the *whole* code for creating of two or more grids. Wrong usage of "classes" can make the code longer, bad readable and understandable. It gives no additional "dynamic". I think that we have different opinions about the ways of the implementation. Thus I'm afraid that you have to write the implementation yourself or probably somebody else will post his own answer on your question. — Oleg, May 19 '15 at 09:53

Multiple jqGrids in one form causing conflicts for separate initiating variables

1 Answers1