jqgrid hiddengrid doubles data and vertical scroll overlaps data

Question

I'm using jqgrid 4.4.4, and I seem to have come across a problem.

Problem 1: FIXED

Use case

I want jqgrid to be hidden on "start-up" without doubling my data.

Solution

By removing scroll:true, the data did not double as it previously were.

Problem 2: FIXED

When the data exceeds the height of the jqgrid, a scroll bar appears. But the scrollbar overlaps the data as shown on the picture.

Jqgrid vertical scrollbar overlap

I have tried both autowidth:true, scrollOffset, defining a pixel width ++, but nothing seems to work.

I'm working on a fairly huge project, and I love working with jqgrid. But I see it as a necessity to make these problems obsolete.

Code:

    var grid = $("#table").jqGrid(
                {       
                    datatype: "local",
                    height: "auto",
                    width: 1000,
                    scroll: true,
                    colNames:['','1992','1997','2002','2007',
                              '2012','2017','2022','2027','2032','2037'],
                    colModel: [{name:'Name',index:'Name', align: 'left'},
                               {name:'Col0',index:'Col0'},{name:'Col1',index:'Col1'}
                               {name:'Col2',index:'Col2'},{name:'Col3',index:'Col3'},
                               {name:'Col4',index:'Col4'},{name:'Col5',index:'Col5'},
                               {name:'Col6',index:'Col6'},{name:'Col7',index:'Col7'},
                               {name:'Col8',index:'Col8'},{name:'Col9',index:'Col9'}],
                    multiselect: true,
                    caption: "Table",
                    shrinkToFit: true,
                    data: [{ Name: 'County1', Col0: '11 273', Col1: '11 431', 
                             Col2: '12 515', Col3: '13 414', Col4: '15 143',
                             Col5: '16  852', Col6: '18 362', Col7: '19 698', 
                             Col8: '20 821', Col9: '21 734' },
                           { Name: 'County2', Col0: '22 530', Col1: '24 457', 
                             Col2: '25 763', Col3: '27 247', Col4: '28 970', 
                             Col5: '31 135', Col6: '32 977', Col7: '34 649', 
                             Col8: '36 020', Col9: '37 158' },
                           { Name: 'County3', Col0: '11 909', Col1: '12 734', 
                             Col2: '14 037', Col3: '14 873', Col4: '17 284', 
                             Col5: '20 083', Col6: '22 877', Col7: '25 603', 
                             Col8: '28 064', Col9: '30 210' },
                           { Name: 'County4', Col0: '10 465', Col1: '12 165', 
                             Col2: '12 962', Col3: '13 890', Col4: '15 154', 
                             Col5: '16 293', Col6: '17 284', Col7: '18 174', 
                             Col8: '18 897', Col9: '19 446' },
                           { Name: 'County5', Col0: '13 300', Col1: '14 350', 
                             Col2: '15 777', Col3: '16 791', Col4: '17 809', 
                             Col5: '18 971', Col6: '19 931', Col7: '20 785', 
                             Col8: '21 452', Col9: '21 930' }]
                  //hiddengrid: true
                }
            );
    CSS:
     .ui-jqgrid-bdiv {
       max-height:300px;
    }

JSFiddle that describes my problem: http://jsfiddle.net/aalmaas/3z7s7/2/

JSFiddle that shows exactly what I want: http://jsfiddle.net/aalmaas/LBfCV/ . However, I want the jqgrid height to be set to "auto", not a definite height.

SOLUTION:

A huge thanks to Oleg for helping me out.

The behaviour of the vertical scrollbar is different if you set a height of the jqgrid, and when you define it to be height:"auto".

This is what I ended up doing:

If there is a scroll bar visible, I first call setGridWidth to reduce the width of the grid with shrink parameter set to true. The width takes into account that there needs to be a space for the vertical scrollbar. Then I call setGridWidth one more time with shrink parameter set to false to restore the previous width of the grid.

