jQuery UI Widgets Forums Navigation Tree JSON tree view

This topic contains 3 replies, has 3 voices, and was last updated by  bobmazzo 10 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • JSON tree view #59960

    sathiyaseelan8
    Participant

    hi,

    i copied an example of JSON tree and edited it. instead of using local data, i tried to call the data from another page using JSON method.

    but the tree view is not populating. can anyone help me on this.

    here is my code.

    <script type="text/javascript">
                $(document).ready(function () {
    				var theme = 'ui-redmond';
    				
                    // prepare the data
                    var source =
                    {
                        datatype: 'json',
                        datafields: [
                            { name: 'id' },
                            { name: 'parentid' },
                            { name: 'text' },
                            { name: 'value' }
                        ],
    					//theme: theme,
    					url: 'tree_view_data.php',
                        id: 'id',
                        root: 'data',
    					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>
    JSON tree view #59966

    Nadezhda
    Participant

    Hello sathiyaseelan8,

    Please, find below an example which shows how to call data from another JSON file. I suggest you to take out the “root: ‘data'” because you don’t use it in your code.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <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/demos.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 () {
                   var theme = 'ui-redmond';
    
                   // prepare the data
                   var source =
                   {
                       datatype: 'json',
                       datafields: [
                           { name: 'CompanyName' },
                           { name: 'Address' },  
                           { name: 'City' }
                       ],
                       //theme: theme,
                       url: "../sampledata/customers.txt",
                       id: 'id',                  
                       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('CompanyName', 'Address', 'items', [{ name: 'City', map: 'label' }]);
                   $('#jqxWidget').jqxTree({ source: records, width: '300px' });
               });
           </script>
            <div id='jqxWidget'>
            </div>
        </div>
    </body>
    </html>

    customers.txt

    [{"CompanyName":"Alfreds Futterkiste","ContactName":"Maria Anders","ContactTitle":"Sales Representative","Address":"Obere Str. 57","City":"Berlin","Country":"Germany"},{"CompanyName":"Ana Trujillo Emparedados y helados","ContactName":"Ana Trujillo","ContactTitle":"Owner","Address":"Avda. de la Constitucin 2222","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Antonio Moreno Taquera","ContactName":"Antonio Moreno","ContactTitle":"Owner","Address":"Mataderos 2312","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Around the Horn","ContactName":"Thomas Hardy","ContactTitle":"Sales Representative","Address":"120 Hanover Sq.","City":"London","Country":"UK"},{"CompanyName":"Berglunds snabbkp","ContactName":"Christina Berglund","ContactTitle":"Order Administrator","Address":"Berguvsvgen 8","City":"Lule","Country":"Sweden"},{"CompanyName":"Blauer See Delikatessen","ContactName":"Hanna Moos","ContactTitle":"Sales Representative","Address":"Forsterstr. 57","City":"Mannheim","Country":"Germany"},{"CompanyName":"Blondesddsl pre et fils","ContactName":"Frdrique Citeaux","ContactTitle":"Marketing Manager","Address":"24, place Klber","City":"Strasbourg","Country":"France"},{"CompanyName":"Blido Comidas preparadas","ContactName":"Martn Sommer","ContactTitle":"Owner","Address":"C\/ Araquil, 67","City":"Madrid","Country":"Spain"},{"CompanyName":"Bon app'","ContactName":"Laurence Lebihan","ContactTitle":"Owner","Address":"12, rue des Bouchers","City":"Marseille","Country":"France"},{"CompanyName":"Bottom-Dollar Markets","ContactName":"Elizabeth Lincoln","ContactTitle":"Accounting Manager","Address":"23 Tsawassen Blvd.","City":"Tsawassen","Country":"Canada"},{"CompanyName":"B's Beverages","ContactName":"Victoria Ashworth","ContactTitle":"Sales Representative","Address":"Fauntleroy Circus","City":"London","Country":"UK"},{"CompanyName":"Cactus Comidas para llevar","ContactName":"Patricio Simpson","ContactTitle":"Sales Agent","Address":"Cerrito 333","City":"Buenos Aires","Country":"Argentina"},{"CompanyName":"Centro comercial Moctezuma","ContactName":"Francisco Chang","ContactTitle":"Marketing Manager","Address":"Sierras de Granada 9993","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Chop-suey Chinese","ContactName":"Yang Wang","ContactTitle":"Owner","Address":"Hauptstr. 29","City":"Bern","Country":"Switzerland"},{"CompanyName":"Comrcio Mineiro","ContactName":"Pedro Afonso","ContactTitle":"Sales Associate","Address":"Av. dos Lusadas, 23","City":"Sao Paulo","Country":"Brazil"},{"CompanyName":"Consolidated Holdings","ContactName":"Elizabeth Brown","ContactTitle":"Sales Representative","Address":"Berkeley Gardens 12 Brewery","City":"London","Country":"UK"},{"CompanyName":"Drachenblut Delikatessen","ContactName":"Sven Ottlieb","ContactTitle":"Order Administrator","Address":"Walserweg 21","City":"Aachen","Country":"Germany"},{"CompanyName":"Du monde entier","ContactName":"Janine Labrune","ContactTitle":"Owner","Address":"67, rue des Cinquante Otages","City":"Nantes","Country":"France"},{"CompanyName":"Eastern Connection","ContactName":"Ann Devon","ContactTitle":"Sales Agent","Address":"35 King George","City":"London","Country":"UK"},{"CompanyName":"Ernst Handel","ContactName":"Roland Mendel","ContactTitle":"Sales Manager","Address":"Kirchgasse 6","City":"Graz","Country":"Austria"}]

    I hope it would be helpful.

    Best Regards,
    Nadezhda

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

    JSON tree view #59968

    sathiyaseelan8
    Participant

    hi nadezhda,

    thank you so much. it working now.. 🙂

    JSON tree view #60396

    bobmazzo
    Participant

    Hello,
    I’m looking for an Angular-based example of how to wire up the tree widget from nested Json, with this data sample :

    `[
    {
    “group”: “99_HSVaR”,
    “kris”: [
    {
    “kri”: “1D”
    },
    {
    “kri”: “1D CR”
    },
    {
    “kri”: “1D EQ”
    }
    ]
    },
    {
    “group”: “Additive”,
    “kris”: [
    {
    “kri”: “MCS”
    }
    ]
    }
    ]`

    I have defined an empty object at the top of my Angular controller js file :

    ‘vm.kriSourceTree = {};’

    and my activate code fetches the data form the server :

    `activate();

    function activate() {
    var promises = [ getKriListFromServer() ];
    common.activateController(promises, controllerId)
    .then(function () { log(‘Activated Report Maint View’); });
    }`

    then further down, I use the $q promise to fetch data then configure the data adapter :

    ` function getKriListFromServer() {
    // Get KRI list from server, transform into Tree Json format.
    datacontext.getKriList().then(function (data) {
    if (data.status == ‘FAIL’) {
    if (data.messages.length > 0) {
    logErr(“Error retrieving KRI list: ” + data.messages[0]);
    return;
    }
    }
    else {
    var jsonData = reportsContext.parseKriJsonData(data.data);
    configureKriDataAdapter(jsonData);
    }
    });
    }
    function configureKriDataAdapter(data) {
    // define the data model
    var source = {
    id: “id”,
    //url: <url>
    datafields: [
    { name: ‘group’, type: ‘string’ },
    { name: ‘kri’, type: ‘string’ },
    { name: ‘kris’, type: ‘array’ }
    ],
    hierarchy: {
    root: ‘children’
    },
    localdata: data,
    datatype: “json”
    };
    // bind model to adapter
    var dataAdapter = new $.jqx.dataAdapter(source);

    // configure tree settings (see jqx-settings=”vm.kriSourceTree” in html)
    vm.kriSourceTree = {
    checkboxes: true,
    //height: ‘300px’, width: ‘300px’,
    source: dataAdapter
    };
    }`

    At this point my jq tree is empty. Perhaps my binding is not in the correct order ?

    thanks.

    Bob

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

You must be logged in to reply to this topic.