jQuery Grid Plugin - jqGrid - Topic: Grid Height mess grid content alignment

tony on Grid Height mess grid content alignment

Sat, 21 Nov 2009 03:33:57 +0200

Hello,

I think that there is another reason which make this happen maybe the elements at left to the grid.

sanchitos on Grid Height mess grid content alignment

Thu, 19 Nov 2009 15:20:51 +0200

Thank you, but setting the scrollOffset didn't worked out.

Any way, I set the paging so it actually fit the page.

Thank you again.

Rumen[Trirand] on Grid Height mess grid content alignment

Sat, 14 Nov 2009 02:11:06 +0200

Hello,

Yes, the problem is that once a scrollbar is shown, it takes some space off the grid. By default this space is 18px. So the solution is to always have 18px reserved for that - this is controlled by the scrollOfset option, e.g.

$(document).ready(function() {
            jQuery(NOMBRE_GRID).jqGrid({
                url: '/BuscadorClasesPuestos/Buscar',
                datatype: 'json',

scrollOffset: 18,

You can also experiment with height in percentages. jqGrid accepts 100% as valid height, so in some cases you may be better of with height 100% and paging, instead of scrolling.

Regards,

Rumen Stankov

jqGrid Team

sanchitos on Grid Height mess grid content alignment

Fri, 13 Nov 2009 16:50:57 +0200

Hi, thanks again for JqGrid that is awesome.

First. Using version 3..5, happening on IE and FireFox.

I have the following problem, I couldn't explain myself well enough, so i will show you the screenshot

In the first picture i do a search that only show me 2 records. My grid height is of 90px, as you see the content can be handled by the grid without using the scrollbar, but it seems that the content is center aligned.

Instead when the search fill the grid with enough records, so the scroll is enabled, the alignment is just perfect.

This is happening when i search, if the grid is filled up just from the beginning the alignment is fine.

The code:

    //definicion del grid
        $(document).ready(function() {
            jQuery(NOMBRE_GRID).jqGrid({
                url: '/BuscadorClasesPuestos/Buscar',
                datatype: 'json',
                mtype: “POST”,
                height: 90,
                width: 370,
                //autowidth: true,
                colNames: ['Id', 'Nombre'],
                colModel: [
                      { name: 'id_clase_puesto', index: 'id_clase_puesto', width: 100, align: 'left' },
                      { name: 'nombre', index: 'nombre', width: 250, align: 'left' }
                  ],
                rowNum: tamanoPagina,
                rowList: [5, 10, 15, 20],
                pager: jQuery(NOMBRE_AREA_PAGINACION),
                sortname: 'nombre',
                sortorder: “asc”,
                viewrecords: true,
                pager: jQuery(NOMBRE_AREA_PAGINACION),
                caption: ''
            });
        });

When i hit the search button i'm doing this

$(NOMBRE_GRID).setGridParam({ url: “/BuscadorClasesPuestos/Buscar/” + id, page: 1 }).trigger(”reloadGrid”);

Any help will be appreciated, thank you