JQgrid: Is there any event that fires when clicked on JQgrid Header?

Question

In my .net application i am using Jqgrid for generating report.For some reports i need to show more than one grid , ie; at a time only one grid should be expand .

For doing this i need to know if any Grid header click event is available.

I have checked this event and i can see only "onHeaderClick" event available . onHeaderClick event will fire only we click on expand or cplapse icon on top right corner of each grid Header.

Any help is appreciated.

Answer 1

You can manually bind click event handle to the header:

var $grid = $("#grid"); // your grid

$($grid[0].grid.cDiv).click(function() {
    // $mygrid will be the same as $grid, but we can use the expression below
    // to be able to use one even handle for multiple grids
    var $mygrid = $(this).closest(".ui-jqgrid-view")
                      .find(">.ui-jqgrid-bdiv>div>.ui-jqgrid-btable"),
        gridstate = $mygrid.jqGrid("getGridParam", "gridstate");
    alert("the header is clicked!\n" +
          "gridstate is now \"" + gridstate + "\"");
});

$grid.bind("jqGridHeaderClick", function (e, gridstate) {
    alert("the icon in the header is clicked!\n" +
          "gridstate is now \"" + gridstate + "\"");
});

If required you can simulate the "click" on the icon in the header like the demo do.