jQuery UI Widgets Forums Navigation Tree Tree with Xml data only showing "LABEL"

This topic contains 4 replies, has 3 voices, and was last updated by  atomic 7 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Tree with Xml data only showing "LABEL" #29314

    agnes
    Member

    I working through some of the examples trying to get xml data to load in a tree.
    For the moment I just want to get a tree listing the directories with the names and it loads but the tree shows “Label”

    Any help would be appreciated

    Here is my sample xml:

    <Directories>
    <Directory>
    <Name>PA30</Name>
    <CreatedBy>Agnes</CreatedBy>
    <Files>
    <File>abc.txt</File>
    </Files>
    </Directory>
    <Directory>
    <Name>PA40</Name>
    <CreatedBy>Garrett</CreatedBy>
    <Files />
    </Directory>
    <Directory>
    <Name>PA50</Name>
    <CreatedBy>Steve</CreatedBy>
    <Files>
    <File>bcd.txt</File>
    </Files>
    <Directory>
    <Name>PA51</Name>
    <CreatedBy>John</CreatedBy>
    <Files />
    </Directory>
    </Directory>
    </Directories>

    And My script:

    $(document).ready(function () {
    var url = “../directories.xml”;

    // prepare the data
    var source =
    {
    datatype: “xml”,
    datafields: [
    { name: ‘Name’,type: ‘string’ },
    { name: ‘CreatedBy’, type: ‘string’ }
    ],
    root: “Directories”,
    record: “Directory”,
    label: ‘Name’,
    url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function () {
    // get data records.
    var records = dataAdapter.records;
    $(‘#tree’).jqxTree({ source: records, height: ‘300px’, width: ‘300px’});
    },
    loadError: function (jqXHR, status, error) {
    },
    beforeLoadComplete: function (records) {

    }
    });
    // perform data binding.
    dataAdapter.dataBind();

    });

    Loading Tree…
    • This topic was modified 10 years, 5 months ago by  agnes. Reason: xml code was stripped
    Tree with Xml data only showing "LABEL" #29316

    Peter Stoev
    Keymaster

    Hi agnes,

    For using jqxTree with jqxDataAdapter, you should do something more which is illustrated in the jqxTree’s Binding to XML and Binding to JSON samples.

    Best Regards,
    Peter Stoev

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

    Tree with Xml data only showing "LABEL" #29324

    agnes
    Member

    Peter,
    I am new to jquery and I have tried to figure out the jqxTree binding to XML example but I find some of the documentation lacking on explaining how to get it to work. Especially the explanation of the getGroupedRecords() method; the example for the data adapter has grouping and I don’t need grouping and no matter what I try, I can not get my DirectoryName to appear.

    I am off to try the JSON Binding example…

    Tree with Xml data only showing "LABEL" #29341

    Peter Stoev
    Keymaster

    Hi agnes,

    The getGroupedRecords() method is a method of the jqxDataAdapter plug-in and you should look for information in the jqxDataAdapter’s help topic – jquery-data-adapter.htm.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tree with Xml data only showing "LABEL" #89576

    atomic
    Participant

    Hi guys,

    What am I doing wrong? I cannot even reproduce your demo…

        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
          
                    // 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: "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'], 'items', 'label', [{ name: 'uid', map: 'value' }, { name: 'CompanyName', map: 'label'}], 'row', 'value');
    
                    $('#jqxWidget').jqxTree({ source: records, height: '300px', width: '300px'});
                });
            </script>
            <div id='jqxWidget'>
            </div>
        </div>

    with this data in customers.xml

    <entry>
      <title type="text"></title>
      <updated>2011-11-30T11:39:28Z</updated>
      <author>
        <name />
      </author>
      <content type="application/xml">
        <m:properties>
          <d:CustomerID>ALFKI</d:CustomerID>
          <d:CompanyName>Alfreds Futterkiste</d:CompanyName>
          <d:ContactName>Maria Anders</d:ContactName>
          <d:ContactTitle>Sales Representative</d:ContactTitle>
          <d:Address>Obere Str. 57</d:Address>
          <d:City>Berlin</d:City>
          <d:Region m:null="true" />
          <d:PostalCode>12209</d:PostalCode>
          <d:Country>Germany</d:Country>
          <d:Phone>030-0074321</d:Phone>
          <d:Fax>030-0076545</d:Fax>
        </m:properties>
      </content>
    </entry>

    I get blank jqxWidget div…. I am using latest jqxWidgets.
    Thank you.

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

You must be logged in to reply to this topic.