jstree with ajax search and massload plugin

1.5k Views Asked by At

I'm trying to get the massload plugin to work with my jstree configuration. The nodes are built as Country->City->Site->Product->License. When the tree is loaded initially, only the top level nodes are loaded (in my case Countries). When a user expands a node, the children are loaded using ajax. I have a search box that searches in the tree, this works, but it only matches on nodes that are already loaded. I would like to this to work on all site level nodes, loaded or not.

The search ajax call to returns a list of site ids, which is passed to the massload plugin. It calls the LazyLoad method with the correct ids. What I'm can't figure out is what to return in response to the massload call. According to this, it should take the form of

{ 
  "id1" : { "id" : node_id_of_child1, "text" : "child2", "id" : node_id_of_child2, "text" : "child2" }, 
  "id2" : { ... node data ...}  
}

Where id1 and id2 are matching node id's from the search.

But when I do that, the nodes aren't added to the tree and the search term only matches on nodes already loaded.

This is my jstree configuration

$('#tree').jstree({
                core: {
                    data: {
                        url: '@Url.Action("Nodes", "Home")',
                        data: function (node) {
                            if (node.id === '#')
                                return {
                                    nodeType: 'root'
                                };
                            else 
                                return {
                                    nodeType: node.data.type,
                                    nodeValue: node.data.value                                     
                                };
                        },
                        type: 'POST'
                    }
                },
                plugins: ["massload", "search"],
                search: {
                    "show_only_matches": true,
                    ajax: {
                        url: '@Url.Action("Search", "Sites")',
                        type: 'POST'
                    }
                },
                massload: {
                    url: '@Url.Action("LazyLoader", "Home")',
                    data: function (nodes) {
                        return { "ids": nodes.join(",") };
                    },
                    type: 'POST'
                },
                themes: {
                    "theme": "default",
                    "dots": false,
                    icons: true
                }
            });

Questions: - Is the response format from the massload ajax call correct? - What is the massload plugin's action based on this response? Should it try to load the nodes in the response in the same way (i.e. using the same ajax call) the nodes are loaded when a user requests them?

0

There are 0 best solutions below