Searching Through Remote Data Source

[Peter]

I am trying to implement a search feature on a TreeView. For my search, I am receiving a list of paths to the correct nodes on the tree.

The challenge comes in that I need to use lazy loading for my remote data source. I need to know when the data is loaded and the node has finished expanding or I need the ability to trigger the expansion of a node once the data for that node has loaded.

I've tried doing this with the fetch function but that doesn't seem to work properly. Since the search returns multiple results, I have a loop call my search function iteratively. What appears to happen is that the loop progresses without finishing a call until the last element because the data has not loaded from the remote data source until that time. I believe it may have something to do with calling both fetch and then expand afterward.

Does the expand function implement the Promise API? Is there another way to make this work?

My code is the following:

//the following function is initially called with:
//  - the full path (including the element)

//  - the first level dataItem
//  - the number 1

function findNode(path, dataItem, currentLevel){
    var treeview = $("#treeview").data("kendoTreeView");
    var ds = treeview.dataSource;
    var node = treeview.findByUid(dataItem.uid);

    if(currentLevel < path.length) {
       dataItem.children.fetch().always( function(){
            treeview.expand(node);
            $.each(dataItem.children.data(), function(index, value){
                if (value.id == path[currentLevel])
                    var di = ds.getByUid(value.uid);
                   findNode(path, di, currentLevel + 1);
                }
            });
        });
    }
    else{
         //do things with the found item
    }
}

[Peter]

Replying to myself since I found the answer. Decided to dig through the kendo source code and lucked upon an answer.

The function I needed was the load function for a Node. That combined with changing from a for-loop to recursion solved my issue.

I would still like to see Kendo provide either a search function for TreeView or a way to trigger a function after both the expand has completed and the data from the remote data source has been loaded. But this is a workable way to do this sort of thing for now.

Here's what I came up with:

01.//Start by calling the function with following parameters:
02.// + searchResults - an array of your search result objects each with a path from the top level to your element
03.// + resultNumber - the first index of your results (typically 0)
04.// + path - the path from your first search result (i.e. searchResult[0].path)
05.// + dataItem - the top level data item in your path to your first result
06.// + currentLevel - 1
07.
08.function findNode(searchResults, resultNumber, path, dataItem, currentLevel){
09.    var treeview = $("#treeview").data("kendoTreeView");
10.    var ds = treeview.dataSource;
11.    var node = treeview.findByUid(dataItem.uid);
12.
13.    if(currentLevel < path.length) {
14.        dataItem.load().always( function(){
15.            treeview.expand(node);
16.            $.each(dataItem.children.data(), function(index, value){
17.                if (value.id == path[currentLevel]){
18.                    var di = ds.getByUid(value.uid);
19.                    findNode(searchResults, resultNumber, path, di, currentLevel + 1);
20.                }
21.            });
22.        });
23.    }
24.    else{
25.        //Your code to do whatever you need with the searched node goes here
26.        resultNumber++;
27.        if(resultNumber < searchResults.length) {
28.            path = searchResults[resultNumber].path;
29.            dataItem = ds.get(path[0]);
30.            findNode(searchResults, resultNumber, path, dataItem, 1);
31.        }
32.    }
33.}