jqgrid navigation bar not rendering correctly

问题

Some of my jqGrids have a strange behavior on the navigation bar.
On some of them I use the default Search and Refresh buttons and on there ones the navigation area floats left appearing right next to these buttons (not centered as it should).

The biggest problem happens when I add text to the search button "Search". This makes the button margins being wrongly calculated making the hober effect border shorter than the actual button width.

But like I said, this only happens in some cases and I can't figure out the difference between the ones working correctly and the ones that don't. This is not a browser issue as it happens the same in all browsers.

Heres's a screenshot (notice the search button with focus and the navigation controls position!):

Have anyone faced this problem before?
This is my configuration os a grid that have this problem:

$('#ProductBrandListGrid').jqGrid({
        url: '<%= ResolveUrl("~/Controls/ProductsControls/Controllers/ProductBrandController.ashx?method=GridDataList") %>',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Name', 'Description', 'Actions'],
        colModel: [
    { name: 'Name', index: 'Name', width: 100, align: 'left', resizable: true, sortable: true, searchoptions: { sopt: ['cn']} },
    { name: 'Description', index: 'Description', align: 'left', resizable: true, sortable: true, searchoptions: { sopt: ['cn']} },
    { name: 'act', index: 'act', width: 25, sortable: false, search: false },
    ],
        pager: $('#ProductBrandListGridPager'),
        rowNum: 15,
        rowList: [10, 15, 20, 30, 50, 100],
        sortname: 'Name',
        sortorder: 'asc',
        viewrecords: true,
        imgpath: '',
        caption: '',
        width: 200,
        height: 400,
        gridComplete: function () {
            var ids = jQuery("#ProductBrandListGrid").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];

                ce2 = "<input type='button' value='details' onclick='ProductBrandItemOpen(\"" + cl + "\")' />";

                $("#ProductBrandListGrid").setRowData(ids[i], { act: ce2 });
            }
        }
    });

    /* Add this line to show search boxes on the header */
    $('#ProductBrandListGrid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });

    /* Add this line to allow advanced search using the toolbar button */
    $("#ProductBrandListGrid").jqGrid('navGrid', "#ProductBrandListGridPager", { search: true, edit: false, add: false, del: false, searchtext:"Search" });

Thanks, Alex

回答1:

I came across this issue today and noticed through 'Inspect Element' that for some reason, which I have to yet to figure out. This even happens when the width is greater than 415, as well as grids without custom buttons on the bottom pager. So far, it seems to be quite random. When this issue occurs, the td tag with id = 'xxxpagername_left' has a specific width given to it. On grids without this issue, 'xxxpagername_left' the width is not set. So, quick fix for the issue:

var pagerName = $($grid).jqGrid('getGridParam', 'pager');
$(pagerName + '_left').css('width', 'auto');

I have a ResizeGrid method that fires within the default loadComplete event for each grid; the code snippet hits after the grid is resized.

Unfortunately, I was not able to have the same success with setting the width to 500, or anything greater than 415.

回答2:

Based on what Oleg said about the grid's initial width I went to do some tests.

As I said, I have other grids that have custom buttons on the toolbar and don't behave like this but I couldn't find any differences that could cause this problem.

Inspecting my other implementations I saw that this only happens on the ones with a lower initial width. If I set the initial width to 500 it centers correctly and repositions itself correctly on setGridWidth. I can even tell that the magic number is 415. Initial widths bellow 415px will cause this... anything equal or above 415px will make jqGrid act as expected. This leds me to think that this is some sort of hard-coded minimal width that is causing this bugging behavior.

Thanks for the help Oleg. Alex

来源：https://stackoverflow.com/questions/6027307/jqgrid-navigation-bar-not-rendering-correctly

标签

javascript

jquery

jquery-plugins

jqgrid