jQuery Grid Plugin - jqGridForum

Topic RSS

Theme Problem

20/07/2009
22:09

lance123

Member

Members

Forum Posts: 9

Member Since:
21/07/2009

Offline

Hi To All,

I am trying to get the version 3.5 beta version up and going. I am having trouble with the theme looking wrong. (text is wrong size, not table header and the cells don't look like the theme they just have a line around them.) Is it the way I am trying to reference the dependencies? Have I missed a dependency? I tried to follow the install.txt on github. Thanks for any help, Lance

<html>

<head>

<title>jqGrid Demo</title>

jQuery(document).ready(function(){

jQuery("#list").jqGrid({

url:'testJqgrid.php',

datatype: 'xml',

mtype: 'GET',

colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],

colModel :[

{name:'invid', index:'invid', width:55},

{name:'invdate', index:'invdate', width:90},

{name:'amount', index:'amount', width:80, align:'left'},

{name:'tax', index:'tax', width:80, align:'left'},

{name:'total', index:'total', width:80, align:'left'},

{name:'note', index:'note', width:150, sortable:true} ],

pager: jQuery('#pager'),

rowNum:10,

rowList:[10,20,30],

sortname: 'id',

sortorder: "desc",

viewrecords: true,

imgpath: 'jqgrid/css/themes/coffee/images',

caption: 'My first grid'

});

</script>

</head>

<body>

</body>

</html>

22/07/2009
01:19

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Try with this:

.....

<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}

</style>

....

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.

23/07/2009
07:55

lance123

Member

Members

Forum Posts: 9

Member Since:
21/07/2009

Offline

Hi Tony,

Thanks very much for the reply. I added this mod, but I am still getting no caption header graphic or nice style to the grid.

I have tried all sorts of changes to the dependencies. Any further tips would be really appreciated. ps changing the imgpath:

seems to do nothing, the pager div is unaffected?

Regards,

Lance

27/07/2009
03:19

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

It seems that some css are not loaded. Please use FireBug and ensure that all the css files are loaded

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/07/2009
06:38

tnesham

Member

Members

Forum Posts: 5

Member Since:
26/07/2009

Offline

lance123 said:

Hi Tony,

Thanks very much for the reply. I added this mod, but I am still getting no caption header graphic or nice style to the grid.

I have tried all sorts of changes to the dependencies. Any further tips would be really appreciated. ps changing the imgpath:

seems to do nothing, the pager div is unaffected?

Regards,

Lance

I just started looking at this grid this weekend and I had a similar problem. What I finally noticed is how version 3.5 is different in this area from previous versions. This version is using the Jquery UI.

It seems you are mixing older CSS. If you look at this: http://www.trirand.com/blog/?p.....-cell-edit

You can see the correct CSS and JS links. Get rid of yours and paste those in your page. After that works (and it did for me), then find the files and copy to your web server and fix you link references.

(Note: when copy pasting, make sure your double-quotes are correct ascii double-quotes; do search and replace.

So “ becomes ")

(also, watch out for cutting off </script> )

The last "gotcha" is the images location. If your CSS is at webroot/css then your images need to be at webroot/css/images. The images can be found in the same location as the other files, or http://www.trirand.com/jqgrid3.....s/redmond/

The thing about this to keep in mind is that the image files and jquery-ui-1.7.1.custom.css make up a unique theme. You cannot use a different jquery-ui-1.7.1.custom.css with different images because jquery-ui-1.7.1.custom.css refers to *those* images, while a different jquery-ui-1.7.1.custom.css can refer to different images depending on the theme.

28/07/2009
08:43

lance123

Member

Members

Forum Posts: 9

Member Since:
21/07/2009

Offline

Hi tnesham,

That is fantastic! I have been banging my head against this for a few days now and that sorted it beautifully 😉

Thanks once again I am looking forward to using this,

Lance

04/08/2009
11:21

jarrod

Guest

Guests

Hi,

I seem to have the same problem. I have tried everything you suggested but still do not get the correct style or images loading. I am using the trunk version of MonoRail.

Is there any information I could provide you with that would help us solve this problem?

Regards,

Jarrod