How to toggle jqGrid display using jQuery?

Question

We have two jqGrid grids - we only want to display one at a time based on a user's input.

Each grid, when displayed, should appear on the screen at the same location.

What is the easiest way to achieve this?

Currently we just have our HTML set up with <table id="list"></table> and then we create the grid with $("#list").jqGrid({....

score 1 · Answer 1 · answered Oct 08 '10 at 20:02

1

jqGrid create some divs over table and pager elemetes. The id of the div which contain all the jqGrid elements is a div with id="gbox_list" in your case.

So to hide the grid you cane use $("#gbox_list").hide(); and to show it back: $("#gbox_list").show();. If you want to use another toggle effectes which you needs, but with the same $("#gbox_list") object.

answered Oct 08 '10 at 20:02

Oleg

220,925
34
403
798

Thanks. We also have the pager using `
`.. what is the div name for the pager? Also - can you "bind" two different grids to the same table and pager HTML elements and then unbind one and bind the other one to toggle the grids?
– Marcus Leon Oct 08 '10 at 20:14
Or is that a dumb question regarding the pager? Would we just do $("#pager").hide()? So to do a toggle we'd hide both the table div and the pager div, then show the table and pager divs of the other grid? – Marcus Leon Oct 08 '10 at 20:21
@Marcus: the pager will be placed inside of the "gbox", so hiding of the `$("#gbox_list")` will hide also the corresponding pager (the pager used in the jqGrid definition. I am not sure that I understand correct what you mean with the "binding" two different grids to the same table. I recommand you not share any DOM elements between the grids. Hiding and showing is one way. Another way is removing of unneeded grid and full recreating another. You can a little play with different approatch and after that decide which it the best in your environment. – Oleg Oct 08 '10 at 20:26
How do you remove a given grid and then recreate another grid? – Marcus Leon Oct 08 '10 at 20:40
@Marcus: You can do this in different ways. One way is the usage of `GridUnload` or `GridDestroy`(see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods#add_on_grid_methods). Another is placing of both the table and the pager div elements inside one an additional div: `
` and then use just `$("#main").empty()` to destroy or `$("#main").html('
')` to recreate the grid base elements. To make jqGrid from recreated table with the pager div you can use the same code as usual. – Oleg Oct 08 '10 at 20:56

littlegreen · Answer 2 · 2010-10-08T20:09:23.027

HTML:

<a href="#" id="click1">Toggle</a>
<table class="list" id="list1"></table>
<table class="list" id="list2" style="display: none;"></table>

JQuery:

$("a#click1").click(function() {
    $("table#list1").toggle();
    $("table#list2").toggle();
});

PS. I am wondering whether jqGrid will work on items that have display: none and are thus effectively removed from the DOM; if it doesnt work out you might want to adapt the toggle() function to use the visibility property instead.

$("table.list").toggle(
    function() {
        $(this).css({"visibility": "hidden"});
    },
    function() {
        $(this).css({"visibility: "visible"});
    }
);

How to toggle jqGrid display using jQuery?

2 Answers2