jQWidgets Forums

jQuery UI Widgets › Forums › TreeGrid › TreeGrid Hangs When All Values in a Column Are Null

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  David 11 years, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    TreeGrid Hangs When All Values in a Column Are Null Posts
  • April 2, 2014 at 4:01 pm TreeGrid Hangs When All Values in a Column Are Null #52426

    David
    Participant

    Hi,

    I recently encountered a problem with TreeGrid and narrowed it down as follows. See the following code:

    <!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.10.2.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" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var objectTree = {
                "name": "root",
                "children": {
                    "child": [
                       {
                           "@id": 1,
                           "foo": "bar",
                           "name": "node 1"
                       },
                       {
                           "@id": 2,
                           "name": "node 2"
                       }
                    ]
                }
            };

            var source =
            {
                datatype: "json",
                datafields: [
                    { name: "@id", map: "@id" },
                    { name: "name", map: "name" },
                    { name: "foo", map: "foo" },
                    { name: "children", type: "array" }
                ],
                root: "children>child",
                localData: objectTree,
                hierarchy: {root: "children>child"},
                id: "@id"
            };

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

            $("#treeGrid").jqxTreeGrid({
                width: 400,
                altRows: true,
                source: dataAdapter,
                columns: [
                    { text: "ID", datafield: "@id", width: 100 },
                    { text: "Name", datafield: "name", width: 200 },
                    { text: "Foo", datafield: "foo", width: 100 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="treeGrid">
    </div>
</body>
</html>

    Notice that the “foo” property exists on the first JSON child node but not the second. This code loads and displays properly; the fact that “foo” is null for the second node is handled gracefully. However, if you also remove the “foo” property from the first node, TreeGrid will not render the grid, but will display with a “Loading…” animation and stay that way.

    This is a problem because if I allow a certain field to be null, it can potentially be null for all records in a given data set, as I found here.

    I’m posting this here because I noticed it using TreeGrid, but I don’t know if this is specific to TreeGrid or is related to to DataAdapter (and potentially would affect other components).

    Thanks,
    David

    April 2, 2014 at 4:06 pm TreeGrid Hangs When All Values in a Column Are Null #52427

    Peter Stoev
    Keymaster

    Hi David,

    The problem is that you can’t have null dataField as a column setting. The dataField should be String and it should be unique String.
    However, are you sure that you use jQWidgets 3.2.2? I can’t break the widget with the following:

    <!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.10.2.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" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var objectTree = {
                "name": "root",
                "children": {
                    "child": [
                       {
                           "@id": 1,
               //            "foo": "bar",
                           "name": "node 1"
                       },
                       {
                           "@id": 2,
                           "name": "node 2"
                       }
                    ]
                }
            };

            var source =
            {
                datatype: "json",
                datafields: [
                    { name: "@id", map: "@id" },
                    { name: "name", map: "name" },
                    { name: "foo", map: "foo" },
                    { name: "children", type: "array" }
                ],
                root: "children>child",
                localData: objectTree,
                hierarchy: { root: "children>child" },
                id: "@id"
            };

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

            $("#treeGrid").jqxTreeGrid({
                width: 400,
                altRows: true,
                source: dataAdapter,
                columns: [
                    { text: "ID", datafield: "@id", width: 100 },
                    { text: "Name", datafield: "name", width: 200 },
                    { text: "Foo", datafield: "foo", width: 100 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="treeGrid">
    </div>
</body>
</html>

    Best Regards,
    Peter Stoev

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

    April 2, 2014 at 7:07 pm TreeGrid Hangs When All Values in a Column Are Null #52436

    David
    Participant

    Peter,

    I was using v3.2.1. I updated it, and the problem does appear to have gone away in 3.2.2, as you indicated.

    Thanks,
    David

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.