Панель навигации jqgrid не отображается правильно

Question

Некоторые из моих jqGrids имеют странное поведение на панели навигации.В некоторых из них я использую кнопки поиска и обновления по умолчанию, а там навигационная область плавает влево, появляясь прямо рядом с этими кнопками (не по центру, как должно).Самая большая проблема возникает, когда я добавляю текст в кнопку поиска «Поиск».Это приводит к неправильному вычислению полей кнопок, делая границу эффекта Хобера короче, чем фактическая ширина кнопок.Но, как я уже сказал, это происходит только в некоторых случаях, и я не могу понять разницу между теми, кто работает правильно, и теми, которые не работают.Это не проблема браузера, поскольку это происходит одинаково во всех браузерах.

Вот скриншот (обратите внимание на кнопку поиска с фокусом и положение элементов управления навигацией!): Кто-нибудь сталкивался с этой проблемой раньше?Это моя конфигурация сетки, в которой есть эта проблема:

$('#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" });

Спасибо, Алекс

Answer 1

Я столкнулся с этой проблемой сегодня и заметил через «Инспектирование элемента», что по какой-то причине, которую мне еще предстоит выяснить. Это даже происходит, когда ширина больше 415, а также сетки без пользовательских кнопок на нижнем пейджере. Пока что это кажется довольно случайным. Когда возникает эта проблема, тегу td с id = 'xxxpagername_left' присваивается определенная ширина. На сетках без этой проблемы 'xxxpagername_left' ширина не установлена. Итак, быстрое решение проблемы:

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

У меня есть метод ResizeGrid, который запускается в событии loadComplete по умолчанию для каждой сетки; фрагмент кода попадает после изменения размера сетки.

К сожалению, я не смог добиться того же успеха, установив ширину 500 или что-то большее, чем 415.

Answer 2

Исходя из того, что Олег сказал о начальной ширине сетки, я пошел провести несколько тестов.

Как я уже сказал, у меня есть другие сетки, которые имеют пользовательские кнопки на панели инструментов и не ведут себя так, как это, но я не смог найти никаких отличий, которые могли бы вызвать эту проблему.В других реализациях я видел, что это происходит только с теми, которые имеют меньшую начальную ширину.Если я установлю начальную ширину равной 500, она будет правильно центрирована и правильно позиционируется на setGridWidth.Я даже могу сказать, что магическое число - 415. Начальная ширина ниже 415px приведет к этому ... все, что равно 415px или больше, заставит jqGrid действовать как ожидалось.Это заставляет меня думать, что это какая-то жестко заданная минимальная ширина, которая вызывает такое поведение при ошибках.

Спасибо за помощь, Олег.Alex