ansaurus

Question

How to toggle jqGrid display using jQuery?

Answer 1

A:

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

littlegreen 2010-10-08 20:01:04

Answer 2

+1 A:

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.

Oleg 2010-10-08 20:02:09

Thanks. We also have the pager using `<div id="pager">`.. 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 2010-10-08 20:14:37

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 2010-10-08 20:21:44

@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 2010-10-08 20:26:15

How do you remove a given grid and then recreate another grid?

Marcus 2010-10-08 20:40:47

@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: `<div id="main"><table id="list"></table><div id="pager"></div></div>` and then use just `$("#main").empty()` to destroy or `$("#main").html('<table id="list"></table><div id="pager"></div>')` 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 2010-10-08 20:56:55

Answer 3

A:

In the end went with an answer found on a similar post: http://stackoverflow.com/questions/1167477/how-can-i-hide-the-jqgrid-completely-when-no-data-returned/1167902#1167902

Marcus 2010-10-14 15:16:07

ansaurus

tags:

views:

answers:

How to toggle jqGrid display using jQuery?

related questions