1

We use latest version of free-jqgrid.

We want to make for all our grids fixed (frozen) header: verticall scrollbar insided the grid, which scrolls only the content.

As I know, this can be achieved using fixed grid's height, but it would be great to have the height fit to user's screen height. (May be we should change the size on page load somehow?)

What is the best way to implement this?

Example: https://jsfiddle.net/qrxkuvfz/1/

Setting width: 400 does bad job. I just want the scroll to be inside the grid. And height - max available.

freeek
  • 985
  • 7
  • 22
  • @Oleg, you are welcome! – freeek Apr 11 '17 at 09:16
  • 1) if you want write me a message, then you should write comment with "@Oleg" to my **old answer**. Only in the case the stackoverflow is able to map the name "Oleg" to my user id [315935](http://stackoverflow.com/users/315935/oleg). You should understand that there are exist almost 2000 other users with the name Oleg (see [here](http://stackoverflow.com/search?q=Oleg)). 2) I have to do my main job first. You should not expect immediate answer from me. 3) Please post more detailed description what you do and what you need. Pictures and JavaScript code could be very helpful. – Oleg Apr 11 '17 at 09:36
  • I'm not sure that you use currently free jqGrid correctly. The problem, which you describe should don't exist at all in case of correct usage jqGrid. It's really required that you post JavaScript code, which you use. Do you use simple grid or TreeGrid, Grid with subgrids, data grouping, ...? Wo you fill the grid with local data (`datatype: "local"`) or you use server side paging? Do you use pager/toppager at all? Which value have `rowNum` and `height` parameters? – Oleg Apr 11 '17 at 09:43
  • @Oleg, I was not supposed to get immidiate answer, you just replied to my previous queston like this, so I know, you are watching these themes. There is no problem, I just ask the best way to implemen this. We use server pagination and height is not set now (so it's auto), we plan to use toppager, rowNum is set to 20 by default, but we want, if user selects 100, that the scrollbar appeared inside the grid and not inside a browser window. I will make an example a bit later today! – freeek Apr 11 '17 at 09:46
  • @Oleg, demo is there now. – freeek Apr 11 '17 at 10:31
  • @Oleg may be you can help me once more: https://stackoverflow.com/questions/57757202/how-to-get-jlinq-query-for-current-jqgrid-filters – freeek Sep 02 '19 at 12:48

2 Answers2

2

If I correctly understand your requirements, then you need just add `` option to jqGrid. For example, the modified demo https://jsfiddle.net/OlegKi/qrxkuvfz/2/ uses

rowNum: 15,
maxHeight: 330,

The maxHeight is large enough to display all 15 rows specified in rowNum, but if the user increase .

Alternatively you can use onPaging callback (see the wiki article), where you use setGridHeight method to set height option of jqGrid to some numeric value or to "auto" depend on the newRowNum and currentRowNum properties of the options parameter.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Yes, the only question is it possible to set `maxHeight` or `height` to browser's window size? So that on first load the whole page would fit with grid, like when we use `auto`. If not we will just choose some common height ofc. – freeek Apr 11 '17 at 11:04
  • 1
    @freeek: You can get the widow height *before* creating jqGrid and to use the corresponding `rowNum`, `maxHeight` or `height`. The `window.innerHeight` is the base value, which you can use. The page has probably other elements, like navigation bars, on the pages which reduces the best value for `rowNum`, `maxHeight` or `height`. You should decrease the value of `window.innerHeight` a little and set the corresponding values of `rowNum`, `maxHeight` or `height`. – Oleg Apr 11 '17 at 11:10
  • ok, just thought may be there are some built-in methods already. Now it's clear. – freeek Apr 11 '17 at 11:12
1

Basically, you can use your css to fix your headers (frozen), and use a bit of javascript/jquery to assign height to the tbody so that the table fits on to the screen.

Also add an overflow property to enable scrollbar in your css after the specific height.

Refer code:

$("tbody").height($(window).innerHeight() + "px");
table {
  position: relative;
  width: 700px;
  background-color: #aaa;
  overflow: hidden;
  border-collapse: collapse;
}


/*thead*/

thead {
  position: relative;
  display: block;
  /*seperates the header from the body allowing it to be positioned*/
  width: 700px;
  overflow: visible;
}

thead th {
  background-color: #99a;
  min-width: 120px;
  height: 36px;
  min-height: 36px;
  border: 1px solid #222;
}

thead th:nth-child(1) {
  /*first cell in the header*/
  position: relative;
  display: block;
  background-color: #88b;
}


/*tbody*/

tbody {
  display: block;
  width: 700px;
  overflow-y: auto;
}

tbody td {
  background-color: #bbc;
  min-width: 120px;
  border: 1px solid #222;
  height: 36px;
  min-height: 36px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Town</th>
        <th>County</th>
        <th>Age</th>
        <th>Profession</th>
        <th>Anual Income</th>
        <th>Matital Status</th>
        <th>Children</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Smith</td>
        <td>Macelsfield</td>
        <td>Cheshire</td>
        <td>52</td>
        <td>Brewer</td>
        <td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Jenny Jones</td>
        <td>Threlkeld</td>
        <td>Cumbria</td>
        <td>34</td>
        <td>Shepherdess</td>
        <td>£28,000</td>
        <td>Single</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Peter Frampton</td>
        <td>Avebury</td>
        <td>Wiltshire</td>
        <td>57</td>
        <td>Musician</td>
        <td>£124,000</td>
        <td>Married</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Simon King</td>
        <td>Malvern</td>
        <td>Worchestershire</td>
        <td>48</td>
        <td>Naturalist</td>
        <td>£65,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Lucy Diamond</td>
        <td>St Albans</td>
        <td>Hertfordshire</td>
        <td>67</td>
        <td>Pharmasist</td>
        <td>Retired</td>
        <td>Married</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Austin Stevenson</td>
        <td>Edinburgh</td>
        <td>Lothian</td>
        <td>36</td>
        <td>Vigilante</td>
        <td>£86,000</td>
        <td>Single</td>
        <td>Unknown</td>
      </tr>
      <tr>
        <td>Wilma Rubble</td>
        <td>Bedford</td>
        <td>Bedfordshire</td>
        <td>43</td>
        <td>Housewife</td>
        <td>N/A</td>
        <td>Married</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Kat Dibble</td>
        <td>Manhattan</td>
        <td>New York</td>
        <td>55</td>
        <td>Policewoman</td>
        <td>$36,000</td>
        <td>Single</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Henry Bolingbroke</td>
        <td>Bolingbroke</td>
        <td>Lincolnshire</td>
        <td>45</td>
        <td>Landowner</td>
        <td>Lots</td>
        <td>Married</td>
        <td>6</td>
      </tr>
      <tr>
        <td>Alan Brisingamen</td>
        <td>Alderley</td>
        <td>Cheshire</td>
        <td>352</td>
        <td>Arcanist</td>
        <td>A pile of gems</td>
        <td>Single</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
</body>
nashcheez
  • 5,067
  • 1
  • 27
  • 53