jQWidgets Forums

Tagged: data, grid, jqxgrid, Knockout, KO, nested, nested json, nested object, observableArray, source

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 9 months ago.

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

Author

Knockout with nested object Posts

July 20, 2015 at 9:25 am Knockout with nested object #73943

gio

Participant

Hi Peter,
related to this topic: Knockout with nested object; can you please tell me if there is any new development about?

Can nested objects be managed in knockout grids in version 3.8.1?

Thanks in advance.
Giovanni

July 20, 2015 at 10:09 am Knockout with nested object #73949

Dimitar

Participant

Hi Giovanni,

This functionality is supported. Here is an example:

<!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="../../scripts/json2.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-3.0.0.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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var GridModel = function () {
                this.items = ko.observableArray();
                var me = this;
                $.ajax({
                    datatype: 'json',
                    url: "userdata.txt",
                    async: false
                }).done(function (data) {
                    var jsonData = $.parseJSON(data);
                    me.items(jsonData);
                });
            };

            var model = new GridModel();

            // prepare the data
            var source =
            {
                datatype: "observablearray",
                datafields: [
                    { name: 'Street' },
                    { name: 'City' },
                    { name: 'FirstName', map: 'User>FirstName' },
                    { name: 'LastName', map: 'User>LastName' }
                ],
                id: 'id',
                localdata: model.items
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#grid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'Street', datafield: 'Street', width: 250 },
                  { text: 'City', datafield: 'City', width: 250 },
                  { text: 'FirstName', datafield: 'FirstName', width: 180 },
                  { text: 'LastName', datafield: 'LastName', minwidth: 120 }
                ]
            });

            ko.applyBindings(model);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="grid">
        </div>
    </div>
</body>
</html>

and here is the content of userdata.txt:

[
    {
        "Street": "Pineapple St.",
        "City": "New York City",
        "User": {
            "FirstName": "Alfonso",
            "LastName": "Peterson"
        }
    },
    {
        "Street": "Escort St.",
        "City": "London",
        "User": {
            "FirstName": "Jane",
            "LastName": "Van Dyne"
        }
    }
]

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.