I’m trying to create the following filter example
Filtering in Tree grid
The code using which TreeGrid is constructed is this
var dhxLQ = dhxQSLayout.cells(“b”).attachGrid();
dhxLQ.setIconset(“fontawesome”);
dhxLQ.setImagePath(’/js/dhtmlx/codebase/imgs/’);
dhxLQ.setHeader(‘Questions’);
dhxLQ.setInitWidths("*");
dhxLQ.setColAlign(“left”);
dhxLQ.setColTypes(“tree”);
dhxLQ.setColSorting(“str”);
dhxLQ.enableAutoWidth(true);
dhxLQ.enableMultiline(true);//wrap text
dhxLQ.attachHeader("#text_filter");//filter/search question sub header
dhxLQ.setFiltrationLevel(-1,true);//show all levels
dhxLQ.enableTreeCellEdit(false);
dhxLQ.init();
dhxLQ.parse(dhxLQXML,“xml”);
The dhxLQXML content is
<?xml version="1.0" encoding="UTF-8"?>
<rows>
<row id='3'>
<cell icon='database'><![CDATA[OPINION]]></cell>
<row id='3_4'><cell icon='pencil-square-o' xmlkids='1'><![CDATA[What could they do better or improve?]]></cell></row>
</row>
<row id='6'><cell icon='database'><![CDATA[OPINION]]></cell>
<row id='6_7'><cell icon='folder-open'><![CDATA[Sample Question?]]></cell>
<row id='6_7_18'><cell icon='dot-circle-o'><![CDATA[Option1]]></cell></row>
<row id='6_7_19'><cell icon='dot-circle-o'><![CDATA[Option2]]></cell></row>
<row id='6_7_20'><cell icon='dot-circle-o'><![CDATA[Option3]]></cell></row>
<row id='6_7_21'><cell icon='dot-circle-o'><![CDATA[Option4]]></cell></row>
<row id='6_7_22'><cell icon='dot-circle-o'><![CDATA[Option5]]></cell></row>
</row>
<row id='6_40'><cell icon='pencil-square-o' xmlkids='1'><![CDATA[Any further comments?]]></cell></row>
</row>
</rows>
Everything looks good and grid renders but when I type text to filter in the subheader. I get the following error in console and filtering does not work. Our version is dhtmlx 6.4.2 PRO. Please can someone let me know what I’m doing wrong??
dhtmlx.js:1 Uncaught TypeError: Cannot read properties of null (reading 'id')
at c (dhtmlx.js:1:1128205)
at window.<computed>.temp (dhtmlx.js:1:1128999)
at g (dhtmlx.js:1:1128592)
at window.<computed>.temp (dhtmlx.js:1:1129227)
at dhtmlXGridObject._filterTreeA (dhtmlx.js:1:1129239)
at dhtmlXGridObject.filterTreeBy (dhtmlx.js:1:1127823)
at dhtmlXGridObject.filterBy (dhtmlx.js:1:911913)
at dhtmlXGridObject.filterByAll (dhtmlx.js:1:914733)
at dhtmlx.js:1:915680
c @ dhtmlx.js:1
temp @ dhtmlx.js:1
g @ dhtmlx.js:1
temp @ dhtmlx.js:1
dhtmlXGridObject._filterTreeA @ dhtmlx.js:1
dhtmlXGridObject.filterTreeBy @ dhtmlx.js:1
dhtmlXGridObject.filterBy @ dhtmlx.js:1
dhtmlXGridObject.filterByAll @ dhtmlx.js:1
(anonymous) @ dhtmlx.js:1
setTimeout (async)
h.onkeydown @ dhtmlx.js:1