How to programatically expand a node of Kendo tree

问题:

I have a Kendo treeview that is built as below codes (see below). Each tree node has a unique data id field (that is employee Id).

I would like to have a text box ( <input type="text" ... /> ) and a button ( <input type="button" ... /> ) so user can input some id and when she hit the button, the button click event handler will let the treeview expand the node whose id matches the input id. How can I do that? Thank you very much.

Details of click event handler or the button:

function buttonExpand_onClick()
{
   var id = $("textboxEmployeeId").val();

   // ???
   // how can I do the following code lines to expand the node with id of "id" to see all its children?
}

Details of the existing Kendo treeview building codes:

<div id="treeviewEmployee">

</div>

<script id="treeview-template" type="text/kendo-ui-template">
            #: item.text #

</script>

$(function(
{
     var defaultRootSelectedId = 1; // 1 is employee id of the root employee on first loading   

$.ajax({
                url: '/Employee/AjaxGetEmployeeNodes/?id=' + defaultRootSelectedId,
                type: 'GET',
                dataType: 'json',
                async: false,
                success: function (data, textStatus, xhr) {
                    $("#reeviewEmployee").kendoTreeView({
                        template: kendo.template($("#treeview-template").html()),
                        dataSource: data,
                        select: treeview_onSelect


                    });

                    _treeview = $("#treeviewEmployee").data("kendoTreeView");


                },
                error:
                    function (xhr, textStatus, errorThrown) {
                        alert(textStatus);
                    }
            });

});

回答1:

You can access the datasource on the treeview and find the node by id. I would also like to add that the treeView has a 'findByText()' method as well, in case that is what you want.

HTML

<script id="treeTemplate" type="text/x-kendo-template">
    #: item.text #
</script>

<div id="content">
    <div id="form">
        <label>Node ID:
            <input id="nodeId" type="text"/>
        </label>
        <button id="expandNodeBtn">Expand Node</button>
    </div>
    <h2>TreeView</h2>
    <div id="treeView"/>
</div>

JAVASCRIPT

(function ($) {
    $(document).ready(function () {
        $("#treeView").kendoTreeView({
            dataSource: [
                {
                    text: 'one with id 1',
                    id: 1,
                    items: [
                        {
                            text: 'one-child-1',
                            id: 2
                        },
                        {
                            text: 'one-child-2',
                            id: 3
                        }
                    ]
                },
                {
                    text: 'two with id 4',
                    id: 4,
                    items: [
                        {
                            text: 'two-child-1',
                            id: 5
                        },
                        {
                            text: 'two-child-2',
                            id: 6
                        }
                    ]
                }
            ]
        });
        $("#expandNodeBtn").on("click", function(e) {
            var val = $("#nodeId").val();
            console.log('val: ' + val);
            var treeView = $("#treeView").data('kendoTreeView');
            var dataSource = treeView.dataSource;
            var dataItem = dataSource.get(val); // find item with id = 5
            var node = treeView.findByUid(dataItem.uid);            
            treeView.expand(node);
        });
    });
})(jQuery);

JSFiddle

I also put together a JSFiddle sample for you to play with: http://jsfiddle.net/jsonsee/D35Q6/

回答2:

Slightly related, but I came here looking for an answer to this question: How to expand the whole branch when clicking to a parent node in angular treeview? Since I didnt find any answers, I post my solution here. Hope it helps someone.

html

        <div id="treeview" kendo-tree-view="tree" k-options="options" k-on-change="selectItem(dataItem)">
     </div>

controller

    $scope.options = {
        dataSource: dummyData,
        template: $scope.treeItemTemplate
    }

    $scope.treeItemTemplate = "<button ng-click='expandRoot(dataItem)'>Blow up</button>";

    $scope.expandRoot = function expandRoot(dataItem) {
        dataItem.expanded = true;

        if (dataItem.hasChildren) {
            dataItem.load()
            var children = dataItem.children.data();
            children.forEach(function (c) {
                c.expanded = true;
                $scope.expandRoot(c)
            });
        }
    }