jQWidgets Forums

This topic contains 7 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 4 months ago.

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

Author

Grid with JSON data do not work … Posts

January 20, 2013 at 7:18 pm Grid with JSON data do not work … #13947

Member

Hello all …

I am trying to use in my code jqxGrid and nothing is show in th Grid …
The JSON data is in a web service in my database ( you can view data in
http://190.203.221.120:8580/italven90/productos

my code:

var source =
    {
     datatype: 'json',
     datafields: [
	{ name: 'NRO', type: 'string' },
        { name: 'FILA_NRO', type: 'number' },
	{ name: 'DESC_PROD', type: 'string' },
	{ name: 'TEXTO_APL', type: 'string' },
	{ name: 'EXIST', type: 'string' },
        { name: 'PRECIO3', type: 'number' },
        { name: 'CANTPED', type: 'number' }
                ],
     id: 'FILA_NRO',
     url: "http://190.203.221.120:8580/italven90/productos"
    };
var mi_DA = new $.jqx.dataAdapter(source);
$("#jqxProd").jqxGrid(
 {
  width: 670,
  source: mi_DA,
  theme: 'Classic',
  columnsresize: true,
  columns: [
 	   { text: 'Cod. Producto', datafield: 'NRO', width: 200 },
           { text: 'Descripcion ...', datafield: 'DESC_PROD', width: 400 }
                ]
 });

What I am doing wrong …

Thanks in advance … Armin

January 20, 2013 at 8:23 pm Grid with JSON data do not work … #13949

Peter Stoev

Keymaster

Hi arminkesslerw,

The following 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.9.0.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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source =
            {
                datatype: 'json',
                datafields: [
	                { name: 'NRO', type: 'string' },
                    { name: 'FILA_NRO', type: 'number' },
	                { name: 'DESC_PROD', type: 'string' },
	                { name: 'TEXTO_APL', type: 'string' },
	                { name: 'EXIST', type: 'string' },
                    { name: 'PRECIO3', type: 'number' },
                    { name: 'CANTPED', type: 'number' }
                ],
                id: 'FILA_NRO',
                url: 'data.txt'
            };
             var mi_DA = new $.jqx.dataAdapter(source);
             $("#jqxProd").jqxGrid(
             {
                 width: 670,
                 source: mi_DA,
                 theme: 'classic',
                 columnsresize: true,
                 columns: [
 	                 { text: 'Cod. Producto', datafield: 'NRO', width: 200 },
                     { text: 'Descripcion ...', datafield: 'DESC_PROD', width: 400 }
                  ]
             }); 
        });
    </script>
</head>
<body class='default'>
     <div id="jqxProd"></div>
</body>
</html>

where data.txt is:

