jQuery UI Widgets Forums Grid How to parse data from GeoJSON into in the grid ?

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • akanis
    Participant

    Hi, there is a example bindingtojson.htm. With GeoJSON this function in the example does not work.

    $(“#jqxgrid”).jqxGrid(
    {
    width: 850,
    source: dataAdapter,
    columnsresize: true,
    columns: [
    { text: ‘Reihe’, datafield: ‘REIHE’, width: 250 },
    { text: ‘Grab_NR’, datafield: ‘GRAB_NR’, width: 180 },
    ]
    });

    Is there a simple way to use GeoJSON like the following structure-example of my GeoJSON file ?
    Only datafield: ‘type’ is accepted and listed as Feature.

    },
    {
    “type”: “Feature”,
    “geometry”: {
    “type”: “Polygon”,
    “coordinates”: [
    [
    [
    13.8675288378074,
    50.9855085081436
    ],
    [
    13.8674912568494,
    50.9855340893233
    ],
    [
    13.8675074856065,
    50.9855435875696
    ],
    [
    13.8675450648109,
    50.985518005244
    ],
    [
    13.8675288378074,
    50.9855085081436
    ]
    ]
    ]
    },
    “properties”: {
    “OBJECTID”: 1275,
    “REIHE”: “02”,
    “ABTEILUNG”: “11”,
    “BEMERKUNG”: “”,
    “GRAB_NR”: “12”,
    “SHAPE_LENG”: 10.8709941667,
    “SHAPE_AREA”: 6.03210741128,
    “GISID”: “110212”
    }
    },
    {
    “type”: “Feature”,
    “geometry”: {


    Dimitar
    Participant

    Hi akanis,

    Here is an example (note the source property root). In your case, change localdata with the url to GeoJSON.

    <!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 data = {
                    "type": "Feature",
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [
                            [
                                [
                                    13.8675288378074,
                                    50.9855085081436
                                ],
                                [
                                    13.8674912568494,
                                    50.9855340893233
                                ],
                                [
                                    13.8675074856065,
                                    50.9855435875696
                                ],
                                [
                                    13.8675450648109,
                                    50.985518005244
                                ],
                                [
                                    13.8675288378074,
                                    50.9855085081436
                                ]
                            ]
                        ]
                    },
                    "properties": {
                        "OBJECTID": 1275,
                        "REIHE": "02",
                        "ABTEILUNG": "11",
                        "BEMERKUNG": "",
                        "GRAB_NR": "12",
                        "SHAPE_LENG": 10.8709941667,
                        "SHAPE_AREA": 6.03210741128,
                        "GISID": "110212"
                    }
                };
    
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'REIHE', type: 'string' },
                        { name: 'GRAB_NR', type: 'int' }
                    ],
                    id: 'OBJECTID',
                    root: 'properties',
                    localdata: data
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                $("#jqxgrid").jqxGrid({
                    width: 850,
                    source: dataAdapter,
                    columnsresize: true,
                    columns: [{
                        text: 'Reihe',
                        datafield: 'REIHE',
                        width: 250
                    }, {
                        text: 'Grab_NR',
                        datafield: 'GRAB_NR',
                        width: 180
                    }]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    akanis
    Participant

    Hi Dimitar,

    the header of my geojson data is different from your example:

    {
    “type”: “FeatureCollection”,

    “features”: [
    { “type”: “Feature”, “properties”: { “fid”: “UID.1”, “OBJECTID”: 1, “REIHE”: “01”, “ABTEILUNG”: “Rand”, “GRAB_NR”: “100”, “SHAPE_LENG”: “11,6187283579”, “SHAPE_AREA”: “7,98523561838”, “GISID”: “Rand01100”, “BEMERKUNG”: null }, “geometry”: { “type”: “Polygon”, “coordinates”: [ [ [ 13.8681817804713, 50.985484635788701 ], [ 13.868219243870501, 50.9855065009504 ], [ 13.8682408796217, 50.985491739928797 ], [ 13.868203455525601, 50.985470015612201 ], [ 13.8681817804713, 50.985484635788701 ] ] ] } },
    { “type”: “Feature”, “properties”: { “fid”: “UID.2”, “OBJECTID”: 2, “REIHE”: “01”, “ABTEILUNG”: “Rand”, “GRAB_NR”: “79-80”, “SHAPE_LENG”: “12,918410117”, “SHAPE_AREA”: “10,3290563594”, “GISID”: “Rand0179-80”, “BEMERKUNG”: null }, “geometry”: { “type”: “Polygon”, “coordinates”: [ [ [ 13.868263700 …

    the grid contains no data; i think, root: `properties’ is not correct ? my code:

    $(document).ready(function () {
    var url = “../sampledata/Fri.json”;

    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘REIHE’, type: ‘string’ },
    { name: ‘GRAB_NR’, type: ‘int’ }
    ],
    id: ‘OBJECTID’,
    root: ‘properties’,
    url: url
    //localdata: data
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    $(“#jqxgrid”).jqxGrid({
    width: 850,
    source: dataAdapter,
    columnsresize: true,
    columns: [{
    text: ‘Reihe’,
    datafield: ‘REIHE’,
    width: 250
    }, {
    text: ‘Grab_NR’,
    datafield: ‘GRAB_NR’,
    width: 180
    }]
    });
    });

    best regards akanis


    Dimitar
    Participant

    Hi akanis,

    I used your data in my example. Here is another example with your new data:

    <!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 data = {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "properties": {
                            "fid": "UID.1",
                            "OBJECTID": 1,
                            "REIHE": "01",
                            "ABTEILUNG": "Rand",
                            "GRAB_NR": "100",
                            "SHAPE_LENG": "11,6187283579",
                            "SHAPE_AREA": "7,98523561838",
                            "GISID": "Rand01100",
                            "BEMERKUNG": null
                        },
                        "geometry": {
                            "type": "Polygon",
                            "coordinates": [
                                [
                                    [
                                        13.8681817804713,
                                        50.9854846357887
                                    ],
                                    [
                                        13.8682192438705,
                                        50.9855065009504
                                    ],
                                    [
                                        13.8682408796217,
                                        50.9854917399288
                                    ],
                                    [
                                        13.8682034555256,
                                        50.9854700156122
                                    ],
                                    [
                                        13.8681817804713,
                                        50.9854846357887
                                    ]
                                ]
                            ]
                        }
                    }]
                };
    
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'REIHE', type: 'string', map: 'properties>REIHE' },
                        { name: 'GRAB_NR', type: 'int', map: 'properties>GRAB_NR' }
                    ],
                    id: 'properties>OBJECTID',
                    root: 'features',
                    localdata: data
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                $("#jqxgrid").jqxGrid({
                    width: 850,
                    source: dataAdapter,
                    columnsresize: true,
                    columns: [{
                        text: 'Reihe',
                        datafield: 'REIHE',
                        width: 250
                    }, {
                        text: 'Grab_NR',
                        datafield: 'GRAB_NR',
                        width: 180
                    }]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    akanis
    Participant

    Hi Dimitar,

    … map: ‘properties>REIHE was the base for success.
    Thank you, best regards akanis

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

You must be logged in to reply to this topic.