The library provides ability to filter data by one or several criteria. In this case, only items which meet the requirement of criteria will be shown (applicable for all the components that operate on data). To filter data set you need to call the filter() method. Each time the method is called, all data is re-filtered (previous results aren't preserved). It's possible to call the filter method in two modes:
$$("grid").filter("type","video");
$$("grid").filter(function(obj){ if (obj.sales > 10 && obj.company == "Company 3") return true; return false; })
We'll create a window that will contain a list of movies. By using filter() method we'll display just films created in 2010 year.
Our actions:
FilterExample.html
<body> <script type="text/javascript" charset="utf-8"> dhx.ui({ height:215, view:"window", head:{ view:"toolbar", type:"MainBar", data:[{type:"label", label:"2010 Movies "}] }, body:{view:"list", id:"mylist", url:"movies.xml", datatype:"xml", template:"#name#", select:true, type: { width: 300 } }, top:20, left:20, move:true }); $$("mylist").attachEvent("onxle", function(){ this.filter("#year#","2010"); }); </script> </body>
movies.xml
<?xml version="1.0" encoding="UTF-8"?> <data> <item id="1"> <name>The Gold Rush</name> <year> 1925 </year> </item> <item id="2"> <name>The Last Airbender</name> <year> 2010 </year> </item> <item id="3"> <name>Gone With The Wind</name> <year>1939</year> </item> <item id="4"> <name>The A-Team</name> <year>2010</year> </item> <item id="5"> <name>Piranha 3D</name> <year>2010</year> </item> <item id="6"> <name>Fantasia</name> <year> 1940 </year> </item> <item id="7"> <name>The Book of Eli</name> <year>2010</year> </item> <item id="8"> <name>King Kong</name> <year>1933</year> </item> </data>