View.filter not working for me

Suite and Optimus Suite 5
#1

I have a simple app that I am trying to create

When I run through the view.filter command the dataview does not display anything
I do see all the data before this command is run " data_view_2.filter(“Group”,“Marble”);"

Here is my Layout.js

var data_view_1 = null;
var data_view_2 = null;
function init(){ dhtmlx.image_path=‘./codebase/imgs/’;

var main_layout = new dhtmlXLayoutObject(document.body, '3J');

var a = main_layout.cells('a');
a.setText('Menu Categories');
a.setWidth('250');
var data_view_1 = a.attachDataView({
	type:{
		template:'html->dhx_type_menu_container',
		template_edit:'<input class=\'dhx_item_editor\' bind=\'obj.Package\'>'
	}
});

data_view_1.load('./data/menu1.xml', 'xml');

data_view_1.attachEvent("onXLE",function(){
 	data_view_1.select(2);

});
data_view_1.attachEvent(“onAfterSelect”,function(id){
var a = data_view_1.get(id);
data_view_2.load(‘./data/content.xml’, function(b){
alert(a.Name);
data_view_2.filter(“Group”,“Marble”);
},‘xml’);

//data_view_2.load('./data/content.xml', 'xml');

//data_view_2.filter("Group","Granite");
//displayitem(id);

});

var b = main_layout.cells('b');
b.setText('Menu Items');
var data_view_2 = b.attachDataView({
	type:{
		template:'html->dhx_type_submenu_container',
		template_edit:'<input class=\'dhx_item_editor\' bind=\'obj.Package\'>'
	}
});

//data_view_2.load('./data/content.xml', 'xml');



var c = main_layout.cells('c');
c.setText('Order');
c.setHeight('120');
c.fixSize(1,0);

}

