jQuery Grid Plugin - jqGrid - Topic: Navgrid not displaying icons

tony on Navgrid not displaying icons

Wed, 02 Jun 2010 21:39:21 +0300

Hello,

Please follow these instructions

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

and make diffrence between standart and deveoplment installation

Best Regards

ploppy on Navgrid not displaying icons

Tue, 01 Jun 2010 13:51:27 +0300

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.

tim on Navgrid not displaying icons

Tue, 01 Jun 2010 01:23:38 +0300

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

ploppy on Navgrid not displaying icons

Mon, 31 May 2010 21:32:09 +0300

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.

ploppy on Navgrid not displaying icons

Mon, 31 May 2010 18:39:17 +0300

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>

ploppy on Navgrid not displaying icons

Mon, 31 May 2010 15:59:33 +0300

thank you tony. shall start from scratch. cheers

tony on Navgrid not displaying icons

Mon, 31 May 2010 14:24:01 +0300

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

ploppy on Navgrid not displaying icons

Mon, 31 May 2010 13:16:53 +0300

any help with this please? thanks

ploppy on Navgrid not displaying icons

Mon, 31 May 2010 00:23:39 +0300

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>