Filtering data in JsTree

Ravi K

unread,

Jul 20, 2015, 9:03:06 AM7/20/15

to jst...@googlegroups.com

I have a dropdown with codes like Group1, Group2 Group3 etc..
The JsTree has data corresponding to all groups when initially loaded.
I want to filter the Jstree based on dropdown selections like if they select Group1 i want to only show group1 data, how do i do that?

Ivan Bozhanov

unread,

Jul 20, 2015, 10:31:45 AM7/20/15

to jst...@googlegroups.com, prog...@gmail.com

Sorry, this is not possible - at least not using "hide/show" on nodes - as there is not such built in functionality.
You can however .refresh() the whole tree and supply different data depending on the value of the dropdown - tell me if this suits you and if you will need some help with that.

Best regards,
Ivan

Ravi K

unread,

Jul 20, 2015, 10:34:02 AM7/20/15

to jst...@googlegroups.com, prog...@gmail.com

Hey Ivan - That will work can you provide a sample on how i can do that? Thanks.

Ravi K

unread,

Jul 20, 2015, 11:21:11 AM7/20/15

to jst...@googlegroups.com, prog...@gmail.com

Which one u think would be more faster, hiding showing in dom or retrieving it based on groups?
I guess since jstree will have all groups showing/hiding will be faster right?
would you happen to have that sample also?

On Monday, July 20, 2015 at 10:31:45 AM UTC-4, Ivan Bozhanov wrote:

Ivan Bozhanov

unread,

Jul 21, 2015, 1:07:51 AM7/21/15

to jst...@googlegroups.com, prog...@gmail.com

Refreshing the data will work like this:

$('#tree').jstree({
core : {
    data : function (node, cb) {
      // fetch according to dropdown value (it may not be an ajax call, maybe a simple object - it all depends on your case):
      $.post('/some/url/', { filter : $('#dropdown').val() }).done(function (data) { cb(data); });
    }, ...
$('#dropdown').change(function () {
$('#tree').jstree(true).refresh();
})

Best regards,
Ivan

Ravi K

unread,

Jul 21, 2015, 8:45:14 AM7/21/15

to jst...@googlegroups.com, prog...@gmail.com

Hey Ivan,
Will there be a way to do this client side, i dont want to make a server call as i have all the data loaded in DOM. I just want to filter based on dropdown value.
Thanks.

Ravi K

unread,

Jul 21, 2015, 8:49:49 AM7/21/15

to jst...@googlegroups.com

And one more thing i only want to filter parent nodes as the names in the dropdown are the parent node names

Ivan Bozhanov

unread,

Jul 21, 2015, 10:07:29 AM7/21/15

to jst...@googlegroups.com, prog...@gmail.com

Yes, you can feed a static (already loaded) object to jstree. Dealing with DOM nodes however will be trickier - you'd be better off creating a few instances and show/hide the DIVs. Show/Hide particular nodes will not work - I am working on a plugin that will do this, but it is far from complete.

Best regards,
Ivan

Ravi K

unread,

Jul 21, 2015, 11:53:54 AM7/21/15

to jst...@googlegroups.com, prog...@gmail.com

I did not fully understand your answer.
I can have only 1 instance of jstree on the page.
Can u please provide a small sample.

Ivan Bozhanov

unread,

Jul 21, 2015, 2:43:02 PM7/21/15

to jsTree, prog...@gmail.com, prog...@gmail.com

Sorry, but I do not understand your requirements - if you want to have a DIV with an UL inside of it, that contains multiple LIs (each representing a root node) and have only one of those LIs visible at any given moment - that is not possible - jstree does not work like that - there is no hide/show functionality.
Tell me what you are trying to achieve so that I can help you - give me an example. The sample you need is the code I gave in my previous answer. You can modify it to use static JSON:
<select id="dropdown">
<option value="root1">root1</option>
<option value="root2">root2</option>
</select>
<script>
var data = {
'root1' : [ ... data here ... ],
'root2' : [ ... data here ... ]
};

$('#tree').jstree({
core : {
data : function (node, cb) {

cb(data[$('#dropdown').val()]);

}, ...

$('#dropdown').change(function () {
$('#tree').jstree(true).refresh();

});

I can not think of an easy way to do this with the HTML data source - it is a basic data source, which is not as flexible as JSON.

Best regards,
Ivan

Ravi K

unread,

Jul 21, 2015, 3:11:11 PM7/21/15

to jsTree

Hey Ivan,
I have a DIV and UL and LI within that

<div id="DemographicClassCodeTreeElement" class="jstree jstree-1 jstree-default jstree-checkbox-selection" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="629745" aria-busy="false"><ul class="jstree-container-ul jstree-children jstree-no-icons jstree-striped" role="group"><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="33_anchor" aria-expanded="true" id="33" class="jstree-node jstree-open"><a class="jstree-anchor" href="#" tabindex="-1" id="33_anchor">Group 1</a><ul role="group" class="jstree-children"><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="629745_anchor" id="629745" class="jstree-node jstree-leaf"><a class="jstree-anchor" href="#" tabindex="-1" id="629745_anchor">Value1</a></li><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="629746_anchor" id="629746" class="jstree-node jstree-leaf jstree-last"><a class="jstree-anchor" href="#" tabindex="-1" id="629746_anchor">Value 2</a></li></ul></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="34_anchor" aria-expanded="true" id="34" class="jstree-node jstree-open"><a class="jstree-anchor" href="#" tabindex="-1" id="34_anchor">Group 2</a><ul role="group" class="jstree-children"><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="629747_anchor" id="629747" class="jstree-node jstree-leaf jstree-last"><a class="jstree-anchor" href="#" tabindex="-1" id="629747_anchor">Value1</a></li></ul></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="35_anchor" aria-expanded="true" id="35" class="jstree-node jstree-open jstree-last"><a class="jstree-anchor" href="#" tabindex="-1" id="35_anchor">Group 3</a><ul role="group" class="jstree-children"><li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="629748_anchor" id="629748" class="jstree-node jstree-leaf jstree-last"><a class="jstree-anchor" href="#" tabindex="-1" id="629748_anchor">Value1</a></li></ul></li></ul></div>

I want to filter the groups in the Jstree based on the selection in the dropdown.

So I think my only option now is to get the data from the server each time the group value changes in the dropdown?

jstree_filter.PNG

Ivan Bozhanov

unread,

Jul 22, 2015, 1:58:30 AM7/22/15

to jsTree, prog...@gmail.com

No, just wait till the end of the day - I am almost done with the hide/show functionality, which will be perfect for your case. You will be able to hide all group nodes that do not match your filter.

Best regards,
Ivan

Ravi K

unread,

Jul 22, 2015, 8:48:31 AM7/22/15

to jsTree

thanks, appreciate the help.

Ivan Bozhanov

unread,

Jul 22, 2015, 9:03:54 AM7/22/15

to jsTree, prog...@gmail.com

The hide / show functionality is in the repo. So you can now use this:

$('#tree').jstree({
// configure as normal
}).on('ready.jstree', function (e) { $('#dropdown').change(); });

$('#dropdown').change(function () {
$('#tree').jstree(true).hide_node([ 'root1', 'root2', 'root3' ]); // hide all root nodes
$('#tree').jstree(true).show_node($(this).val()); // show the one that should be visible
});

Best regards,
Ivan

Ravi K

unread,

Jul 22, 2015, 10:16:49 AM7/22/15

to jsTree

working perfect, thanks a lot Ivan.

Reply all

Reply to author

Forward