jQuery UI Widgets Forums Plugins Data Adapter access dataAdapter records

This topic contains 7 replies, has 2 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • access dataAdapter records #84272

    atomic
    Participant

    Hi guys,

    Why I always get empty records of jqx DataAdapter

    var adapter = new $.jqx.dataAdapter(source);
     var recordi = adapter.records;	
     console.log(recordi);

    and in my source I have defined that it is synchronous binding.

    datatype: 'json',
     url: 'data.json',
    async: false,

    How can I access records of JSON jqxDataAdapter. What am I doing wrong.
    Thank you

    access dataAdapter records #84279

    Dimitar
    Participant

    Hi atomic,

    If you are using the data adapter stand-alone (with no respective widget), then you should bind it to the data source. You can do this two ways:

    var adapter = new $.jqx.dataAdapter(source, {
        autoBind: true
    });
    var recordi = adapter.records;
    console.log(recordi);

    or

    var adapter = new $.jqx.dataAdapter(source);
    adapter.dataBind();
    var recordi = adapter.records;
    console.log(recordi);

    Best Regards,
    Dimitar

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

    access dataAdapter records #84286

    atomic
    Participant

    Hi Dimitar,

    thank you for your prompt answer. I am not using it stand-alone, now I gor two get responses but still records are empty.
    I will post shorter version of code with sample data.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This example shows how to display nested Grid plugins.</title>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="scripts/jquery-1.11.3.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">
     $(document).ready(function () {
                var source =
                {
                    datafields: [
                        { name: 'year', type: 'int' },
                        { name: 'ED', type: 'int' },
                        { name: 'LF', type: 'decimal' },
                        { name: 'PMAX', type: 'decimal' }
                    ],
    	
                    datatype: 'json',
                    url: 'data.json',
    				async: false,
                };
    
    	var adapter = new $.jqx.dataAdapter(source);
    	adapter.dataBind();
    	var recordi = adapter.records;
    	console.log(recordi);
    
        });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    and Data sample data.json

    [
                {
                    "year": "2000",
                    "ED": "51",
                    "LF": "1.21839",
                    "PMAX": "8",
                    "technologies": {
                        "technology": [
                        {
                            "tech": "Solar",
                            "InstalledPower": "2.500000",
                            "CF": "2.500000"
                        },
                        {
                            "tech": "Wind",
                            "InstalledPower": "39.000000",
                            "CF": "39.000000"
                        },
                        {
                            "tech": "Hydro",
                            "InstalledPower": "35.000000",
                            "CF": "39.000000"
                        }
                        ]
                    }
                },
                {
                    "year": "2010",
                    "ED": "92",
                    "LF": "2.60137",
                    "PMAX": "2",
                    "technologies": {
                        "technology": [
                        {
                            "tech": "Solar",
                            "InstalledPower": "32.000000",
                            "CF": "45.000000"
                        },
                        {
                            "tech": "Wind",
                            "InstalledPower": "14.000000",
                            "CF": "30.000000"
                        }
                        ]
                    }
                },
                {
                    "year": "2020",
                    "ED": "62",
                    "LF": "2.60137",
                    "PMAX": "2",
                    "technologies": {
                        "technology": [
                        {
                            "tech": "Solar",
                            "InstalledPower": "32.000000",
                            "CF": "45.000000"
                        },
                        {
                            "tech": "Wind",
                            "InstalledPower": "14.000000",
                            "CF": "30.000000"
                        }
                        ]
                    }
                }
                ];

    Thank you.
    best regards

    access dataAdapter records #84328

    Dimitar
    Participant

    Hi atomic,

    If you populate a grid through the data adapter, you do not need to bind it manually.

    You can also access the loaded records in the dataAdapter’s loadComplete callback function. Please take a look at the following modification of the demo Binding to JSON, which shows how to do so:

    <!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.11.1.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" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/beverages.txt";
    
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'name', type: 'string' },
                        { name: 'type', type: 'string' },
                        { name: 'calories', type: 'int' },
                        { name: 'totalfat', type: 'string' },
                        { name: 'protein', type: 'string' }
                    ],
                    id: 'id',
                    url: url,
                    async: false
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    loadComplete: function (records) {
                        alert('Loaded ' + records.length + ' records.');
                    }
                });
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    columnsresize: true,
                    columns: [
                      { text: 'Name', datafield: 'name', width: 250 },
                      { text: 'Beverage Type', datafield: 'type', width: 250 },
                      { text: 'Calories', datafield: 'calories', width: 180 },
                      { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                      { text: 'Protein', datafield: 'protein', minwidth: 120 }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid"></div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    access dataAdapter records #84336

    atomic
    Participant

    Hi Dimitar,

    This works fine but I am still not able to get what I want.
    Is there a way to use dataAdapter’s records as stand-alone.
    I just want to see records, simple example below.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This example shows how to display nested Grid plugins.</title>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="scripts/jquery-1.11.3.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">
     $(document).ready(function () {
                var source =
                {
                    datafields: [
                        { name: 'year', type: 'int' },
                        { name: 'ED', type: 'int' },
                        { name: 'LF', type: 'decimal' },
                        { name: 'PMAX', type: 'decimal' }
                    ],
    	
                    datatype: 'json',
                    url: 'data.json',
    		async: false,
                };
    
    	var adapter = new $.jqx.dataAdapter(source);
    	adapter.dataBind();
    	var recordi = adapter.records;
    	console.log(recordi);
    
        });
        </script>
    </head>
    <body class='default'>
    </body>
    </html>

    data.json file is

    [
                {
                    "year": "2000",
                    "ED": "51",
                    "LF": "1.21839",
                    "PMAX": "8",
                    "technologies": {
                        "technology": [
                        {
                            "tech": "Solar",
                            "InstalledPower": "2.500000",
                            "CF": "2.500000"
                        },
                        {
                            "tech": "Wind",
                            "InstalledPower": "39.000000",
                            "CF": "39.000000"
                        },
                        {
                            "tech": "Hydro",
                            "InstalledPower": "35.000000",
                            "CF": "39.000000"
                        }
                        ]
                    }
                },
                {
                    "year": "2010",
                    "ED": "92",
                    "LF": "2.60137",
                    "PMAX": "2",
                    "technologies": {
                        "technology": [
                        {
                            "tech": "Solar",
                            "InstalledPower": "32.000000",
                            "CF": "45.000000"
                        },
                        {
                            "tech": "Wind",
                            "InstalledPower": "14.000000",
                            "CF": "30.000000"
                        }
                        ]
                    }
                },
                {
                    "year": "2020",
                    "ED": "62",
                    "LF": "2.60137",
                    "PMAX": "2",
                    "technologies": {
                        "technology": [
                        {
                            "tech": "Solar",
                            "InstalledPower": "32.000000",
                            "CF": "45.000000"
                        },
                        {
                            "tech": "Wind",
                            "InstalledPower": "14.000000",
                            "CF": "30.000000"
                        }
                        ]
                    }
                }
                ];

    sorry to bother you, but it seems like something very simple an if I use loacaldata with same code everything works great.
    thank you

    access dataAdapter records #84347

    Dimitar
    Participant

    Hello atomic,

    Please note that a stand-alone file with JSON must not contain a semicolon (;) at the end. This may be what causes the issue. Other than that, your code should work as expected.

    Best Regards,
    Dimitar

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

    access dataAdapter records #84353

    atomic
    Participant

    Hi Dimitar,

    That is true, and that was the problem Thank you for that.
    I have another question. I would like to create another dataAdapter with same json data as posted above, but I would like to get children data of technologies. I was able to populate dataAdapter but only for the first element od data.json file

    	var source2 =
                {
    		root: "0>technologies>technology",
                    datatype: 'json',
                    url: 'data.json',
    		async: false,
                    datafields: [
    			{ name: 'tech', map: 'tech', type: 'decimal' },
    			{ name: 'InstalledPower', map: 'InstalledPower', type: 'decimal' },
    			{ name: 'CF', map: 'CF', type: 'decimal' },
                    ],
                };

    How can I get elements (tec, InstalledPower, CF) for all tree elements of json (all three years)
    Thank you again

    access dataAdapter records #84358

    Dimitar
    Participant

    Hi atomic,

    To achieve this, you would have to map your datafields. More information and some examples with mapping can be found in the jqxDataAdapter documentation entry.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.