Issue with sub Header filtering

Suite and Optimus Suite 6
#1

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
#2

what I’m trying to achieve here is that if I enter a keyword in the filter input (e.g. Sample ) , it should display all the items OPINION->Sample Question-> Option1…Option5 (that full heirarchy of items where match is found. In the above sample there is only 1 tree but in actual there might be multiple tree so all the matching trees with all its branches should be displayed

#3

Unfortunately it is not available to use the client-side filters in treegrid with the dynamic loading mode, until the complete dataset is loaded to the treegrid.

#4

Thanks for answering quick but I didn’t get what you meant. I did not use dynamic loading code as there is no URL involved as I’m using dhxLQ.parse() (unless I’m missing something) and filtering works without error if I use dhxLQ.setFiltrationLevel(-1) //without last parameter true/false.

But the issue is that it displays only the item that was found in the branch( for e.g. in the above case if I type Sample it displays

OPINION
L Sample Question?

( here the children Option1, Option2…Option5 are filtered out) .

I’m trying to get the filter to display the full node ( i.e. if I type ‘Sample’
make the grid display

OPINION
L Sample Question ?
L Option1
L Option2
…
L Option5

Please let me know if there is some way to get the entire parent node + children displayed when the filter string matches anything inside the node/tree.

#5

I’ve supposed you are using the dynamic loading mode due to the xmlKids parameter in your xml.
Commonly your reported error occurs, when row with the specified id cannot be found in the treegrid.
Could you please, provide a complete demo, where the problem can be reconstructed locally.
https://docs.dhtmlx.com/guides__demo_for_support.html

#6

Please see the jsfiddle with the code that reproduces the interface and the function I’m trying to achieve

Js Fiddle

If you type Sample in the search Text box on the sub header of the grid, you will see that it filters Sample Question… node along with its parent nodes OPINION1 and JUDGEMENT1 filtering out its children and sibling nodes.

My question is how do I get to display their children (Option1, Option2,…Option5) as well as its sibling node
Any further comments? which are under the same OPINION1, JUDGEMENT1 parent (which are displayed/filtered).
The reason is because these are related data that needs to be displayed when filtered and I’m looking for a way get all the 3 levels to display when there is a match
Please let me know if something is not clear or if any more details are required from me.

#7

For displaying “their children ( Option1, Option2,…Option5 )” please, try to use the
dhxLQ.setFiltrationLevel(1);
But it is not available to display the Sibling items of the filtered item to display the " Any further comments".
The only solution in this case is to create your own custom filtering function with the required logic:
https://docs.dhtmlx.com/api__link__dhtmlxtreegrid_filterby.html

#8

Thank you for all your quick help so far.