function displayitem(id)
{

alert(‘ID is’ + id +'. ’ );

}

var stored_data = ‘[{“element”:“fake”,“id”:“gui”,“_text”:“Main UI”,“freeze”:true,“open”:true,“$parent”:0,“$level”:1,“$count”:1,“events”:{},“$selected”:false},{“element”:“windows”,“id”:“windows”,“name”:“windows”,“_text”:“Popups”,“freeze”:“partially”,“$parent”:0,“$level”:1,“$count”:0,“events”:{},“$selected”:false},{“element”:“main_layout”,“open”:true,“id”:“top”,“name”:“main_layout”,“_text”:“Layout : <span class='dhx_element_name'>main_layout”,“events”:{},“freeze”:“partially”,“image_path”:“./codebase/imgs/”,“scheme”:“3J”,“$parent”:“gui”,“$level”:2,“$count”:3,“$selected”:false},{“element”:“cell”,“id”:“1”,“cell_name”:“a”,“name”:“a”,“events”:{},“_text”:“Cell : <span class='dhx_element_name'>a”,“$parent”:“top”,“$level”:3,“$count”:1,“$selected”:false,“header”:“Menu Categories”,“collaps_header”:“”,“width”:“300”,“height”:0,“open”:true,“body”:“data_view”},{“element”:“cell”,“id”:“2”,“cell_name”:“b”,“name”:“b”,“events”:{},“_text”:“Cell : <span class='dhx_element_name'>b”,“$parent”:“top”,“$level”:3,“$count”:1,“$selected”:false,“header”:“Menu Items”,“open”:true,“body”:“data_view”},{“element”:“cell”,“id”:“3”,“cell_name”:“c”,“name”:“c”,“events”:{},“_text”:“Cell : <span class='dhx_element_name'>c”,“$parent”:“top”,“$level”:3,“$count”:0,“$selected”:false,“height”:“120”,“fixed_width”:1,“collapse”:0,“hide_header”:0,“header”:“Order”},{“element”:“data_view”,“_text”:“Data View : <span class='dhx_element_name'>data_view_1”,“datasource”:“New DataSource”,“datatype”:“xml”,“template”:“html->dhx_type_menu_container”,“template_edit”:“<input class=\'dhx_item_editor\' bind=\'obj.Package\'>”,“events”:{},“id”:1354053617973,“$count”:0,“$level”:4,“$parent”:“1”,“name”:“data_view_1”,“$selected”:false,“editable”:0},{“element”:“data_view”,“_text”:“Data View : <span class='dhx_element_name'>data_view_2”,“datasource”:“New DataSource”,“datatype”:“xml”,“template”:“#Package# : #Version#
#Maintainer#”,“template_edit”:“<input class=\'dhx_item_editor\' bind=\'obj.Package\'>”,“events”:{},“id”:1354555412289,“$count”:0,“$level”:4,“$parent”:“2”,“name”:“data_view_2”,“$selected”:false}]’;

Here is my XML file that I’m loading here

<?xml version="1.0" encoding="iso-8859-1" ?> 
<item id="19">
	<Img><![CDATA[imgs/limestone/280208062248.jpg]]></Img>
	<Name><![CDATA[Basaltina]]></Name>
	<Description><![CDATA[Basaltina - Amazing Dark Grey Uniform Lava Stone from Italy. Available in 2cm and 3cm slabs Applications: Exterior Cladding, Interior Walls, Interior Floors.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Limestone]]></Group>
</item>
<item id="20">
	<Img><![CDATA[imgs/limestone/260509093339.jpg]]></Img>
	<Name><![CDATA[Beaumanire]]></Name>
	<Description><![CDATA[Beaumanire: French Limestone Available in 2cm honed]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Limestone]]></Group>
</item>
<item id="21">
	<Img><![CDATA[imgs/limestone/100308125840.jpg]]></Img>
	<Name><![CDATA[Cedar]]></Name>
	<Description><![CDATA[Cedar - Brown beige Limestone from Lebanon. Available in 2cm and 3cm slabs as well as tiles 12x12, 16x16, 18x18 and 24x24. Applications: Exterior Cladding, Interior Walls, Interior Floors.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Limestone]]></Group>
</item>
<item id="22">
	<Img><![CDATA[imgs/limestone/160308021241.jpg]]></Img>
	<Name><![CDATA[Crema Fatima]]></Name>
	<Description><![CDATA[Crema Fatima - Delicate White creme Limestone from Spain. Available in 2cm and 3cm slabs. Applications: Exterior Cladding, Interior Walls, Interior Floors.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Limestone]]></Group>
</item>
<item id="23">
	<Img><![CDATA[imgs/travertine/240108052012.jpg]]></Img>
	<Name><![CDATA[Italian Gold Travertine]]></Name>
	<Description><![CDATA[Gold Travertine vein cut from Italy. Available in 2cm and 3cm slabs.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Travertine]]></Group>
</item>
<item id="24">
	<Img><![CDATA[imgs/travertine/050208100528.jpg]]></Img>
	<Name><![CDATA[Italian Ivory]]></Name>
	<Description><![CDATA[Italian Ivory Travertine. Available in 3cm slabs only.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Travertine]]></Group>
</item>
<item id="25">
	<Img><![CDATA[imgs/travertine/050109021807.jpg]]></Img>
	<Name><![CDATA[Navona Travertine]]></Name>
	<Description><![CDATA[Navona Travertine- Creamy Beige Material Perfect For Kitchen And Bathroom Back Splash]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Travertine]]></Group>
</item>
<item id="26">
	<Img><![CDATA[imgs/travertine/110208063244.jpg]]></Img>
	<Name><![CDATA[Noce Travertine]]></Name>
	<Description><![CDATA[Brownish Travertine in vein cut from Greece. Available in 2cm and 3cm slabs.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Travertine]]></Group>
</item>
<item id="27">
	<Img><![CDATA[imgs/travertine/020308122502.jpg]]></Img>
	<Name><![CDATA[Silver Travertine ]]></Name>
	<Description><![CDATA[Silver blue Travertine from Italy. Available in 2cm and 3cm slabs.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Travertine]]></Group>
</item>
<item id="28">
	<Img><![CDATA[imgs/travertine/190608041235.jpg]]></Img>
	<Name><![CDATA[Travantino ]]></Name>
	<Description><![CDATA[Travantino]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Travertine]]></Group>
