jQuery UI Widgets › Forums › Navigation › Tree › Hide empty field
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 5 months ago.
-
AuthorHide empty field Posts
-
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
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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.