jQWidgets Forums

jQuery UI Widgets Forums Grid json jqxgrid help reqired.

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • json jqxgrid help reqired. #54196

    ksheer
    Participant

    {“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 }

    ]

    });

    });

    json jqxgrid help reqired. #54224

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.