</item>
<item id="29">
	<Img><![CDATA[imgs/onyx/310108022801.jpg]]></Img>
	<Name><![CDATA[Cappucino Onyx]]></Name>
	<Description><![CDATA[Cappucino Onyx available in 2cm slabs only.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Onyx]]></Group>
</item>
<item id="30">
	<Img><![CDATA[imgs/onyx/160508042114.jpg]]></Img>
	<Name><![CDATA[Dark Green Onyx ]]></Name>
	<Description><![CDATA[Greenish brown vein cut Onyx from Italy. Available in 2cm slabs only.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Onyx]]></Group>
</item>
<item id="31">
	<Img><![CDATA[imgs/onyx/160608101754.jpg]]></Img>
	<Name><![CDATA[Emerald Onyx]]></Name>
	<Description><![CDATA[Emerald Onyx - Greenish black and brown vein cut Onyx from Italy. Available in 2cm slabs only.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Onyx]]></Group>
</item>
<item id="32">
	<Img><![CDATA[imgs/onyx/270208051551.jpg]]></Img>
	<Name><![CDATA[Esmeralda Onyx]]></Name>
	<Description><![CDATA[Greenish blue vein cut Onyx from Italy. Available in 2cm slabs only.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Onyx]]></Group>
</item>
<item id="33">
	<Img><![CDATA[imgs/onyx/180608065528.jpg]]></Img>
	<Name><![CDATA[Fire Onyx]]></Name>
	<Description><![CDATA[Fire Onyx - (Onice Fuoco) Fire red, black and creme' vein cut Onyx from Italy. Available in 2cm slabs only!]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Onyx]]></Group>
</item>
<item id="34">
	<Img><![CDATA[imgs/onyx/291208025029.jpg]]></Img>
	<Name><![CDATA[Green]]></Name>
	<Description><![CDATA[Green Onyx]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Onyx]]></Group>
</item>
<item id="35">
	<Img><![CDATA[imgs/onyx/170108124811.jpg]]></Img>
	<Name><![CDATA[Green Onyx Light]]></Name>
	<Description><![CDATA[Green Onyx Light available in 2cm slabs as well as tiles size 12x12.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Onyx]]></Group>
</item>
<item id="36">
	<Img><![CDATA[imgs/slate/300108094044.jpg]]></Img>
	<Name><![CDATA[Brazilian Multi Color]]></Name>
	<Description><![CDATA[Mulri color slate from Brazil.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Slate]]></Group>
</item>
<item id="37">
	<Img><![CDATA[imgs/slate/300108093850.jpg]]></Img>
	<Name><![CDATA[Forest Grey]]></Name>
	<Description><![CDATA[Grey Slate from Brazil. Available in 2cm and 3cm slabs as well as 24x24 tiles.]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Slate]]></Group>
</item>
<item id="38">
	<Img><![CDATA[imgs/slate/050109025502.jpg]]></Img>
	<Name><![CDATA[Green Slate Cleft Finish]]></Name>
	<Description><![CDATA[Green Slate Cleft Finish- Greyish Green Material Good For Outdoor Walls And Outdoor Flooring ]]></Description>
	<Price><![CDATA[11]]></Price>
	<Count><![CDATA[0]]></Count>
	<Group><![CDATA[Slate]]></Group>
</item>

Can you please see what Im doing wrong here.

Thanks alot

Dave

#2

Could you create completed demo to reproduce your issue and help you?
docs.dhtmlx.com/doku.php?id=othe … leted_demo

#3

Here is the demo as requested. You will notice that If you load the index.html after the alert box I expect the my data will be filtered with only the matched nodes showing but I get nothing.

Also this is working in Firefox Chrome and Safari. The IE does not show the data properly.
I have yet to add my css to the display of the items as I will add that after the filtering is working properly.

Thank you for you help

Dave
demo.zip (1.34 MB)

#4

One last thing when the project is displayed in IE it behaves differently as a file being accessed than a site running under a webserver.
Again Thanks for your help.

#5

You need to use the next:

data_view_2.load('./xml/content.xml','xml', function(){ //alert(a.Name); data_view_2.filter("#Group#,#Granite#"); });
Templates must be taken in the # symbols.
Unfortunatelly, we have a mistake in documentation. We will correct it as soon as possible.