The code which you use could explain many things which could be interpreted in different way. The problem is that jqGrid can be used in *different* ways any you don't exactly explain your case. You wrote for example: 'I want jqgrid to be initialized and hidden on "start-up".'. It's really unclear what you mean. The option `hiddengrid:true` don't do really this. Do you use `datatype: "local"` or want to load the data from the server using `datatype: "json"`? Many other jqGrid options and your custom CSS styles could be also important to reproduce the problem which you describes. — Oleg, Feb 21 '13 at 16:49
Thank you for your quick reply! I updated with the code that i'm using. The thing is that i want to make jqgrid hidden when i first enter the page. And if i want to show it, i can just press the expand-button on the right. hiddengrid:true makes the grid hidden when i first enter the page, but the data doubles, so it becomes twice as large. I will make a jsfiddle soon, when i have more time. Maybe that will explain the problem better. — Are Almaas, Feb 21 '13 at 18:17
I still don't understand you. Why you modify standard `jqgrid` class? What you want to do? Standard way is placing of `` and `
` of pager element inside of another *outer* `
`. You can set any style what you want for the *outer* `
` without modifying of any styles which you jqGrid. The code which you post is unclear. The option `colModel: colmodel[0]` and `data: data[0]` give no information. It's like posting `$("#table").jqGrid(options);` or just posting `/*my code*/`. One can't use the information to *reproduce* the problem which you describe. — Oleg, Feb 21 '13 at 18:57
Well.. I sorta fixed it. Added a jsfiddle, so you can see my problem. I removed the scroll:true property, and then my data did not double. I did what were suggested here: http://stackoverflow.com/questions/5895801/jqgrid-with-automatic-height-but-has-a-max-height-scrollbars to make the jqgrid scroll if a certain height is reached. This however, makes the vertical scrollbar overlap the columns to the right. If i define a height instead of "auto", it works the way i want. However, i would prefer not defining a height, but instead "auto", so the jqgrid will scale, and scroll will appear if need — Are Almaas, Feb 25 '13 at 10:02
I'm sorry if my example was unclear from the start, as i was in a hurry, and i just wanted to see if anybody had any similar problems. Thank you for your patience and time anyway. And good job on jqgrid. I love it, and i'm not concidering changing it. :) — Are Almaas, Feb 25 '13 at 10:04
You are welcome! I'm not an official developer of jqGrid. I'm just an user who posted many suggestions and who helps other users mostly on stackoverflow. Virtual scrolling is probably the only feature of jqGrid which I don't recommend to use because of many bugs in the current implementation. In general it could be very good feature, but not in the implementation. :-( If you remove `scroll` option you can use `height: "auto"`. — Oleg, Feb 25 '13 at 10:54
Hm. If you take a look at the fiddles i posted, there is no scroll option there. If i use height: "auto" the scroll overlaps. But if there are some bugs that won't allow me to specify height:"auto", and to have scrollbars not overlapping the columns, i have to find another solution by setting a height :) — Are Almaas, Feb 25 '13 at 11:23
I don't understand what you mean under "scrollbars not overlapping the columns". jqGrid has vertical scrollbar on the **grid body only**. The headers of grid are in the separate div and in the separate table. It allows to have fixed headers during vertical scrolling of grid body. — Oleg, Feb 25 '13 at 11:28

Oleg · Accepted Answer · 2013-02-25T12:29:56.720

1

If I correctly understand what you want to do you should do the following

1) change HTML code to the following

<div id="foo">A top div</div>
<div class="myGridDiv">
    <table id="grid"></table>
</div>

where CSS on the outer div are defined with position: absolute:

.myGridDiv { position: absolute; bottom: 10px;}

2) Change JavaScript code to

var numberTemplate = {width: 60, formatter: "integer",
        formatoptions: {thousandsSeparator: " "}, sorttype: "integer"};

$("#grid").jqGrid({
    datatype: "local",
    height: "auto",
    hiddengrid: true,
    gridview: true, // to improve performance
    rowNum: 10000,  // to have no local paging
    colNames: ['', '1992', '1997', '2002', '2007', '2012', '2017', '2022', '2027',
        '2032', '2037'],
    colModel: [
        {name:'Name', width: 80, key: true},
        {name:'Col0', template: numberTemplate},
        {name:'Col1', template: numberTemplate},
        {name:'Col2', template: numberTemplate},
        {name:'Col3', template: numberTemplate},
        {name:'Col4', template: numberTemplate},
        {name:'Col5', template: numberTemplate},
        {name:'Col6', template: numberTemplate},
        {name:'Col7', template: numberTemplate},
        {name:'Col8', template: numberTemplate},
        {name:'Col9', template: numberTemplate}
    ],
    caption: "Stack Overflow Example",
    data: [
        { Name: 'County1', Col0: 11273, Col1: 11431, Col2: 12515, Col3: 13414,
            Col4: 15143, Col5: 16852, Col6: 18362, Col7: 19698, Col8: 20821,
            Col9: 21734 },
        { Name: 'County2', Col0: 22530, Col1: 24457, Col2: 25763, Col3: 27247,
            Col4: 28970, Col5: 31135, Col6: 32977, Col7: 34649, Col8: 36020,
            Col9: 37158 },
        { Name: 'County3', Col0: 11909, Col1: 12734, Col2: 14037, Col3: 14873,
            Col4: 17284, Col5: 20083, Col6: 22877, Col7: 25603, Col8: 28064,
            Col9: 30210 },
        { Name: 'County4', Col0: 10465, Col1: 12165, Col2: 12962, Col3: 13890,
            Col4: 15154, Col5: 16293, Col6: 17284, Col7: 18174, Col8: 18897,
            Col9: 19446 },
        { Name: 'County5', Col0: 13300, Col1: 14350, Col2: 15777, Col3: 16791,
            Col4: 17809, Col5: 18971, Col6: 19931, Col7: 20785, Col8: 21452,
            Col9: 21930 }
    ]
});

See the modified fiddler demo here

UPDATED: I am not sure that I understand correctly the problem with scrolling. I hope that the demo solve the problem. I used in the demo the following CSS:

.ui-jqgrid .ui-jqgrid-bdiv {
    max-height: 100px;
    overflow-x: hidden;
}

edited Feb 25 '13 at 12:29

answered Feb 25 '13 at 11:25

Oleg

220,925
34
403
798

Well, that is better than working directly with the jqgrid css, the only problem i'm left with now, is that the scroll overlaps the grid body if a lower max-height is set. see this fiddler: http://jsfiddle.net/aalmaas/LBfCV/2/ – Are Almaas Feb 25 '13 at 11:40
@AreAlmaas: I am still not sure that I understand you correctly. Probably what you need is http://jsfiddle.net/LBfCV/3/. – Oleg Feb 25 '13 at 12:27
I think you understand the problem better now. Although this (almost) fixed my problem, if the value were to be bigger, the scroll overlaps the values. As you can see on this fiddle: http://jsfiddle.net/aalmaas/LBfCV/4/ What would be optimal, is to have an empty space with the size of a vertical scrollbar on the right side of the grid, so the vertical scrollbar would'nt overlap the grid body. This is the best approach so far. – Are Almaas Feb 25 '13 at 12:38
@AreAlmaas: Sorry, but I don't see any problem in your last demo. jqGrid uses the width for the columns which you specified. You should increase the value of the `width` if you need display more large integer values. You have the same problem in *every column*. So scroll bar is not real problem. Moreover `title` attribute is added to the cells per default so tooltip shows full value. – Oleg Feb 25 '13 at 12:46
Yes, i can see that. But the problem will appear if the values were aligned to the right. Then the vertical scrollbar will overlap the values. The users wants to have the values aligned to the right, although the fiddle have the values aligned to the left. – Are Almaas Feb 25 '13 at 13:00
@AreAlmaas: If you need have right alignment you need add `align: "right"` property in the `numberTemplate`. – Oleg Feb 25 '13 at 13:05
@AreAlmaas: You can change jqGrid width inside of `onHeaderClick` if you want. You can use additionally `shrinkToFit: false` to have exact grid width or use `shrink: false` parameter of `setGridWidth` method. – Oleg Feb 25 '13 at 13:11
Well, it does'nt help. The vertical scrollbar overlaps the values if the values are aligned to the right. this is not the behaviour i want. :) As you can see now: http://jsfiddle.net/aalmaas/LBfCV/7/ – Are Almaas Feb 25 '13 at 14:15
@AreAlmaas: I don't see any `onHeaderClick` callback in your last demo. Probably you didn't read my last comment. I suggested that you add `shrinkToFit: false` aoption and `onHeaderClick` in the grid. Inside of `onHeaderClick` you can detect whether vertical scroll exist in the grid or not. You can use any simple way like examining of `reccount` option (number of rows) in the grid. If grid has vertical scrollbar then you can increase if not have then decrease the width of the grid. To change the width you can use `setGridWidth` method. – Oleg Feb 25 '13 at 14:35
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/25084/discussion-between-are-almaas-and-oleg) – Are Almaas Feb 25 '13 at 15:00

jqgrid hiddengrid doubles data and vertical scroll overlaps data

1 Answers1