jQuery UI Widgets Forums Navigation Tree Hide empty field

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Hide empty field #71326

    uinfobrera
    Participant

    Hi, I’m working on jqxTree builted from XML data and I’d like to hide the field of the tree where there’s null value. In the example the field <Unità_archivistica_1> , <Unità_archivistica_2>, <Unità_archivistica_3> are not always filled. How can I browse the three whitout see the value “Item” every times the tags in example are empty?
    Here the htm code:
    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>TREE</title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base-mpi.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 style=”background-color:#FCFCFE;”>

    <h1>TEST Letter [E]</h1>

    <!–

    –>
    <div id=’content’>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare the data
    var source =
    {
    datatype: “xml”,
    datafields: [

    { name: ‘Luogo_ripresa’, map: ‘m\\:properties>d\\:Luogo_ripresa’ },
    { name: ‘Unità_archivistica_1’, map: ‘m\\:properties>d\\:Unità_archivistica_1’ },
    { name: ‘Unità_archivistica_2’, map: ‘m\\:properties>d\\:Unità_archivistica_2’ },
    { name: ‘Unità_archivistica_3’, map: ‘m\\:properties>d\\:Unità_archivistica_3’ },
    { name: ‘Numero_inventario’, map: ‘m\\:properties>d\\:Numero_inventario’ },
    { name: ‘Soggetto’, map: ‘m\\:properties>d\\:Soggetto’ },
    ],
    root: “entry”,
    record: “content”,
    url: “../sampledata/jsE2.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
    ([‘Numero_inventario’, /*’Luogo_ripresa’,*/ ‘Unità_archivistica_1’, ‘Unità_archivistica_2’, ‘Unità_archivistica_3’, ‘Unità_archivistica_5’, /*’Soggetto’*/], ‘items’, ‘label’, [{ name: /*’Numero_inventario’*/ ‘Soggetto’, map: ‘label’}], ‘row’, ‘value’);
    $(‘#jqxWidget’).jqxTree({ source: records, height: ‘800px’, width: ‘1200px’});
    });
    </script>
    <div id=’jqxWidget’>
    </div>
    </div>
    </body>
    </html>

    And here the xml:
    <?xml version=”1.0″ encoding=”UTF-8″ standalone=”yes”?>
    <feed xml:base=”http://services.odata.org/Northwind/Northwind.svc/” xmlns:d=”http://schemas.microsoft.com/ado/2007/08/dataservices” xmlns:m=”http://schemas.microsoft.com/ado/2007/08/dataservices/metadata” xmlns=”http://www.w3.org/2005/Atom”>
    <title type=”text”>Customers</title>
    <updated>2011-11-30T11:39:28Z</updated>
    <link rel=”self” title=”Customers” href=”Customers” />

    <entry>
    <title type=”text”></title>
    <updated>2011-11-30T11:39:28Z</updated>
    <author>
    <name />
    </author>
    <content type=”application/xml”>
    <m:properties>
    <d:Numero_inventario>MPI157469</d:Numero_inventario>
    <d:Unità_archivistica_1>Edolo (BS) 1(7)</d:Unità_archivistica_1>
    <d:Unità_archivistica_2></d:Unità_archivistica_2> <!– EMPTY –>
    <d:Unità_archivistica_3></d:Unità_archivistica_3> <!– EMPTY –>
    <d:Soggetto>Edolo – Chiesa di S. Giovanni Battista,campanile </d:Soggetto>
    <d:Luogo_ripresa>Lombardia, BS, Edolo</d:Luogo_ripresa>
    </m:properties>
    </content>
    </entry>
    <entry>
    <title type=”text”></title>
    <updated>2011-11-30T11:39:28Z</updated>
    <author>
    <name />
    </author>
    <content type=”application/xml”>
    <m:properties>
    <d:Numero_inventario>MPI157470</d:Numero_inventario>
    <d:Unità_archivistica_1>Edolo (BS) 1(7)</d:Unità_archivistica_1>
    <d:Unità_archivistica_2>Chiesa del Battista</d:Unità_archivistica_2>
    <d:Unità_archivistica_3></d:Unità_archivistica_3> <!– EMPTY –>
    <d:Soggetto>Edolo – Chiesa di S. Giovanni Battista,campanile </d:Soggetto>
    <d:Luogo_ripresa>Lombardia, BS, Edolo</d:Luogo_ripresa>

    </m:properties>
    </content>
    </entry>
    <entry>
    <title type=”text”></title>
    <updated>2011-11-30T11:39:28Z</updated>
    <author>
    <name />
    </author>
    <content type=”application/xml”>
    <m:properties>
    <d:Numero_inventario>MPI157471</d:Numero_inventario>
    <d:Unità_archivistica_1>Edolo (BS) 1(7)</d:Unità_archivistica_1>
    <d:Unità_archivistica_2>Chiesa del Battista</d:Unità_archivistica_2>
    <d:Unità_archivistica_3>Ritratto del santo</d:Unità_archivistica_3>
    <d:Soggetto>Edolo – Chiesa di S. Giovanni Battista,campanile </d:Soggetto>
    <d:Luogo_ripresa>Lombardia, BS, Edolo</d:Luogo_ripresa>

    </m:properties>
    </content>
    </entry>

    </feed>

    Thanks a lot for your attention

    Hide empty field #71378

    Dimitar
    Participant

    Hi uinfobrera,

    After the jqxTree initialization, call the following code to remove all “Item” items (created from empty fields):

    var items = $('#jqxWidget').jqxTree('getItems');
    for (var i = 0; i < items.length; i++) {
        if (items[i].label === 'Item') {
            $('#jqxWidget').jqxTree('removeItem', items[i].element);
        }
    }

    Best Regards,
    Dimitar

    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.