jQuery Grid Plugin - jqGrid

I guess what I would expect is that the grid would be "expanded" to accomodate the buttons.  That *might* result in an "empty" column area but as it is I need to try trial and error to get all the buttons and lables to display.  Currently, the grid renders like this:

http://www.petesworkshop.com/i.....w_grid.jpg

Here is the code that creates the grid:

function loadGenericCodeTable(){
var lastsel;
var currsel;
var codeType = $('#codetablelist').val();
var rowSaved;
var jsonURL = '${.data_model.requestURI}?action=AjaxGetCodeTableList&listtype='+codeType;
var editURL='${.data_model.requestURI}?action=AjaxUpdateCodeTableListRow&listtype='+codeType;

// Dump the existing grid

$('#goCodeTables').GridDestroy();

var gridimgpath = 'stylesheets/themes/basic/images';

$('#goCodeTables').jqGrid({
   url: jsonURL,
   editurl:editURL,
   cache: false,
  datatype: 'json',
   height: 250,
   colNames:['Code', 'Message ID'],
  colModel:[
   {name:'crossReferenceCode',index:'crossReferenceCode', width:100, editable:true},
   {name:'msgCode',index:'msgCode', width:130, editable:true}
   ], 
  rowNum:-1,
  rowList:[10,20,30,40],
  pager: $('#goCodeTablespager'),
  sortname: 'crossReferenceCode',
     onSelectRow: function(id){
     currsel=id;
     if(lastsel!=id){

            if(id && (id != lastsel)){
                saveRowData($('#goCodeTables'),lastsel,editURL);
                $('#goCodeTables').editRow(id,true);          
                lastsel=id;               
            }

      }
    },
  sortorder: "desc",
  jsonReader: {repeatitems: false},
  caption: "General Code Table"
  });
 
  if($('#goCodeTablespager').find('table').length==2) // skip if already present
  $('#goCodeTables').navGrid('#goCodeTablespager',{ edit:false,add:false,del:false,search:false })
  .navButtonAdd('#goCodeTablespager',{ caption:"Add", buttonimg:"stylesheets/themes/basic/images/row_add.gif", onClickButton: function(){ addEmptyRow($('#goCodeTables'))} , position:"last" })
  .navButtonAdd('#goCodeTablespager',{ caption:"Del", buttonimg:"stylesheets/themes/basic/images/row_delete.gif", onClickButton: function(){ deleteRow($('#goCodeTables'),currsel)}, position:"last" })
  .navButtonAdd('#goCodeTablespager',{ caption:"Save", buttonimg:"stylesheets/themes/basic/images/save.gif", onClickButton: function(){ saveRowData($('#goCodeTables'),lastsel,editURL)}, position:"last" });

}

#1 - I'll take a look at the setup again.  I'll make sure the correct files/structure is in place.

#2 - I think I expected the grid to figure out what the width needed to be based on everything I add to it and then display it.  Yeah, I know, that is probably not a realistic expectation. 

In this case, pushing the grid size to a minimum of 700 pixels allows for the buttons to properly display.  That means that all of the grids I develop can be a minimum of 700 pixels so I can accomdate the buttons.  This isn't a big deal, just took me a while to figure out.

I would recommend a different algorithm option for alignment.  Maybe something like "balanced" or something.  If you look at the grid, now that I have expanded it to 700 pixels, you can see that there is much white space to the right of the pager which, if everything moved right as the grid was reduced in size, would allow the grid to shrink by maybe 100 pixels. 

http://www.petesworkshop.com/i.....grid_2.jpg

I guess what you are telling me is that the grid will adjust some but won't completely compensate by moving items to the right until it can all fit. I can live with that,  I just wanted to make sure that I wasn't missing out on an easier way to get it all to fit.

Thanks!

Thanks.  Yeah, the font sizing *does* seem wrong but I haven't been able to get it correct.  Your instructions says to do this:

• /myproject/css/
  • ui.jqgrid.css
  • /ui-lightness/
    • /images/
    • jquery-ui-1.7.2.custom.css
• /myproject/js/
  • /i18n/
    • grid.locale-bg.js
    • list of all language files
    • ….
  • Changes.txt
  • jquery-1.3.2.min.js
  • jquery.jqGrid.min.js

I am running a java servlet but the structure is really the same:

• /webapp/stylesheets/
  • ui.jqgrid.css
  • /themes/redmond/
    • /images/
    • jquery-ui-1.7.2.custom.css
• /webapp/scripts/js/
  • /i18n/
    • grid.locale-bg.js
    • list of all language files
    • ….

• /webapp/scripts/
  • jquery-1.3.2.min.js
  • jquery.jqGrid.min.js
  • Changes.txt

The HTML has the following entries:

<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/themes/redmond/jquery-ui-1.7.2.custom.css"  />
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/ui.jqgrid.css" />

    <script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" src="scripts/js/i18n/grid.locale-en.js"></script>
    <script  type="text/javascript" src="scripts/jquery.jqGrid.min.js"></script>

Not sure why it isn't rendering correctly.  These entries are very similar to what you have (*I think*)

Pete

Thanks for that information.

Actually, changing the font isn't the issue.  Tony noticed that the fonts looked wrong, indicating that perhaps something wasn't properly installed.  I am not sure what the issue is but I am not concerned with the fonts except that their size seems to be affecting the placement of buttons on the navigator.

I am not sure that is completely true but I still don't understand why the font is so big. There must a some css affecting it but even when I strip it down to the bare minimum, I still see the same font size.

Here is a shot of the datepicker and it doesn't seem to be affected by the font sizing on the grid.

http://www.petesworkshop.com/i.....shot_2.jpg

Pete

Thanks again Tony.  What should I look for?  Here is a shot of what Firebug shows:

http://www.petesworkshop.com/i.....shot_3.jpg

I'll see if I can get the grid posted to someplace outside the firewall so you can look at it.

Pete