jQuery UI Widgets Forums Navigation Tree XML Tree with Four Levels

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • XML Tree with Four Levels #7169

    shimmoril
    Participant

    I need to create a tree from XML data with four levels. All of your examples from external data have at most three. Can you please provide example code for a four level tree? I am primarily concerned about defining the records variable, since, as I understand it, that’s where the groups are set up.

    XML Tree with Four Levels #7178

    Peter Stoev
    Keymaster

    Hi shimmoril,

    Here’s a sample with four levels:

    <!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 XML 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.0.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 () {
    var theme = getTheme();
    // prepare the data
    var source =
    {
    datatype: "xml",
    datafields: [
    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' },
    { name: 'City', map: 'm\\:properties>d\\:City' },
    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' },
    { name: 'Country', map: 'm\\:properties>d\\:Country' }
    ],
    root: "entry",
    record: "content",
    id: 'm\\:properties>d\\:CustomerID',
    url: "../sampledata/customers.xml",
    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 grouping fields. The second parameter is the sub items collection name. The third parameter is the group's name.
    // Each jqxTree item has a 'label' property, but in the data source, we have a 'CompanyName' field. The last parameter
    // specifies the mapping between the 'CompanyName' and 'label' fields.
    var records = dataAdapter.getGroupedRecords(['Country', 'City', 'ContactName'], 'items', 'label', [{ name: 'CompanyName', map: 'label' }]);
    $('#jqxWidget').jqxTree({ source: records, height: '300px', width: '300px', theme: theme });
    });
    </script>
    <div id='jqxWidget'>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    XML Tree with Four Levels #7210

    shimmoril
    Participant

    Thanks Peter. I thought I had tried that, but I must have gotten something wrong.

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

You must be logged in to reply to this topic.