0

I have a button displayed in the jqGrid scrollOffset area as seen in my first screenshot. But you'll notice in the second screenshot when there isn't enough results to fill the grid the scrollbars disappear and the scrollOffset area goes with it. Is there a way to trick jqGrid into always displaying the scrollOffset area.

enter image description here

Community
  • 1
  • 1
Sean Bannister
  • 3,105
  • 4
  • 31
  • 43

1 Answers1

2

If I understand you correct you can include the following CSS which will force creating the scroll-bars

<style type="text/css">
    .ui-jqgrid .ui-jqgrid-bdiv { overflow: scroll; }
</style>

UPDATED: I looked in your demo from here. I don't like your customization of the searching toolbar of jqGrid and the column headers because you add additional column in the grid header, which not exist in the body of grid and which jqGrid don't know. I find the way too dangerous.

I would recommend you to use toppager: true parameter instead. In your current code you use "keyword-grid" as the grid id and "keyword-grid-toolbar" as the pager. If you would use toppager: true option you will din't need <div id="keyword-grid-toolbar"> at all. Instead of that jqGrid will create the div for the top pager itself. The id of the grid will be constructed from the grid id and the text "_toppager". In you case it will be the div with id="keyword-grid_toppager".

So you should remove pager: "#keyword-grid-toolbar" parameter of jqGrid and replace '#keyword-grid-toolbar' to '#keyword-grid_toppager' for navGrid and navButtonAdd which you use.

You can read here and here more information about the toppager.

As the result you will have not the same look of jqGrid of course, but the height of the grid will be not changed and the searching and column chooser buttons will be on top and are always visible. So all your main problems will be solved and you will have standard jqGrid.

UPDATED 2: One more approach which you can follow is to add a column at the end of jqGrid and make it hidden by

{name: 'last', width: 22, sortable: false, resizable: false, search: false,
    cellattr: function () {return ' style="display: none"'} }

instead of typical hidden: true. It will preserve some place in the column header and the searching toolbar. So you will be able to add some your custom elements without breaking general grid structure:

enter image description here

see the demo here.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Sorry I should of mentioned I've already tried setting the overflow, it displays the scroll area but it doesn't display it the same as when the grid is full so the button still remains hidden. – Sean Bannister Nov 08 '11 at 20:08
  • @SeanBannister: Do you changed `scrollOffset` parameter? Where and how you placed the buttons about which you wrote? The demo which can be used to reproduce your problem would clear all. – Oleg Nov 08 '11 at 20:12
  • Yes I've set scrollOffset to 25 so it can fit the button. I positioned the button using an answer you actually gave me over at http://stackoverflow.com/questions/8050880/jquery-in-jqgrid-is-it-possible-to-reorder-the-toolbar-buttons I had to make a few other changes but it works well. I'll do up a demo in the morning to show you how its working. – Sean Bannister Nov 08 '11 at 20:32
  • @SeanBannister: Do you have problem with the buttons from the navigator bar? In any way after you prepared a demo it will clear all. I think if I would be able to reproduce your problem, then I could make a solution or workaround. Just post me a comment when you will have the demo ready. – Oleg Nov 08 '11 at 20:40
  • Sorry for the late reply, I've uploaded an example at seanbannister.com/example and you can download the code at seanbannister.com/example/example.zip so you can try it with less or more data in the grid. I'm starting to think there's not going to be a simple solution and I'm going to need to write something completely custom. I just really like the position of the buttons for usability. But even in the attached example I've noticed a new bug when you resize the browser window because I'm dynamically resizing the grid the buttons cause a horizontal scroll bar. – Sean Bannister Nov 14 '11 at 04:07
  • @SeanBannister: I updated my answer after examining of your demo. – Oleg Nov 14 '11 at 09:33
  • Thanks a heap for your help, that's solid advice. I guess I'm in two states about it because from a usability and design point of view my method is perfect but from maintainability and actually making it happen your method would be best. – Sean Bannister Nov 16 '11 at 02:43
  • @SeanBannister: You are welcome! Your original approach are interest, but too many places of jqGrid code use the number of columns, so the original implementation would has more problems. It you want you could try add one more column on the last place like I described in "UPDATE 2". The way seems safe for me. By the way if you don't need the pager, you can remove "pager: '#pager'" and call of `navGrid`. You can call [searchGrid](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:advanced_searching) method yourself. – Oleg Nov 16 '11 at 07:22
  • I've been thinking about this and I'm going to try floating the buttons as divs and displaying them just outside the grid but making them look like they're connected, might work nicely. – Sean Bannister Nov 17 '11 at 02:00
  • Probably should mention I'm testing your method right now :) if there's no hickups I'll certainly stick with it. – Sean Bannister Nov 17 '11 at 02:03