jQWidgets Forums
jQuery UI Widgets › Forums › Grid › json jqxgrid help reqired.
Tagged: json jqxgrid
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 11 years, 2 months ago.
-
Author
-
{“rows”:[{“appointdate”:”2014-12-31 00:00:00.0″,”docid”:”DOC00157″,”docname”:”NUTRIFIT”,”ip”:0,”op”:1,”ot”:0,”specialization”:”NUTRITIONIST”,”unit”:”HYDERGUDA”},{“appointdate”:”2014-12-31 00:00:00.0″,”docid”:”DOC00211″,”docname”:”RAMANA BODDULA”,”ip”:0,”op”:10,”ot”:0,”specialization”:”ENDOCRINOLOGY”,”unit”:”BOGULKUNTA”},{“appointdate”:”2014-12-31 00:00:00.0″,”docid”:”DOC00463″,”docname”:”SREEDEVI”,”ip”:0,”op”:13,”ot”:0,”specialization”:”OBSTETRICS”,”unit”:”BOGULKUNTA”},{“appointdate”:”2014-12-30 00:00:00.0″,”docid”:”DOC00157″,”docname”:”NUTRIFIT”,”ip”:0,”op”:1,”ot”:0,”specialization”:”NUTRITIONIST”,”unit”:”HYDERGUDA”},{“appointdate”:”2014-12-30 00:00:00.0″,”docid”:”DOC00188″,”docname”:”RAJITHA REDDY”,”ip”:0,”op”:28,”ot”:0,”specialization”:”OBSTETRICS”,”unit”:”BOGULKUNTA”},{“appointdate”:”2014-12-30 00:00:00.0″,”docid”:”DOC00558″,”docname”:”GEETHA.”,”ip”:0,”op”:2,”ot”:0,”specialization”:”FETAL MEDICINE”,”unit”:”SUPERDELUX”},{“appointdate”:”2014-12-29 00:00:00.0″,”docid”:”DOC00157″,”docname”:”NUTRIFIT”,”ip”:0,”op”:1,”ot”:0,”specialization”:”NUTRITIONIST”,”unit”:”HYDERGUDA”},{“appointdate”:”2014-12-29 00:00:00.0″,”docid”:”DOC00211″,”docname”:”RAMANA BODDULA”,”ip”:0,”op”:2,”ot”:0,”specialization”:”ENDOCRINOLOGY”,”unit”:”SUPERDELUX”},{“appointdate”:”2014-12-27 00:00:00.0″,”docid”:”DOC00157″,”docname”:”NUTRIFIT”,”ip”:0,”op”:1,”ot”:0,”specialization”:”NUTRITIONIST”,”unit”:”HYDERGUDA”}]}
I got the above json string coming from servlet. I am not able to display in the jqxgrid and I am able to display in easyui datagrid.
The grid code is below,
$(document).ready(function () {
var url=’servlet/ResponseServlet’;
// prepare the data
var source =
{
type: ‘POST’,
datatype: ‘json’,
datafields: [
{ name: ‘appointdate’ },
{ name: ‘docid’ },
{ name: ‘docname’},
{ name: ‘ip’, type: ‘int’ },
{ name: ‘op’, type: ‘int’ },
{ name: ‘ot’, type: ‘int’ },
{ name: ‘specialization’},
{ name: ‘unit’}
],
url: url,
root:’rows’,};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 650,source: dataAdapter,
columnsresize: true,columns: [
{ text: ‘Appoint Date’, dataField: ‘appointdate’, width: 100 },
{ text: ‘Doctor Id’, dataField: ‘docid’, width: 100 },
{ text: ‘Name’, dataField: ‘docname’, width: 180 },
{ text: ‘IP#’, dataField: ‘ip’, width: 30, cellsalign: ‘right’ },
{ text: ‘OP#’, dataField: ‘op’, width: 30, cellsalign: ‘right’ },
{ text: ‘OT#’, dataField: ‘ot’, width: 30, cellsalign: ‘right’ },
{ text: ‘Specialization’, dataField: ‘specialization’, width: 100 },
{ text: ‘Unit’, dataField: ‘unit’, width: 180 }]
});
});
Hi ksheer,
The below code works on my side:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript"> $(document).ready(function () { var source = { datatype: 'json', datafields: [ { name: 'appointdate' }, { name: 'docid' }, { name: 'docname' }, { name: 'ip', type: 'int' }, { name: 'op', type: 'int' }, { name: 'ot', type: 'int' }, { name: 'specialization' }, { name: 'unit' } ], url: 'text.txt', root: 'rows' }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: 650, source: dataAdapter, columnsresize: true, columns: [ { text: 'Appoint Date', dataField: 'appointdate', width: 100 }, { text: 'Doctor Id', dataField: 'docid', width: 100 }, { text: 'Name', dataField: 'docname', width: 180 }, { text: 'IP#', dataField: 'ip', width: 30, cellsalign: 'right' }, { text: 'OP#', dataField: 'op', width: 30, cellsalign: 'right' }, { text: 'OT#', dataField: 'ot', width: 30, cellsalign: 'right' }, { text: 'Specialization', dataField: 'specialization', width: 100 }, { text: 'Unit', dataField: 'unit', width: 180 } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> </div> </body> </html>
The only difference with yours is that type: ‘POST’ is removed from my sample due to the reason that I don’t use Servlet, but if your Servlet returns that JSON data, the Grid will display it. Please, also check whether all the required JavaScript references are added and are with correct path.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.