0

jqgrid with jquery ui Redmond theme is used.

Top level toolbar contains standard add, delete etc buttons and custom buttons created like

   $grid = $("#grid");
   $grid.jqGrid("navGrid", "#grid_toppager", { 
        search:  true,
        del: true,
        add: true,
        refresh: true, 
        edit: true } );
   $grid.jqGrid('navButtonAdd', '#grid_toppager', {
        caption: '',
        id: "grid_printbutton",
        title: 'Print order',
        buttonicon: 'ui-icon-print'
    });

html:

   <div id="grid1container" style="width: 100%; height: 100%">
        <table id="grid">
        </table>
    </div>

Buttons contain only icons, no caption. Page contains also toolbar with normal buttons created using jquery ui button() function. jqgrid button height and width is smaller than normal buttons created using jquery ui button function. It is difficult for users to click them in typical screen resolution.

How to make jqgrid top level toolbar buttons sizes the same as standard jquery ui buttons ? Can buttons width and height increased or is it possible to create other toolbar with same buttons and force them to invoce correspondiga jqgrid toolbar button actions ?

Andrus
  • 26,339
  • 60
  • 204
  • 378

1 Answers1

0

Just use a CSS style, in this example,

#grid_printbutton { /*Styles to match other button themes */}

That will style your button. Depending on the width/height of your button you may also dig into the CSS style defaults for the grids to ensure that the grid/pager area has enough room to display this larger buttons.

For the prebuilt buttons they are being styled by 

<td id="search_GridName" class="ui-pg-button ui-corner-all" title="Find records">
   <div class="ui-pg-div">
      <span class="ui-icon ui-icon-search"></span>
   </div>
</td>

So to style those you can apply some specific styles. Inline buttons you can find something similar. Though the amount of information your grid will be displaying will be reduced if you increase your row size to accommodate the larger inline row buttons.

Mark
  • 3,123
  • 4
  • 20
  • 31
  • Thank you. Toolbar contains lot of buttons. Many of them are generated by jqgrid by navToolbar call, I dont know their ids. There are also inline edit buttons. How to force all them to be as large as standard jquery UI buttons created with button() ? Creating huge number of styles for every id seems not reasonable. – Andrus Jan 06 '13 at 09:32
  • I updated question and added navGrid call which creates jqgrid default buttons. – Andrus Jan 06 '13 at 09:40
  • I updated my answer to show you where the default pager buttons are being built and styled. You should be able to examine these buttons and see what classes are styling them via Firebug or such. – Mark Jan 06 '13 at 17:29
  • Thank you. I tried you suggestion and posted question based on it in http://stackoverflow.com/questions/15530450/how-to-make-jqgrid-top-toolbar-custom-buttons-bigger-like-standard-buttons – Andrus Mar 20 '13 at 17:42