I'm new to jqGrid, and I tried to make a simple jqGrid working.
I copied the code from http://www.trirand.com/blog/jqgrid/jqgrid.html and put it in a html file, then open it with firefox, but the grid can't load data successfully
here is the html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css"/>
<link rel="stylesheet" type="text/css" href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css"/>
<script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.js"></script>
<script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.layout.js"></script>
<script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/ui.multiselect.js"></script>
<script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.tablednd.js"></script>
<script type="text/javascript" src="http://www.trirand.com/blog/jqgrid/js/jquery.contextmenu.js"></script>
</head>
<body>
<table id="list2">
</table><div id="pager2"></div>
</body>
<script type="text/javascript">
jQuery("#list2").jqGrid({
url:'http://www.trirand.com/blog/jqgrid/server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{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}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
</script>
</html>
The code which you posted has many problems.
The first one is the you use url:'http://www.trirand.com/blog/jqgrid/server.php?q=2' which is wrong. You can open the URL in web browser and see the results, but you can't use it in Ajax requests because of important security restrictions known as same origin policy. You can get JSON data only from his own web site. So you can for example to save the data returned by url:'http://www.trirand.com/blog/jqgrid/server.php?q=2' in a file like my.json and use url: 'my.json'. In the case your code will work.
The next problem is that you have to include some form of <!DOCTYPE html ... statement before <html>. It's really important!!! If you don't do this then web browsers will try to simulate the behavior of very old browsers like IE5 in Internet Explorer browsers. Such mode has the name quirks mode.
Next problem is that you code don't hold any HTML standards because you included <script> after the <body>. I recommend you verify you page in some HTML validator like this one.
It is good practice to place JavaScript code inside of $(function(){/*place code here*/});. See jQuery.ready for more details.
The URL you are calling
http://www.trirand.com/blog/jqgrid/server.php?q=2
is returning an error:
Warning: Division by zero in
/home/trirand/public_html/blog/jqgrid/server.php on line 145 Could not
execute query.You have an error in your SQL syntax; check the manual
that corresponds to your MySQL server version for the right syntax to
use near '' at line 1
You'll need to get the data query working first :-)
It's probably also worth handling load errors so that you can show a meaningful error message if something goes wrong. There's a full discussion here:
How can I get JQGrid to recognize server sent Errors?
Related
I am new with using the Kendo data source and so far it is not working. My page is extremely simple.
<head>
<meta name="viewport" content="width=device-width" />
<title>View Quote Lists</title>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/styles/kendo.common.min.css" rel="stylesheet" />
<link href="/styles/kendo.default.min.css" rel="stylesheet" />
<link href="/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
</head>
<body>
<div>
</div>
<script src="/Scripts/jquery-2.1.3.min.js"></script>
<script src="/Scripts/kendo.all.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script>
var query = "3";
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/QuoteAPI?page=1",
dataType: "json"
},
requestEnd: function() {
console.log(JSON.stringify(dataSource.data()))
}
}
});
dataSource.read();
</script>
</body>
The server data set that is returned from the service is an object that looks like:
{
{"QuoteCount":13393,"CurrentPage":1,"Quotes":[{"QuoteID":"B0339420-52C1-4762-8F41-474BE601E872","QuoteNo":"00014857","QuoteDate":"2015.03.09","netgainID":"5BDF1655-CB35-4326-80E3-6DCA0CC00C8B","Qty":1.0,"SKU":"CC1512570","Product":"WELDMNT,ANTLER FRAME ","Price":186.66,"Customer":"Grady Health Systems","repID":"{CA7A9606-8EAB-447E-934E-C52B4D8E06C6}","Rep":"Kirkland, Travis"},{"QuoteID":"B0339420-52C1-4762-8F41-474BE601E872","QuoteNo":"00014857","QuoteDate":"2015.03.09","netgainID":"8DBF5603-DAED-4DF8-89FD-1A172CA3589E","Qty":4.0,"SKU":"CC0900265","Product":"FRONT FLOOR PLATE (PR) 175 KIT","Price":28.95,"Customer":"Grady Health Systems","repID":"{CA7A9606-8EAB-447E-934E-C52B4D8E06C6}","Rep":"Kirkland, Travis"}......]
When I load the page is calls the web service and returns the data which I can see using Google tools. However the line dataSource.read() gives an error
Uncaught TypeError: undefined is not a function kendo.all.min.js:11
The requestEnd function is never called so I can't see the data even though it has been called.
Can someone tell me why this is not working. I have tried every variation of the docs that seem appropriate but this refuses to work.
Thanks,
Terry
Can you move requestEnd out side of transport block and try? If it doesn't help create a Kendo Dojo to replicate the problem so that it's easier to fix it there.
Here is a dojo with similar code that is working, except that I am using jsonp.
I cannot get my data to show in jqgrid. I am using exactly the same code from this working example:
jqgrid won't load json data
My data is different, but not substantially so:
{"records":95,"page":1,"total":1,"rows":[{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"}]}
I hate to re-open the same issue, but this is very frustrating to me.
EDIT: Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InfoMaker Monitor</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<!CDATA[
jQuery(function () {
'use strict';
jQuery("#jsonmap").jqGrid({
url: 'http://localhost:8888/nancy/readasjson'
,datatype: 'json'
,ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }
// see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
,jsonReader : {
page: "page"
, total: "total"
, records: "records"
, rows: "rows"
,cell: "cell"
,id: "id",
}
,colNames: ['Report','File']
,colModel :[
{name:'Report' ,index:'Report', width:55}
,{name:'File',index:'File', width:55}
]
,rowNum:10
,rowList:[10,20,30]
,viewrecords: true
,loadComplete: function() {
console.log("Load Complete");
//console.log("URI: " + jQuery("#jsonmap").jqGrid.datatype );
}
,loadError: function(xhr,st,err) {
console.log(xhr.statusText);
//$("#jsonmapMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
}
,width: '900'
,height: 'auto'//'300'
,caption: 'My first grid'
});
jQuery("#jsonmap").jqGrid('navGrid','#pjmap',{edit:true,add:false,del:false});
});
//]]>
</script>
</head>
<body>
<table id="jsonmap"><tr><td></td></tr></table>
<div id="pjmap"></div>
</body>
</html>
And here is how the data looks now:
{"records":10,"page":1,"total":1,"rows":[{"id":61,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":62,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":63,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":64,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":65,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":68,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":77,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":79,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":80,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":81,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}}]}
I am tempted to fork the jqgrid source and add some console.log messages to it! Because failing mysteriously with no message is a great barrier to adoption.
The JSON data which you use has another format as in the referenced question, so jqGrid is, of cause, not able to read your data. jsonReader option describes the format of input data for jqGrig. If rows array contains object with named properties one should use jsonReader: {repeatitems: false}. In the case the colModel parameter should have columns with name: "Report" and name: "File".
The next problem of your JSON data - it has no id information for items of the rows. In the case jqGrid will use integer values 1, 2, 3... as rowids. Such automatical generation of ids will work good only for one grid per page. The second grid will have id duplicates. So it's recommended to include additional property id in every item of the array rows of the JSON input.
Good day.
I try to use jqGrid in my web project.
everything is good but one moment.
I want to enable filterToolbar but I can't.
I used lot of documentation and examples without good result.
data in grid is good
sorting is good
PROBLEM: filterPanel is invisible
Version: jqGrid 4.3.1 - jQuery Grid
Browser: Chrome and Internet Explorer
Please have a look on my code.
Thanks a lot.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery.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>
</head>
<body>
<table id="listU05"></table>
<div id="pager"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#listU05").jqGrid({
url:'u05json.json',
datatype: 'json',
mtype: 'POST',
colNames:[
'thema'
],
colModel :[
{name:'Thema', index:'Thema', width:55}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'Thema',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'My first grid11',
width:200
});
});
jQuery("#listU05").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false, defaultSearch : "cn"});
</script>
</body>
I think the problem is that you placed call of filterToolbar outside of the $(document).ready event handler $(document).ready(function(){...});. As the result the filterToolbar will be called before the grid created. Moving the call of filterToolbar at the end of $(document).ready event handler should solve the problem.
Moreover you should include !DOCTYPE declaration before <html>. For example it can be <!DOCTYPE html> or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.
‘Hi I'm new using jquery and the jqgrid and have hit an issue I cant work out and have searched every where for answers and have found none.'
'I'm developing within the coldfusion environment and my grid loads and populates fine but the grouping that I have enabled is not working and I think it maybe my JSON data format but cant be sure.'
'My JSON format looks like this:'
{"ROWS":[["Account Enquiry","Adding a myki",77.0,105.0,-0.27,385.0,601.0,-0.36], ["Account Enquiry","Archive cards",0.0,64.0,0.00,451.0,17.0,25.53],["Account Enquiry","Cancelling an account",27.0,52.0,-0.48,164.0,165.0,-0.01],["Account Enquiry","Change of details",305.0,483.0,-0.37,2400.0,2311.0,0.04],["Account Enquiry","Consolidate cards",0.0,84.0,0.00,685.0,45.0,14.22],["Account Enquiry","Obtain Balance",560.0,1272.0,-0.56,6828.0,3604.0,0.89],["Account Enquiry","Removing a myki",16.0,28.0,-0.43,87.0,112.0,-0.22],["Account Enquiry","Retrieve cards",0.0,13.0,0.00,56.0,1.0,55.00],["Account Enquiry","Tax invoice request",11.0,33.0,-0.67,103.0,42.0,1.45],["Account Enquiry","Transaction history",502.0,1035.0,-0.51,5370.0,3334.0,0.61]],"PAGE":1.0,"RECORDS":10,"TOTAL":1.0}
'Using the following CFC.’
<cfcomponent displayname="InvoiceMgr" output="false">
<cffunction name="getInvoices" access="remote" output="false" returnformat="json">
<cfset invoices = ArrayNew(1) />
<cfquery datasource="CS_1″ name="q">
SELECT top 10 name, segment, current_month, previous_month, convert(numeric(17,2),m_variance) as m_variance, current_year, previous_year, Convert(numeric(17,2),y_variance) as y_variance
FROM dbo.csg_disposition_dashboard_4
group by name, segment, current_month, previous_month, m_variance, current_year, previous_year,y_variance
order by name asc
</cfquery>
<cfloop query="q">
<cfset invoices[currentrow] = [#name#,#segment#,#current_month#, #previous_month#,#m_variance#, #current_year#, #previous_year#,#y_variance#]>
</cfloop>
<cfset str = {total=1, page=1, records=#q.recordcount#, rows=invoices}>
<cfreturn str />
</cffunction>
</cfcomponent>
‘The Javascript i'm using is:’
jqGrid
<!–<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/css/ui.jqgrid.css" />–>
<script type="text/javascript" src="/Jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/Jquery/js/jquery-ui-1.8.14.custom.min.js">
</script>
<script type="text/javascript" src="/Jquery/src/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/Jquery/src/grid.base.js"></script>
<script type="text/javascript" src="/Jquery/src/grid.common.js"></script>
<script type="text/javascript" src="/Jquery/src/grid.formedit.js"></script>
<script type="text/javascript" src="/Jquery/src/grid.inlinedit.js"></script>
<script type="text/javascript" src="/Jquery/src/grid.custom.js"></script>
<script type="text/javascript" src="/Jquery/src/jquery.fmatter.js"></script>
<script type="text/javascript" src="/Jquery/src/grid.grouping.js"></script>
<script type="text/javascript" src="/Jquery/src/grid.treegrid.js"></script>
<script type="text/javascript" src="/Jquery/src/grid.jqueryui.js"></script>
<!–<script type="text/javascript" src="/Jquery/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/Jquery/js/jquery.jqGrid.min.js"></script>–>
<script type="text/javascript">
$(document).ready(function(){
$("#list").jqGrid({
url:'contacts1.cfc?method=getInvoices',
datatype: 'json',
colNames:['Source','Segment','August','July','Variance','2011','2010','Variance'],
colModel :[
{name:'name',index:'name', width:250, editable:true},
{name:'segment',index:'segment', width:200},
{name:'current_month',index:'current_month', width:100,align:"center",sorttype:"int",summaryType:'sum'},
{name:'previous_month',index:'previous_month', width:100,align:"center",sorttype:"int",summaryType:'sum'},
{name:'m_variance',index:'m_variance', width:80,align:"center",sorttype:"int",summaryType:'avg'},
{name:'current_year',index:'current_year', width:100,align:"center",sorttype:"int",summaryType:'sum'},
{name:'previous_year',index:'previous_year', width:100,align:"center",sorttype:"int",summaryType:'sum'},
{name:'y_variance',index:'y_variance', width:80,align:"center",sortable:false,summaryType:'avg'}],
pager: $('#pager'),
rowList:[100,300,600,1000],
width: 'auto',
height: 'auto',
sortname: "name",
sortorder: "desc",
viewrecords: true,
jsonReader: {
root: "ROWS",
page: "PAGE",
total: "TOTAL",
cell: "",
id: "id",
caption: "Disposition Codes",
grouping:true,
groupingView : {
groupField : ['name'],
groupDataSorted : true
}
}}
);
});
</script>
</head>
<body>
<table id="list" class="scroll"> <div id="pager" class="scroll" style="text- align:center;"> </body>
</html>
‘I really would like some help on this as I'm at the end of sanity, head hitting desk.
Looking forward to someone knowing the answer.
Regards
Mayson’
Make sure your jQGrid version is 3.8+, as it will not work for previous version. The way you are defining your jqgrid script files, it seems like you are using older version
I am using jqGrid 3.7.2 with local data. For some columns the default sorttypes are not sufficient. I need to provide a custom sorttype, which I understand from the documentation is possible. I don't know how to get it to work though. The code below is my best attempt at getting it to work - I can't make it call the custom sorting function though. The idea is to sort the 'Posn' field in the order 'GK'->'DEF'->'MID'->'STR'. Here is the code I'd like to get working:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table Testbed</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/south-street/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="/thirdParty/jqGrid/ui.jqgrid.css" >
<script type="text/javascript" src="/thirdParty/jqGrid/grid.locale-en.js"></script>
<script type="text/javascript" src="/thirdParty/jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$().ready(function()
{
tableToGrid("#playerTable",
{
datatype: "local",
sortable: true,
hidegrid: false,
multiselect: false,
altRows: true,
height: "100%",
width: "155px",
shrinkToFit: true,
rowNum: 100,
colNames: ['Posn','Name'],
colModel: [
{name:'Posn', index:'Posn', width:100, sorttype:
function(cell)
{
if (cell=='GK') return '0';
if (cell=='DEF') return '1';
if (cell=='MID') return '2';
if (cell=='STR') return '3';
}
},
{name:'Name', index:'Name', width:200, sorttype:"text"}
]
});
});
</script>
</head>
<body>
<table id="playerTable">
<thead>
<tr><th>Posn</th><th>Name</th></tr>
</thead>
<tbody>
<tr><td>GK</td><td>Almunia</td></tr>
<tr><td>GK</td><td>Fabianski</td></tr>
<tr><td>DEF</td><td>Campbell</td></tr>
<tr><td>DEF</td><td>Clichy</td></tr>
<tr><td>MID</td><td>Denilson</td></tr>
<tr><td>MID</td><td>Diaby</td></tr>
<tr><td>STR</td><td>Arshavin</td></tr>
<tr><td>STR</td><td>Bendtner</td></tr>
</tbody>
</table>
</body>
</html>
Probably you read about the usage of sorttype as a function in Tony's answer to my thread http://www.trirand.com/blog/?page_id=393/help/custom-local-sort-with-respect-of-the-function-as-index/. Your problem could be very easy solved. My suggestion to use index as a function for custom sorting of local jqGrid data work fine in the version 3.7.1, but not more in the version 3.7.2 of jqGrid. The feature sorttype as a function is implemented in the jqGrid after the release of the version 3.7.2.
So to be able to use sorttype as a function you have to download the latest version of jqGrid from http://github.com/tonytomov/jqGrid/tree/master. This is an uncompressed version of jqGrid. If you not familier with uncompressed version of jqGrid I'll recommend you to read http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install#development_installation to undertand which of js files and in the which order you should include. Under http://www.ok-soft-gmbh.com/jqGrid/CustomSorttype1.htm you can find a working example of your code where the custom function really work.
According to this forum post, a custom sorttype is only called when the grid is initialized and not during the onSortCol event:
As I understand it right now, if I have a custom sorttype like sorttype:sortDate, the function sortDate will only be called when jqGrid is initialized and not the event onSortCol. Is the only way to make onSortcol call SortDate is by manually over riding onSortCol event and writing the tedious code that does this and updates the grid accordingly? Why doesn't defining the sorttype:sortDate just over ride onSortCol event automatically? I mean when the jqGrid gets initailized it sorts correctly, but when I call the event it must do some built in sort. Why I ask is because my sortDate function doesn't have any code that actually updates jqGrid. it just returns 1,-1, or 0. its used in something outside of jqGrid…
Does this explain the behavior you are seeing?