jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

Trouble With Navigation Bar - can't see the add/edit/del buttons

Tags: navigation

27/07/2010
22:05

shawn

Member

Members

Forum Posts: 3

Member Since:
27/07/2010

Offline

I'm having a problem with the navigation bar. For some reason, I cannot easily see the various buttons (e.g. edit, add, etc.). I'm assuming that I'm doing something wrong, but I can't seem to find out what the issue is. Plus, I'm noticing that the page and row count information is showing up on the left side of the navigation which is different than the various demos. I'm hoping you can help. Below is the code.

I've also put this on my beta site at http://beta.vinoez.com.

Thanks for your help!!

Shawn

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT.....";>

<html>

<head>

var mydata = [

{"id":"35","location":"CH","description":"Chicago"},

{"id":"36","location":"CI","description":"So Cal"},

{"id":"37","location":"FT","description":"FT"},

{"id":"38","location":"HO","description":"HO"},

{"id":"39","location":"AT","description":"AT"},

{"id":"40","location":"BF","description":"BF"},

{"id":"41","location":"DN","description":"DN"},

{"id":"42","location":"FC","description":"FC"},

{"id":"43","location":"FM","description":"FM"},

{"id":"44","location":"LR","description":"LR"},

{"id":"45","location":"MA","description":"MA"}

];

jQuery(document).ready(function(){

jQuery('#htmlTable').jqGrid({

colNames:['id','location','description'],

colModel:[{name:'id',index:'id',width:30,sortable:true,editable:true,formatter:'integer'},

{name:'location',index:'location',width:120,sortable:true,editable:true},

{name:'description',index:'description',width:165,sortable:true,editable:true}],

data: mydata,

datatype: 'local',

height: 200,

width: 800,

shrinkToFit: false,

multiselect: true,

cellEdit: false,

recordpos: 'left',

pager: '#htmlPager',

rowNum:100,

rowList:[100,200,300],

sortname: 'id',

sortorder: "asc",

viewrecords: true,

rownumbers: true,

emptyrecords: "Nothing to display",

caption: 'LOCATION',

}).navGrid('#htmlPager');

});

</script>

</head>

<body>

</body>

</html>

28/07/2010
08:06

michaelg

Member

Members

Forum Posts: 51

Member Since:
10/04/2010

Offline

Hi shawn,

can you try ...

pager: jQuery('#htmlPager')

... instead of

pager: '#htmlPager'

Cheers,

Michael

28/07/2010
19:11

shawn

Member

Members

Forum Posts: 3

Member Since:
27/07/2010

Offline

michaelg said:

Hi shawn,

can you try ...

pager: jQuery('#htmlPager')

... instead of

pager: '#htmlPager'

Cheers,

Michael

Hey Michael,

Thanks for the suggestion. I tried that. And I have the same issue.

Also, I didn't give the full URL on my original post. It is here: http://beta.vinoez.com/ui/test2.php (I updated the code with your recommendation).

Thanks,

Shawn

28/07/2010
19:59

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

The usage of recordpos: 'left' overwrite the icons from the navigation bar. I recomend you hold just remove this option.

Moreover you should remove comma after the caption: 'LOCATION'.

Best regards
Oleg

28/07/2010
20:52

shawn

Member

Members

Forum Posts: 3

Member Since:
27/07/2010

Offline

Oleg....

That did the trick!!! Thanks for your help. Much appreciated. I've been spending countless hours on this issue.

Take care,

Shawn