jqGrid get th and thead using Jquery

Question

How are you able to get theader on a jqgrid using JQuery.

Answer 1

If a thead and th exists on the DOM, it can be selected. Do you have an example of what you're trying to do?

Answer 2

Try:

jQuery("thead", "#mygrid")

Answer 3

My short answer is: instead of selecting of the DOM elements which corresponds <th> elements which you are looking for you should use

jQuery("#list")[0].grid.headers

It returns the array of this DOM elements, corresponds the <th>. The long description of my answer follows.

I understand the reason of your question. If you have for example defined the base part of jqGrid as

<table id="list"></table>
<div id="p"></div>

then jQuery("#list") gives you only a "body" part of the grid without headers. The main "body" part of the table will be placed inside some divs. Other elements of jqGrid will be placed in the divs as a tables. The structure of jqGrid (not full) will looks like following:

div#gbox_list
  div#gview_list
    div.ui-jqgrid-titlebar              - caption
    div.ui-userdata#t_list              - optional top toolbar
    div.ui-jqgrid-hdiv                  - all grid headers
      div.ui-jqgrid-hbox
        table.ui-jqgrid-htable
          thead
            tr.ui-jqgrid-labels         - row with column headers (labels)
              th#list_rn                   - column header with row numbers
              th#list_Name                 - column header
              ...
            tr.ui-search-toolbar        - row for toolbar searching
              th
              th
              ...
    div.ui-jqgrid-bdiv                  - main grid data contain
      div
        table#list
    div.ui-userdata#tb_list             - optional bottom toolbar
  div#pager                             - pager

(here in the table I used rownumbers: true, so there are th#list_rn, the first column has the name 'Name', so there are th#list_Name and so on)

You can see, that the header table table.ui-jqgrid-htable can has two child <tr> subelements: one tr.ui-jqgrid-labels for the column headers and one tr.ui-search-toolbar for the filterToolbar.

My suggestion for you don't use this relatively complex hierarchy, but use another short hidden way exising in jqGrid. The code

var gd=jQuery("#list")[0];

get you DOM element of the table element. This element has some importent extennsiont which are made by jqGrid. This are gd.p which contain all paremeters of jqGrid. Another important extention is gd.grid with important properties gd.grid.cDiv, gd.grid.hDiv, gd.grid.cDiv, gd.grid.bDiv, gd.grid.uDiv and also gd.grid.cols, gd.grid.footers and gd.grid.headers. I suggest you to use gd.grid.headers array as the best way to receive a list of <th> elements from the grid column headers (from the correct <tr> row).