Programmatically expand and select a child node...

[Ken De Vries]

Here is the code I am using to create the TreeView...

01.@(Html.Kendo().TreeView()
02.        .Name("CategoryTree")
03.        .TemplateId("TreeViewTemplate")
04.        .HtmlAttributes(new { })
05.        .DataTextField("Description")
06.        .AutoScroll(false)
07.        .LoadOnDemand(true)
08.        .Events(e => e.Select("_CategoryChooserView_OnCategorySelected"))
09.        .Events(e => e.Expand("_CategoryChooserView_OnCategoryExpand"))
10.        .Events(e => e.Collapse("_CategoryChooserView_OnCategoryCollapsed"))
11.        .Animation(true)
12.        //.DataSpriteCssClassField("DataSpriteCSSClass")
13.        .DataSource(d => d
14.            .Model(m => m
15.                .Id("CategoryCode")
16.                .HasChildren("HasChildren")
17.            )
18.            .Read(read => read.Action("ListSubCategories", "Services"))
19.            .Events(e => e.RequestEnd("_CategoryChooserView_OnCategoryRequestEnd"))
20.            .Events(e => e.RequestStart("_CategoryChooserView_OnCategoryRequestStart"))
21.    ))

After the Treeview is instantiated, I want to call a JavaScript function like this one to expand and select a particular node.  The node is not necessarily a top level node - it could be quite a ways down in the hierarchy.

01.function _CategoryChooserView_SelectNode(CategoryCode)
02.{
03.
04.    if (CategoryCode.length > 0)
05.    {
06.        var TreeView = $("#CategoryTree").data("kendoTreeView");
07.        var DataItem = TreeView.dataSource.get(CategoryCode);
08.
09.        if (DataItem)
10.        {
11.            var Node = treeview.findByUid(DataItem.uid);
12.            treeview.select(Node);
13.
14.            ScrollElementToScrollableParent(Node);
15.        }
16.    }
17.}

The problem is that DataItem (line 7) comes back undefined every time, no matter what I feed "get()" method.  It seems to me that with a client side Treeview that fetches its data from a remote source upon expansion of a node, this can never be possible.

How can I programmatically expand and work my way down to the node I want selected?  I somehow need to expand each node down to the target node.  Is it even possible?

I pulled some of this from an example located here: http://www.telerik.com/forums/programatically-select-a-tree-node

[Ken De Vries]

Here is the Template I am using for the TreeView...

1.<script id="TreeViewTemplate" type="text/kendo-ui-template">
2.    <div id="CategoryChooserDiv_#:item.CategoryCode#" style="line-height:7px;">
3.        <span id="CategoryChooserSpan_#:item.CategoryCode#" style="color:blue;">#: item.Description #</span>
4.    </div>
5.</script>

[Ken De Vries]

Now I am trying the method discussed here: Expand Path

It does not work either when used like this...

01.function _CategoryChooserView_SelectNode(TaxonomyCode)
02.{
03.
04.    if (TaxonomyCode.length >= 3)
05.    {
06.
07.        var TreeView = $("#CategoryTree").data("kendoTreeView");
08.        var TaxonomyPath = new Array();
09.        var TargetCategory = TaxonomyCode.substring(TaxonomyCode.length, TaxonomyCode.length - 3);
10.
11.        while (true)
12.        {
13.            var CategoryCode = TaxonomyCode.substring(0, 3);
14.
15.            if (CategoryCode.length == 3)
16.            {
17.                TaxonomyPath.push(CategoryCode);
18.                TaxonomyCode = TaxonomyCode.replace(CategoryCode, "");
19.
20.            }
21.            else
22.                break;
23.
24.        }
25.
26.        if (TaxonomyPath.length > 0)
27.        {
28.
29.            TreeView.expandPath(TaxonomyPath);
30.            var DataItem = TreeView.dataSource.get(TargetCategory);
31.
32.            if (DataItem)
33.            {
34.                var Node = TreeView.findByUid(DataItem.uid);
35.                if (Node.length)
36.                {
37.                    TreeView.select(Node);
38.
39.                    ScrollElementToScrollableParent(Node);
40.                }
41.            }
42.        }
43.
44.    }
45.}

 

Is anyone out there?

[Daniel]

Hello,

Since the children are loaded asynchronously on demand you need to use the expandPath complete callback to get the item. Also, note that you should wait for the root elements to be loaded in order for the expandPath method to work - example.

Regards,
Daniel
Telerik

[Ken De Vries]

Daniel,

Here is what I have tried based on your example...

01.function _CategoryChooserView_SelectNode(TaxonomyCode)
02.{
03.
04.    if (TaxonomyCode.length >= 3)
05.    {
06.        debugger;
07.
08.        var TreeView = $("#CategoryTree").data("kendoTreeView");
09.        var TaxonomyPath = new Array();
10.        var TargetCategory = TaxonomyCode.substring(TaxonomyCode.length, TaxonomyCode.length - 3);
11.
12.        while (true)
13.        {
14.            var CategoryCode = TaxonomyCode.substring(0, 3);
15.
16.            if (CategoryCode.length == 3)
17.            {
18.                TaxonomyPath.push(CategoryCode);
19.                TaxonomyCode = TaxonomyCode.replace(CategoryCode, "");
20.
21.            }
22.            else
23.                break;
24.
25.        }
26.
27.        if (TaxonomyPath.length > 0)
28.        {
29.
30.
31.            TreeView.expandPath(TaxonomyPath,
32.                function ()
33.                {
34.                    debugger;
35.
36.                    var DataItem = TreeView.dataSource.get(TargetCategory);
37.
38.                    if (DataItem)
39.                    {
40.                        var Node = TreeView.findByUid(DataItem.uid);
41.                        if (Node.length)
42.                        {
43.                            TreeView.select(Node);
44.
45.                            ScrollElementToScrollableParent(Node);
46.                        }
47.                    }
48.
49.                });
50.        }
51.    }
52.}

 

The incoming Taxonomy code is a string consisting of substrings indicating the category of component. For example "001002" is the taxonomy code for a subset of valves like this: "001" = Valves, "002" = Check Valves.  The category ID to expand in this case would be "002" (TargetCategory variable).  The last three digits of the Taxonomy Code is the ID of the leaf level category to be selected.

The problem is that on line 36 above, DataItem is coming back undefined.  The function in lines 31 & 32 is getting called but ExpandPath does not seem to be fetching the data, even if the callback function is being executed.

I have tried this a number of ways, none of which work.

[Daniel]

Hi,

The code looks correct. Could you provide a runnable sample that demonstrates the problem or the code used to call the _CategoryChooserView_SelectNode function and a sample of the data so I can try to replicate it on my side?

Regards,
Daniel
Telerik

[Ken De Vries]

Daniel,

OK, I have this almost working.  It was actually sort of working before but it was not expanding the first ID in the list.  In other words, if I manually expand the top-level node in the list, the Tree View will then expand and select the leaf level target node.

My question is now: Why is the TreeView not expanding the first node in the branch containing the target?

To be honest, I am beginning to think this is way too much hoop-jumping for such a simple task and am looking for an alternative representation for my category structure - cascading dropdowns or something.  I am also beginning to think that MVC is just a pain in the butt.  I feel like I have to do too much work in MVC to get something simple to work.

[Daniel]

Hi,

The first node in the list seems to be expanded in the example from my initial reply. Can you modify it so that it demonstrates the issue or provide a runnable sample in which the method does not work if the first node is not expanded?

Regards,
Daniel
Telerik