Forum


18:45

12/05/2010

I am using the following HTML file to display the data from an XML file that is located in the root of my site. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>jqGrid Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/steel/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jqModal.js" type="text/javascript"></script>
<script src="js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'Executives.xml',
datatype: 'xml',
mtype: 'GET',
xmlReader : {
root: "executives",
row: "executive",
//page: "rows>page",
//total: "rows>total",
//records : "rows>records",
repeatitems: false,
id: "[id]"
//userdata: "userdata",
//subgrid: { root:"rows", row: "row", repeatitems: true, cell:"cell" }
}
colModel :[
{name:'email', index:'email', width:55, xmlmap:'email'},
{name:'name', index:'name', width:90, xmlmap: 'name'},
{name:'position', index:'position', width:80, xmlmap: 'position'},
{name:'phone', index:'phone', width:80, xmlmap: 'phone'}
],
//colNames:['Email','Name', 'Position','Phone'],
//colModel :[
// {name:'invid', index:'invid', width:55},
// {name:'invdate', index:'invdate', width:90},
// {name:'amount', index:'amount', width:80, align:'right'},
// {name:'tax', index:'tax', width:80, align:'right'},
// {name:'total', index:'total', width:80, align:'right'},
// {name:'note', index:'note', width:150, sortable:false}
// ],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: 'themes/steel/images',
caption: 'Sun News Executives' });
});
</script>
</head>
<body>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
</html>
The XML file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<executives>
<executive>
<email>mailto:derekdr@sunline.net</email>
<name>Derek Dunn-Rankin</name>
<position>Chief Executive Officer</position>
<phone>(941) 206-1001</phone>
</executive>
<executive>
<email>mailto:derekdr@sunline.net</email>
<name>Derek Dunn-Rankin</name>
<position>Chief Executive Officer</position>
<phone>(941) 206-1001</phone>
</executive>
<executive>
<email>mailto:daviddr@sun-herald.com</email>
<name>David Dunn-Rankin</name>
<position>President, Publisher</position>
<phone>(941) 206-1003</phone>
</executive>
<executive>
<email>mailto:porter@sun-herald.com</email>
<name>Chris Porter</name>
<position>Charlotte Sun Editor</position>
<phone>(941) 206-1134</phone>
</executive>
<executive>
<email>mailto:lcapasso@sun-herald.com</email>
<name>Lang Capasso</name>
<position>General Manager Venice Gondolier Sun</position>
<phone>(941) 206-1001</phone>
</executive>
<executive>
<email>mailto:bmudge@venicegondolier.com</email>
<name>Bob Mudge</name>
<position>Venice Gondolier Sun Editor</position>
<phone>(941) 207-1101</phone>
</executive>
</executives>
I am new to the grid and it looks terrific but I can't get beyond this point. Thanks for any help.
21:03

Moderators
30/10/2007

Hello,
Which version of jqGrid is used? I see it is the old one 3.4 maybe.
Also this should work.
How do you call the page - I mean
http://localhost..../mygrid.html
or you directly with double click
IMHO the only thing here is the id setting.
try to set the id in colModel like this
colModel :[
{name:'email', index:'email', width:55, xmlmap:'email', key:true},
{name:'name', index:'name', width:90, xmlmap: 'name'},
{name:'position', index:'position', width:80, xmlmap: 'position'},
{name:'phone', index:'phone', width:80, xmlmap: 'phone'}
],
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.
19:56

12/05/2010

Thanks for the reply.
It turned out to be a missing comma after the XMLReader parameter. I am using 3.4.3 because I could not get the new version to work.
I have another question. For the Email column, is it possible to make the value in each cell of the column a link that would open the user's email program and start an email to the person in that row of the grid. If this is possible, could I replace the text with some email icon so the user would only see the icon (not the text).
Thanks in advance
Most Users Ever Online: 715
Currently Online:
67 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.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66