jQWidgets Forums

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

August 20, 2015 at 5:21 am How to parse data from GeoJSON into in the grid ? #74972

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/