jQWidgets Forums

Tagged: grid, javascript grid, jquery grid

This topic contains 5 replies, has 3 voices, and was last updated by tomrauch 10 years ago.

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

Author

Problems when binding grid to remote data Posts
June 22, 2012 at 9:51 am Problems when binding grid to remote data #5225

vudh
Member

Hi,

First, thanks for your excellent grid plug-in. I’m looking into features before purchasing a license.

I tried to bind the grid to jsonp data from WCF data serivices as follows:
var source =
{
datatype: “jsonp”,
datafields: [
{ name: ‘Navn’ },
{ name: ‘Nummer’ },
{ name: ‘VF_Adresse1’ }
],
url: url for WCF data services,
root: ‘GetWindowGridDataResult’
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
columns: [
{ text: ‘Name’, datafield: ‘Navn’, width: 200 },
{ text: ‘Number’, datafield: ‘Nummer’, width: 170 },
{ text: ‘Address’, datafield: ‘VF_Adresse1’, minwidth: 110 }
]
});

When debugging in Chrome, I see the returned json data from WCF data services as follows:
GetWindowGridDataResult: “[{“Navn”:”New Customer”,”Nummer”:”234″,”VF_Adresse1″:”Address of Customer”},{“Navn”:”trung”,”Nummer”:”13123″,”VF_Adresse1″:”fghfccf”},{“Navn”:”customer 1″,”Nummer”:”234324″,”VF_Adresse1″:”sdfsdfsd”}]”

However, the grid displayed no rows. Could you please help me?

Thanks in advance,
vudh.

June 22, 2012 at 12:05 pm Problems when binding grid to remote data #5236
Peter Stoev
Keymaster
Hi vudh,

I debugged the scenario locally by using your initialization and the provided data and found out that the ajax call returns a parse error because there were missing ” characters in the data.

Here’s the modified file that I was able to load into the Grid:
```
{"GetWindowGridDataResult":[
{"Navn":"New Customer","Nummer":"234","VF_Adresse1":"Address of Customer"},
{"Navn":"trung","Nummer":"13123","VF_Adresse1":"fghfccf"},
{"Navn":"customer 1","Nummer":"234324","VF_Adresse1":"sdfsdfsd"}
]}
```
Here’s my initialization:
```
<!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.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                { name: 'Navn' },
                { name: 'Nummer' },
                { name: 'VF_Adresse1' }
                ],
                root: 'GetWindowGridDataResult',
                url: 'testdata.txt'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                    { text: 'Name', datafield: 'Navn', width: 200 },
                    { text: 'Number', datafield: 'Nummer', width: 170 },
                    { text: 'Address', datafield: 'VF_Adresse1', minwidth: 110 }
                    ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>
```
Hope this helps you.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
June 25, 2012 at 9:11 am Problems when binding grid to remote data #5300

vudh
Member

Hi Peter,

Thanks for your support. It works great with your sample code above.
However, when getting data directly from the service, the grid cannot bind successfully. Now I deployed a test service for debugging, and hereafter is my test page:

jqxGrid Demo

$(document).ready(function () {
var source =
{
datatype: ‘jsonp’,
datafields: [{ name: ‘Navn’ }, { name: ‘Nummer’ }, { name: ‘VF_Adresse1’ }
],
url: ‘http://vaf.vegasmb.com:8101/ServiceDebug/Service.svc/GetWindowGridData?method=?’,
data: {}
, root: ‘GetWindowGridDataResult’
};

var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { alert(status); },
loadComplete: function (data) { alert(data.GetWindowGridDataResult); },
loadError: function (xhr, status, error) { alert(error); }
});
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
columnsresize: true,
columns: [{ text: ‘Name’, dataField: ‘Navn’, minwidth: 100, classname: ‘header’, cellclassname: ‘textcell’ }
, { text: ‘Number’, dataField: ‘Nummer’, minwidth: 100, classname: ‘header’, cellclassname: ‘textcell’ }
, { text: ‘Postal address.Address’, dataField: ‘VF_Adresse1’, minwidth: 100, classname: ‘header’, cellclassname: ‘textcell’ }
]
});
});

.header
{
font-weight: bold;
font-size: 14px; /*margin-top:5px;*/
}

.textcell
{
/*color:Black;*/
}

.numbercell
{
color: Red;
}

Could you please help me debug that case?

Thanks in advance,
vudh.

June 25, 2012 at 2:40 pm Problems when binding grid to remote data #5310
Peter Stoev
Keymaster
Hi vudh,

There are additional ” in your code: {“GetWindowGridDataResult”:“[{
However, if you’d like to stay with that kind of result, the solution would be:
```
// prepare the data
var source =
{
    datatype: "jsonp",
    datafields: [
    { name: 'Navn' },
    { name: 'Nummer' },
    { name: 'VF_Adresse1' }
    ],
    root: 'GetWindowGridDataResult',
    url: 'http://vaf.vegasmb.com:8101/ServiceDebug/Service.svc/GetWindowGridData?method=?'
};
var dataAdapter = new $.jqx.dataAdapter(source, {
    downloadComplete: function (data) {
        return $.parseJSON(data['GetWindowGridDataResult']);
    }
});
```
Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
June 26, 2012 at 1:19 am Problems when binding grid to remote data #5320

vudh
Member

Hi Peter,

Thanks for your help ! It works great now.

Best regards,
vudh

April 20, 2015 at 5:49 pm Problems when binding grid to remote data #70082

tomrauch
Participant

Hi, I am having the same problem (datagrid not loading data), but I am not generating any additional text (as in the case above). Here’s my code and what my output from the php file looks like. Any help greatly appreciated!

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>In this example the Grid is bound to a Remote Data.</title>
<link rel=”stylesheet” href=”js/widgets/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”js/widgets/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”js/widgets/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”js/widgets/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”js/widgets/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”js/widgets/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”js/widgets/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”js/widgets/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”js/widgets/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”js/widgets/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”js/widgets/scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
datatype: “jsonp”,
datafields: [
{ name: ‘first_name’, type: ‘string’ },
{ name: ‘last_name’, type: ‘string’ },
{ name: ‘job_title’, type: ‘string’ }
],
url: “http://php/test3.php”
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
columnsresize: true,
columns: [
{ text: ‘First Name’, datafield: ‘first_name’, width: 200 },
{ text: ‘Last Name’, datafield: ‘last_name’, width: 170 },
{ text: ‘Job’, datafield: ‘job_title’,width: 170 }

]
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”></div>
</div>
</body>
</html>

++++++++++++++++++++++++++++++++++++++++++++++++++

[{“first_name”:”Bob”,”last_name”:”Davis”,”job_title”:”Supplemental Staffing”},{“first_name”:”Jane”,”last_name”:”Doe”,”job_title”:”PHYSICAL THERAPY”},{“first_name”:”Sam”,”last_name”:”Collins”,”job_title”:”DENTAL-REG”},{“first_name”:”Mary”,”last_name”:”Nice”,”job_title”:”MSW”}]
Author

Posts

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

You must be logged in to reply to this topic.