[
	{
		"NRO": "7707501",
		"FILA_NRO": 6196,
		"DESC_PROD": "A\/V.CLIO DEL.DER.(Electrico S\/Motor)",
		"TEXTO_APL": "ZINNI & GUELL",
		"EXIST": "       5",
		"PRECIO3": 204.0000,
		"CANTPED": 0
	},
	{
		"NRO": "7717501",
		"FILA_NRO": 6197,
		"DESC_PROD": "A\/V.CLIO IZQ.DEL.(Electrico S\/Motor)",
		"TEXTO_APL": "ZINNI & GUELL",
		"EXIST": "       9",
		"PRECIO3": 204.0000,
		"CANTPED": 0
	},
	{
		"NRO": "9923342",
		"FILA_NRO": 3876,
		"DESC_PROD": "A\/V.CORSA 2 PTA DER.",
		"TEXTO_APL": "ZINNI & GUELL",
		"EXIST": "       2",
		"PRECIO3": 274.0000,
		"CANTPED": 0
	},
	{
		"NRO": "9943343",
		"FILA_NRO": 3878,
		"DESC_PROD": "A\/V.CORSA DEL.DER. (4.PTA)",
		"TEXTO_APL": "ZINNI & GUELL",
		"EXIST": "      27",
		"PRECIO3": 274.0000,
		"CANTPED": 0
	},
	{
		"NRO": "5423200",
		"FILA_NRO": 4719,
		"DESC_PROD": "A\/V.DEL REY DEL.DER.",
		"TEXTO_APL": "ZINNI & GUELL",
		"EXIST": "      48",
		"PRECIO3": 182.0000,
		"CANTPED": 0
	},
	{
		"NRO": "7595321",
		"FILA_NRO": 1500,
		"DESC_PROD": "A\/V.ELEC.TEMPRA DEL.DER.",
		"TEXTO_APL": "MIRAGLIO ITALIA",
		"EXIST": "      16",
		"PRECIO3": 1127.0000,
		"CANTPED": 0
	},
	{
		"NRO": "7705231",
		"FILA_NRO": 6194,
		"DESC_PROD": "A\/V.FIESTA POWER D.DER.(Elec. S\/Motor)",
		"TEXTO_APL": "ZINNI & GUELL",
		"EXIST": "       6",
		"PRECIO3": 324.0000,
		"CANTPED": 0
	},
	{
		"NRO": "7715231",
		"FILA_NRO": 6195,
		"DESC_PROD": "A\/V.FIESTA POWER DEL.IZQ.(Elec. S\/Motor)",
		"TEXTO_APL": "ZINNI & GUELL",
		"EXIST": "      10",
		"PRECIO3": 324.0000,
		"CANTPED": 0
	},
	{
		"NRO": "544132",
		"FILA_NRO": 7978,
		"DESC_PROD": "A\/V.GOL DER.(Electrico S\/Motor) 2.PTA 20",
		"TEXTO_APL": "ZINNI & GUELL",
		"EXIST": "      26",
		"PRECIO3": 326.0000,
		"CANTPED": 0
	},
	{
		"NRO": "554132",
		"FILA_NRO": 7979,
		"DESC_PROD": "A\/V.GOL IZQ.(Electrico\/S\/Motor) 2.PTA 20",
		"TEXTO_APL": "ZINNI & GUELL",
		"EXIST": "      24",
		"PRECIO3": 326.0000,
		"CANTPED": 0
	},
	{
		"NRO": "46446908",
		"FILA_NRO": 1415,
		"DESC_PROD": "A\/V.PALIO DER. 2 PTA.",
		"TEXTO_APL": "ZINNI & GUELL",
		"EXIST": "      12",
		"PRECIO3": 248.0000,
		"CANTPED": 0
	},
	{
		"NRO": "46446619",
		"FILA_NRO": 3610,
		"DESC_PROD": "A\/V.PALIO SIENA DEL.IZQ.(C\/Motor elect )",
		"TEXTO_APL": "MIRAGLIO ITALIA",
		"EXIST": "       3",
		"PRECIO3": 1191.0000,
		"CANTPED": 0
	}
]

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 20, 2013 at 11:13 pm Grid with JSON data do not work … #13956

arminkesslerw

Member

Peter:

Thanks for your response.

This is my question , the JSON data is absolutely OK. Why do not work with
the URL ?. In my source code is the URL of the data for test.

Thanks Armin …

January 21, 2013 at 6:04 am Grid with JSON data do not work … #13960

Peter Stoev

Keymaster

Hi arminkesslerw,

The sample that I sent you works correctly on my side with the latest version of jQWidgets and jQuery Framework. If you would like, I can post the sample online, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 21, 2013 at 12:18 pm Grid with JSON data do not work … #13981

arminkesslerw

Member

Peter:

Could you try the code with the url: “http://190.203.221.120:8580/italven90/productos”
I don’t see errors in my code and when run in the browser the grid is show with column
titles but receive a message : no data to display

Thanks and soory by troubles … Armin

January 21, 2013 at 12:45 pm Grid with JSON data do not work … #13984

Peter Stoev

Keymaster

Hi arminkesslerw,

The URL that you posted is not working for me. Could you check whether it is correct?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 21, 2013 at 7:12 pm Grid with JSON data do not work … #14005

arminkesslerw

Member

Peter:

Sorry the URL is: http://190.203.221.120:8580/italven90/productos

Thanks … Armin

January 22, 2013 at 5:52 am Grid with JSON data do not work … #14025

Peter Stoev

Keymaster

Hi Armin,

Do you try to access this data from the same domain i.e from: http://190.203.221.120:8580? I tried the code several times by hosting your file with JSON on our domain and it works as expected. Here’s the sample available online: gridwithjson.htm.

The code is:

<script type="text/javascript">
        $(document).ready(function () {
            var source =
           {
               datatype: 'json',
               datafields: [
                   { name: 'NRO', type: 'string' },
                   { name: 'FILA_NRO', type: 'number' },
                   { name: 'DESC_PROD', type: 'string' },
                   { name: 'TEXTO_APL', type: 'string' },
                   { name: 'EXIST', type: 'string' },
                   { name: 'PRECIO3', type: 'number' },
                   { name: 'CANTPED', type: 'number' }
               ],
               id: 'FILA_NRO',
               url: 'productos.txt'
           };
            var mi_DA = new $.jqx.dataAdapter(source);
            $("#jqxProd").jqxGrid(
            {
                source: mi_DA,
                theme: 'energyblue',
                columns: [
                    { text: 'Cod. Producto', datafield: 'NRO', width: 200 },
                    { text: 'Descripcion ...', datafield: 'DESC_PROD', width: 400 }
                ]
            });
        });
    </script>

where productos.txt is your data source.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.