Изменить размер окна редактирования страницы jqGrid

Question

В моем приложении ASP.NET MVC 3 на моем jqGrid включен пейджер, как показано на рисунке ниже:

Текстовое поле для страницы (центр изображенияс номером 1 в нем) действительно шире, чем нужно.Кто-нибудь знает, как отрегулировать размер этого поля?

Это особенно проблема, когда моя сетка уже этой, в этот момент текстовое поле для Страницы выдвигается (или размещается) слишком далеко отвлево и заканчивая нажатием кнопок, как показано на рисунке ниже:

Здесь две кнопки слева от «Страница» (предыдущая страница, первая страница)под меткой «Редактировать», которая является частью моей пользовательской кнопки «Редактировать».Обратите внимание, что поле страницы все еще очень широко.Кроме того, «Вид 1-10 из 1005» на правой стороне, видимый на первом изображении, усекается в более узкой сетке.

Возможно, для этого есть настройка, или у кого-то есть обходной путь.Я предпочел бы, чтобы вторая сетка не была шире, чем нужно (мой обходной путь - установить значение width вместо 'auto' или 'inherit', но это делает столбцы сетки широкими. Правильно подобранный размертекстовое поле для страницы оставляло бы достаточно места для кнопок пейджера и моей собственной кнопки.

Кнопка пейджер / пользовательская кнопка для моей сетки выглядит примерно так:

 .jqGrid('navGrid', '#icecreamPager', 
    { search: true, edit: false, add: false, del: false, searchText: "Search" },
   {}, // default settings for edit
   {}, // default settings for add
   {}, // default settings for delete
   {closeOnEscape: true, closeAfterSearch: true, multipleSearch: true }, // settings for search
   {}
  )
  .jqGrid('navButtonAdd', '#icecreamPager',
   { caption: "Edit", buttonicon: "ui-icon-pencil",
     onClickButton: function () {
       var grid = $("#icecreamGrid");
       var rowid = grid.jqGrid('getGridParam', 'selrow');
       var cellID = grid.jqGrid('getCell', rowid, 'icecreamID');
       var src = '@Url.Action("Edit", "Icecream", new { id = "PLACEHOLDER" })';
       document.location = src.replace('PLACEHOLDER', cellID);
    },
    position: "last"
   });

Я искалс помощью документации и примеров jqGrid, но не выяснили, как это установить. Идеи? Это 4.0 jqGrid.

Answer 1

Полагаю, вы используете стандартный CSS ASP.NET MVC, который приносит некоторые незначительные проблемы в jqGrid. Одним из них является ширина пейджера. Это может быть исправлено относительно

<style type="text/css">
    /* fix the size of the pager */
    input.ui-pg-input { width: auto; }
</style>

Другая небольшая рекомендация - использовать

<style type="text/css">
    table { border-style:none; border-collapse:separate; }
    table td { border-style:none; }
</style>

или

<style type="text/css">
    div.ui-jqgrid-view table.ui-jqgrid-btable {
        border-style:none;
        /*border-top-style:none;*/
        border-collapse:separate;
    }
    div.ui-jqgrid-view table.ui-jqgrid-btable td {
        border-left-style:none
    }
    div.ui-jqgrid-view table.ui-jqgrid-htable {
        border-style:none;
        /*border-top-style:none;*/
        border-collapse:separate;
    }
    div.ui-jqgrid-view table.ui-jqgrid-btable th {
        border-left-style:none
    } 
</style>

, что исправит некоторые проблемы с вычислением ширины и удалит ненужные горизонтальные полосы прокрутки. Я сделал запрос функции , чтобы внести соответствующие изменения в стандартный CSS jqGrid, но запрос остался без ответа.

Я рекомендую вам взглянуть на демо из ответа . Все настройки и некоторые другие приемы используются в демоверсии. Демо-проект понижен до VS2008, соответствует вопросу, но с минимальными изменениями вы можете преобразовать его обратно в VS2010.