It´s possible to change the expand/collapse button icon from the jqGrid header?

Question

First of all i will explain the context.

I have a view with 2 or more grids (jqgrid) and want to put a "X" into the expand/collapse button.

I was trying and finally get the "X" icon but in all grids, with this code:

 .ui-icon-circle-triangle-n
    {
        background-position: -31px -192px !important;
    }

1 - how can i change only the icon of expand/collapse button in a grid that i want?

Answer 1

jqGrid uses "ui-icon-circle-triangle-n" and "ui-icon-circle-triangle-s" icons inside of "Close" button of the caption layer. To change the "ui-icon-circle-triangle-n" icon to "ui-icon-closethick" for example (see jQuery UI CSS Framework) you can do the following steps:

1. you should change initial value of the icon directly the grid is created. You wanted to do this for all grids on the page so you can do the following

$(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>span")
    .removeClass("ui-icon-circle-triangle-n")
    .addClass("ui-icon-closethick");

1. you have to change the icon inside of onHeaderClick callback after "opening" the grid:

onHeaderClick: function (gridstate) {
    if (gridstate === "visible") {
      $(this).closest(".ui-jqgrid-view")
          .find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>span")
          .removeClass("ui-icon-circle-triangle-n")
          .addClass("ui-icon-closethick");
    }
}

You can see the results on the demo:

Answer 2

lets suppose the container id of the first grid is grd_asset_container. you could just use this to target one grid

#grd_asset_container div.ui-jqgrid-titlebar .ui-icon-circle-triangle-n, #grd_asset_container div.ui-jqgrid-titlebar .ui-icon-circle-triangle-s { background-position: -32px -192px !important; }