Selecting a treeview item by it's data properties

1 posts, 0 answers
  1. Rob
    Rob avatar
    4 posts
    Member since:
    Aug 2012

    Posted 10 Aug 2012 Link to this post

    Hi folks,

    I'm using a treeview from a HierarchicalDataSource and wanted to be able to get the element from the treeview if it matched all the properties that I specified. My initial data looked something like this:

    [{
        id:'2022',
        text:'Folder1',
        items: [{
            id:'3202',
            text:'Sub-Folder1'
        }, {
            id:'1234',
            text:'Sub-Folder2',
            moo: true
        }]
    }]

    I wanted to be able to get the list item element (<li>) for any particular item so I built a function to do it and thought I'd share. You can use my function like this (in this example I want to get the element for the item with the id '3202':

    var liElement = $('#treeView').data('kendoTreeView').search({id:'3202'});

    You can also search on multiple properties:

    var liElement = $('#treeView').data('kendoTreeView').search({id:'1234', moo: true});

    To enable this functionality, after creating a treeview with a HierarchicalDataSource, add this code (assumes your treeview element is #treeView - change as required):

    $("#scenegraph-treeview").data('kendoTreeView').search = function (json, source) {
        if (json !== undefined) {
            var data = source || this.dataSource,
                child, item, i, k, match, allMatched;
     
            // If the data has the properties we need
            if (data && data._data) {
                child = data._data;
     
                // If the array has items
                if (child.length) {
                    // Loop the array items
                    for (i = 0; i < child.length; i++) {
                        item = child[i];
     
                        console.log('Checking child ' + i + ' id ' + item.id);
     
                        // Check each json property against the current item's properties
                        // and if they all match, grab the tree item based on it's UID
                        allMatched = true;
                        for (k in json) {
                            if (json.hasOwnProperty(k)) {
                                if (item[k] !== json[k]) {
                                    // The item doesn't have all the properties
                                    // that the json object does
                                    allMatched = false;
                                    break;
                                }
                            }
                        }
     
                        if (allMatched) {
                            // We've found a match, grab the tree item from the UID and return it
                            return this.findByUid(item.uid);
                        } else {
                            // We didn't find what we were looking for so search the children
                            if (item.children) {
                                match = this.search(json, item.children);
                                if (match) {
                                    return match;
                                }
                            }
                        }
                    }
                }
            }
        }
    };

    Hope this helps someone out!

    Rob - Irrelon Software Limited
Back to Top