Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
Correct width alignment of buttons and text in Navigator
27/12/2009
02:07
Avatar
Pete
Member
Members
Forum Posts: 100
Member Since:
01/09/2008
sp_UserOfflineSmall Offline

I am trying to figure out how best to get the buttons I add with .navButtonAdd to properly display when I have very narrow columns.  Lets say that I have two columns and they are 100 pixels each.  When I render the grid, the columns display just fine but the three buttons I added to the navigator,which also has the pager, all get bunched over to the left and aren't readable. Even if I set the total grid width to 600 pixels, the text and icons in the footer of the grid are all bunched to the left.

Is there a way to set the width the area that the added buttons display in?

28/12/2009
14:53
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Check your code, especially the positions of the navigator buttons elements. When the pager is created we divide it in 3 parts and we try to put all the buttons (if there is available space for this)

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

28/12/2009
17:41
Avatar
Pete
Member
Members
Forum Posts: 100
Member Since:
01/09/2008
sp_UserOfflineSmall Offline

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

}

28/12/2009
18:16
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

1.Something is not correct with the html definition. See here what you need to put

in the html definition when using the grid

http://www.trirand.com/jqgridw.....to_install

2. How do you expect to put so many buttons on pager when you do not have enoght room for this?

Please set the width of the grid to greater value.

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

28/12/2009
20:29
Avatar
Pete
Member
Members
Forum Posts: 100
Member Since:
01/09/2008
sp_UserOfflineSmall Offline

#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.  Smile

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!

29/12/2009
16:34
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

From the picture provided here I see that something is not good. The font-size is too big. Plese take a look at the instalation instructions.

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

31/12/2009
00:08
Avatar
Pete
Member
Members
Forum Posts: 100
Member Since:
01/09/2008
sp_UserOfflineSmall Offline

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

31/12/2009
03:09
Avatar
newperson
Member
Members
Forum Posts: 27
Member Since:
28/12/2009
sp_UserOfflineSmall Offline

You know how to change the font size?

In your head section of your html add the following

<style> .ui-jqgrid {font-size:0.8em} </style>

Change the 0.8em to meet your needs.

02/01/2010
00:40
Avatar
Pete
Member
Members
Forum Posts: 100
Member Since:
01/09/2008
sp_UserOfflineSmall Offline

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.

03/01/2010
19:25
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Try to use some other widgest from jQuery UI her and see the result. I'm sure they will appear in the same way.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

07/01/2010
01:40
Avatar
Pete
Member
Members
Forum Posts: 100
Member Since:
01/09/2008
sp_UserOfflineSmall Offline

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

07/01/2010
20:57
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Without providing the link to the problem can not help. I feel that the grid css is not loaded - or at least the path to the css is wrong. Check this in FireBug - Net tab

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

09/01/2010
22:51
Avatar
Pete
Member
Members
Forum Posts: 100
Member Since:
01/09/2008
sp_UserOfflineSmall Offline

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

13/01/2010
14:41
Avatar
mcurtis
Belgium
New Member
Members
Forum Posts: 1
Member Since:
11/01/2010
sp_UserOfflineSmall Offline

Pete said:

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


Hi, it is my first answer here and I do not know if this should help, but i also had a problem with the font size, and I got rid of it changing the doctype…

<!doctype html public “… 4.01… loose.dtd”>

I don't really understand why it helped so…
You maybe have the same problem...

Michel

14/01/2010
22:26
Avatar
shah
Member
Members
Forum Posts: 26
Member Since:
30/12/2009
sp_UserOfflineSmall Offline

mcurtis said:

Post edited 14:42 – 13/01/2010 by mcurtis


Pete said:

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


Hi, it is my first answer here and I do not know if this should help, but i also had a problem with the font size, and I got rid of it changing the doctype…

<!doctype html public “… 4.01… loose.dtd”>

I don't really understand why it helped so…
You maybe have the same problem…

Michel


what excactly did u change?

18/01/2010
23:30
Avatar
Pete
Member
Members
Forum Posts: 100
Member Since:
01/09/2008
sp_UserOfflineSmall Offline

WOW! Thanks.  That was *exactly* it!  I changed the doc type from:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 loose.dtd">

And that took care of the issue!

Pete

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
22 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information