javascript - Resize the jqGrid page edit box - Stack Overflow

admin管理员组

文章数量:1333169

In my ASP.NET MVC 3 app I have the pager enabled on my jqGrid, as shown in the picture below:

The textbox for Page (center of image with the number 1 in it) is really wide - way wider than it needs to be. Does anyone know how to adjust the size of this box?

This is particularly an issue when my grid is narrower than this one, at that point the textbox for the Page pushes (or is placed) too far to the left and ends up squashing the buttons, as seen in the picture below:

Here, the two buttons to the left of "Page" (previous page, first page) are under the "Edit" label that is part of my custom Edit button. Notice that the page box is still really wide. Also, the "View 1-10 of 1005" on the right side, visible in the first image, is truncated in the narrower grid.

Perhaps there is a setting for this or someone has a workaround. I'd rather the second grid not have to be wider than it needs to (my workaround is to set the width to a value rather than 'auto' or 'inherit', but that makes the grid columns wide. A properly sized textbox for Page would leave plenty of room for the pager buttons plus my own button.

The pager/custom button for my grid look something like this:

 .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"
   });

I've been looking through the jqGrid documentation and examples but haven't happened upon how to set this. Ideas? This is the 4.0 jqGrid.

In my ASP.NET MVC 3 app I have the pager enabled on my jqGrid, as shown in the picture below:

The textbox for Page (center of image with the number 1 in it) is really wide - way wider than it needs to be. Does anyone know how to adjust the size of this box?

This is particularly an issue when my grid is narrower than this one, at that point the textbox for the Page pushes (or is placed) too far to the left and ends up squashing the buttons, as seen in the picture below:

Here, the two buttons to the left of "Page" (previous page, first page) are under the "Edit" label that is part of my custom Edit button. Notice that the page box is still really wide. Also, the "View 1-10 of 1005" on the right side, visible in the first image, is truncated in the narrower grid.

Perhaps there is a setting for this or someone has a workaround. I'd rather the second grid not have to be wider than it needs to (my workaround is to set the width to a value rather than 'auto' or 'inherit', but that makes the grid columns wide. A properly sized textbox for Page would leave plenty of room for the pager buttons plus my own button.

The pager/custom button for my grid look something like this:

 .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"
   });

I've been looking through the jqGrid documentation and examples but haven't happened upon how to set this. Ideas? This is the 4.0 jqGrid.

• javascript
• asp-mvc-3
• jqgrid

Share Improve this question Follow edited Nov 21, 2012 at 22:56 Oleg 222k3535 gold badges412412 silver badges812812 bronze badges asked Jun 8, 2011 at 18:46 itsmattitsmatt 31.4k1111 gold badges102102 silver badges165165 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I suppose that you use ASP.NET MVC standard CSS which bring some minor problems in jqGrid. One from there is the pager width. It can be fixed with respect of

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

Another small remendation is to use

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

or

<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>

which would fix some problems with the width calculation and will remove unneeded horizontal scrolling bars. I made the feature request to make the corresponding changes in the standard CSS of jqGrid, but the request stay unanswerd.

I remend you to take a look in the demo from the answer. All the settings and some other tricks are used in the demo. The demo project are downgraded to VS2008 corresponds to the question, but with the minimal modifications you can convert it back to VS2010.

本文标签： javascriptResize the jqGrid page edit boxStack Overflow