jQWidgets Forums

jQuery UI Widgets Forums Navigation Tree Could not get data from txt file thru $.jqx.dataAdapter

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 12 years, 3 months ago.

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

  • caiter
    Member

    My data txt file named “folder.txt”:
    [
    { “id”:”0″,”text”:”rootFolder”,”parentid”:”-1″},
    { “id”: “1”,”text”: “Central Region”, “parentid”:”0″ },
    { “id”: “2”, “text”: “Eastern Region”, “parentid”: “0” },
    { “id”: “21”, “text”: “(In building…)”, “parentid”: “2” },
    { “id”: “3”, “text”: “Western Region”, “parentid”: “0” },
    { “id”: “31”, “text”: “(In building…)”, “parentid”: “3” }
    ]

    In my code, i want to get data like below:

    var source = { datatype: “json”,
    url: “folder.txt”,
    datafields: [
    { name: ‘id’ },
    { name: ‘text’ },
    { name: ‘parentid’ }
    ],
    id: “id”,
    async: false
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    dataAdapter.dataBind();
    var records = dataAdapter.getRecordsHierarchy(“id”, “parentid”, “items”, [{ name: ‘text’, map: ‘label’}]);

    I chcecked “records” value, it is NULL. Why?

    Can somebody help me find the error in my code?

    Thanks a lot.


    Peter Stoev
    Keymaster

    Hi caiter,

    Please, find below a working sample:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title id='Description'>In this demo the jqxTree is built from JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.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/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'id' },
    { name: 'parentid' },
    { name: 'text' }
    ],
    url: 'data.txt',
    async: false
    };
    // create data adapter.
    var dataAdapter = new $.jqx.dataAdapter(source);
    // perform Data Binding.
    dataAdapter.dataBind();
    // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents
    // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter
    // specifies the mapping between the 'text' and 'label' fields.
    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
    $('#jqxWidget').jqxTree({ source: records, width: '300px' });
    });
    </script>
    <div id='jqxWidget'>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.