Question

I have 3 different tabs where i am displaying data using jQGrids(each tab contain one grid).

But i just thought that my grids are completely the same, only the difference is that they using different url to get data.

So I have three similar girds on each tab only with different urls:

First: url: '/Home/GetData?id=1' Second: url: '/Home/GetData?id=2' and Third: url: '/Home/GetData?id=3'

So i was thinking that may be i may declare grid only once and than on each tab click a can pass the url to load data? So on each tab click jQGrid will be populating from the new url.

May be some one may have any ideas about that?

Or may be some one may have better ideas how to reduce “jQGrid copy-paste” in that case?

UPDATE 0:

Nearly get it work i mean it is working but there is one small problem,
When i am switching tabs the header of the grid getting lost…and some jqgrid formatting as well.

here is my code:

$("#tabs").tabs({
            show: function (event, ui) {

                if (ui.index == 0) {
                    //$("#Grid1").appendTo("#tab1");
                    //$("#Grid1Pager").appendTo("#tab1");

                   //When Appending only pager and grid div, header getting lost so i've append the whole grid html instead
                   $("#gbox_Grid1").appendTo("#tab1");

                   changeGrid("#Grid1", 1);
                }

                else if (ui.index == 1) {
                  //$("#Grid1").appendTo("#tab2");
                  //$("#Grid1Pager").appendTo("#tab2");

                  $("#gbox_Grid1").appendTo("#tab2");

                  changeGrid("#Grid1", 2);
                }

                else if (ui.index == 2) {
                    //$("#Grid1").appendTo("#tab3");
                    //$("#Grid1Pager").appendTo("#tab3");

                    $("#gbox_Grid1").appendTo("#tab3");

                    changeGrid("#Grid1", 3);
                }
            }
        });

function changeGrid(grid, id) {
        $(grid).jqGrid('setGridParam', {
            url: '/Home/GetData?id=' + id
        });

        $(grid).trigger('reloadGrid');
    }

UPDATE 1

All right, i’ve changed the code to append the whole grid instead of appending grid div and pager only. So it is working like that.

Answer 1

You can basically make the tabs as regular buttons that will call some function which sets new URL parameter to the grid and reloads it.

The function should be something like this:

function changeGrid(grid, id) {
   $(grid).jqGrid('setGridParam', {
      url: '/Home/GetData?id=' + id, page: 1
   });
   $(grid).trigger('reloadGrid');
}

Note that I set the page to 1. Keep in mind that you might need to set the default sorting column or something similar depending on your solution.

UPDATE

If you really want to go with the tabs, the ‘show’ event handler can be simplified.
Try this:

$("#tabs").tabs({
    show: function (event, ui) {
        var id = ui.index + 1;

        $("#gbox_Grid1").appendTo("#tab" + id);

        $("#Grid1").jqGrid('setGridParam', {
            url: '/Home/GetData?id=' + id
        });
        $("#Grid1").trigger('reloadGrid');
    }
});