jQuery Grid Plugin - jqGridForum

Topic RSS

Navgrid not displaying icons

31/05/2010
00:23

ploppy

Member

Members

Forum Posts: 38

Member Since:
28/10/2009

Offline

hello

i am following the wiki re navigation and the code that i have does not produce any buttons(icons) in the navigation bar(pager). i have attached my code and would be grateful if someone could check and see where i have gone wrong. i am using v3.5.3. many thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT.....t;>
<html xmlns="http://www.w3.org/1999/xhtml&q.....t;>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Demo</title>
<style>
html, body {
   margin: 0;           /* Remove body margin/padding */
   padding: 0;
   overflow: auto;   /* Remove scroll bars on browser window */
   font: 12px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana;
}
</style>

<link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />
<script src="js/jqDnR.js" type="text/javascript"></script>
<script src="js/jqModal.js" type="text/javascript"></script>
<script src="js/grid.common.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/formatter.js" type="text/javascript"></script>
<script src="js/grid.formedit.js" type="text/javascript"></script>
<script src="js/search2.js" type="text/javascript"></script>

<script src="js/jquery.js" type="text/javascript"></script>

<script src="js/jquery.jqGrid.js" type="text/javascript"></script>

jQuery(document).ready(function(){
jQuery("#list2").jqGrid({
    url:'example.php',
   datatype: "json",
   caption:"JSON Example",
   editurl: 'edit.php',
    colNames:['Id','Slot', 'Service', 'Activity','User','Item','Filebox'],
    colModel:[
        {name:'id',index:'id', width:55},
        {name:'slot',index:'slot', width:210},
        {name:'service',index:'name asc, service', editable:true, width:100},
        {name:'activity',index:'activity', width:110, align:"left"},
        {name:'user',index:'user', width:80, align:"left"},
        {name:'item',index:'item', width:80,align:"left", editable:true},
        {name:'filebox',index:'filebox', width:150, sortable:false}
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager2',
   emptyrecords: "Nothing to display",
   imgpath: 'themes/basic/images/',
   autowidth: true,
   height: 'auto',
   altRows: true,
    sortname: 'id',
   autowidth: true,
    viewrecords: true,
    sortorder: "desc",
   pgbuttons: true,
});});

jQuery("#list2").navGrid('#myvalue',
               {edit:true,add:true,refresh:true,del:true,search:true
               })
               .navButtonAdd('#pager2',{
        caption:"", buttonicon:"ui-icon-comment", onClickButton:(function() {
   jQuery("#list2").setColumns();
   return false;
}) ,
position:"last", title: 'Toggle Columns'})
.navButtonAdd('#pager2',{
          caption:"", buttonicon:"ui-icon-document", onClickButton: function() {
alert("Please be patient as there may be a lot of files to add."),document.location.href='ExportToExcel.php?e=act';
},
position:"last", title: 'Export to Excel' });

</script>
</head>
<body>

<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>

<div id="pager2" class="scroll" style="text-align:center;"></div>

</body>
</html>

Wish i knew more about jqGrid

31/05/2010
13:16

ploppy

Member

Members

Forum Posts: 38

Member Since:
28/10/2009

Offline

any help with this please? thanks

Wish i knew more about jqGrid

31/05/2010
14:24

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Please read carfully the installation guide here:

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

You missed a lot of thisnfgs.

1. You load the old theme CSS file

2. You do not load jQuery UI theme

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.

31/05/2010
15:59

ploppy

Member

Members

Forum Posts: 38

Member Since:
28/10/2009

Offline

thank you tony. shall start from scratch. cheers

Wish i knew more about jqGrid

31/05/2010
18:39

ploppy

Member

Members

Forum Posts: 38

Member Since:
28/10/2009

Offline

tony

i have now got a working grid thank you, but the navGrid icons do nothing when i click them and also beneath the pager the text

'Warning no row selected' appears and i haven't selected a row. all i have done is load the grid. what am i doing wrong? i have posted revised code. cheers

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT.....t;>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>

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

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

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jqDnR.js" type="text/javascript"></script>
<script src="js/jqModal.js" type="text/javascript"></script>
<script src="js/grid.formedit.js" type="text/javascript"></script>
<script src="js/grid.common.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
    url:'new.php',
    datatype: 'json',
    mtype: 'POST',
    colNames:['Id','Title', 'Director', 'Year','Bond','Budget'],
    colModel :[
      {name:'id', index:'id', width:55},
      {name:'title', index:'title', width:90},
      {name:'director', index:'director', editable:true, width:90},
      {name:'year', index:'year', width:80, align:'right'},
      {name:'bond', index:'budget', width:80, align:'right'},
      {name:'budget', index:'budget', width:80, sortable:false}

    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
   imgpath: 'themes/ui-lightness/images',
    sortname: 'id',
   autowidth: true,
   altRows: true,
    sortorder: 'desc',
   editurl: 'edit.php',
    viewrecords: true,
    caption: 'My first grid'
}).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true },
             {},//Options for the Edit Dialog
             {},//Options for the Add Dialog
             {}//Options for Delete

),

});
</script>

</head>
<body>
<table id="list"></table>
<div id="pager"></div>

</body>
</html>

Wish i knew more about jqGrid

31/05/2010
21:32

ploppy

Member

Members

Forum Posts: 38

Member Since:
28/10/2009

Offline

here are 2 examples of what i am referring too.

1) the warning appears whenever i create icon. ie, search:true

2) if i enable say the find with search:true then what you see in image 2 happens. i cannot move forward until i understand why this is happening. i have read over again the docs and wiki and my code is identical. where is it going wrong. many thanks tony.

Wish i knew more about jqGrid

01/06/2010
01:23

tim

Calgary Alberta Canada

Member

Members

Forum Posts: 61

Member Since:
04/11/2009

Offline

Your load order is all wrong.

Curious, why are you're loading these separately?

Why are you not including them in the min file build?

If you need to separate them then follow the load order as set in the load file (jquery.jqGrid.js) as found in source from github.

Yours are kinda backwards.

tim

01/06/2010
13:51

ploppy

Member

Members

Forum Posts: 38

Member Since:
28/10/2009

Offline

hi tim. thanks for reply. where in the docs does it state the load order? and also, is there docs for including in the min build? also, what is github? jeez, i seem to have missed some very important steps? many thanks for your help.

Wish i knew more about jqGrid

02/06/2010
21:39

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Please follow these instructions

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

and make diffrence between standart and deveoplment installation

Best Regards

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.