On demand load initial parameter issue

[Amit]

1 of 2 -The requirement is that a tree view gets populated after the user selects a row in a grid. I use javascript to pass the ID of the grid selection -
2 of 2 - the user should then be able to, in the tree view, load nodes on demand by expanding nodes. The code for the controller is attached.

This is setup in MVC 4 with and Index view that contains a kendo splitter pointing to two partial views -

• List (contains the kendo grid); &
• Detail - contains the kendo tree view

01.function GridRowSelected(arg) {//row selection event
02.    var grid = $("#adminGrid").data("kendoGrid");
03.    var row = grid.select();
04.    var data = grid.dataItem(row);
05.    //alert("in List" + data.EntHID);
06.    loadChildrenForEntity(data.EntHID)
07.    entityId = data.EntHID;
08.    //alert("in list : " + entityId);
09.}

The treeview configuration and datasource is -

01.<script type="text/javascript">
02.    function loadChildrenForEntity(entityId) {
03.        dataSource = new kendo.data.HierarchicalDataSource({
04.            transport: {
05.                read: {
06.                    cache: false,
07.                    url: "@Url.Action("GetChildrenForEntity", "Admin")",
08.                    dataType: "json",
09.                    data: function () {
10.                        return {
11.                            entityID: entityId
12.                        };
13.                    }
14.                }
15.            },
16.            schema: {
17.                model: {
18.                    id: "ItemHID",
19.                    hasChildren: "HasChildren"
20.                }
21.            }
22.        });
23.
24.        $("#entityDetails").kendoTreeView({
25.            dataSource: dataSource,
26.            //select: onSelect,
27.            expand: onExpand,
28.            dataTextField: "DisplayName",
29.            loadOnDemand: true
30.        });//.data("kendoTreeView");
31.    }
32.
33.    function onExpand(e) {
34.        e.preventDefault();
35.        var treeview = $('#entityDetails').data('kendoTreeView');
36.        var node = e.node;
37.        var data = treeview.dataItem(node);
38.        //alert('id = ' + data.id);
39.        $.ajax({
40.            url: "@Url.Action("GetChildrenForEntity", "Admin")",
41.            //type: "POST",
42.            datatype: "json",
43.            data: { entityID: data.id },
44.            success: function (result) {
45.                DisplayChildNodes(result, node)
46.            }
47.        });
48.    }
49.
50.    function DisplayChildNodes(result, node) {
51.        var treeview = $('#entityDetails').data('kendoTreeView');
52.        treeview.append(result, node);
53.    }
54.</script>

The initial load is fine - the user selects a row in the grid and the tree view loads as expected. However, the crux of the problem appears to be that when treeview nodes are expanded, the code is  executed with the original ID that was passed in via the javascript. This should instead be invoked with the id of the node selected, which happens due to the onExpand event.

Has anyone else experienced this issue and found a solution to it? Thanks in advance

Amit

[Petur Subev]

Hello Amit,

What node was selected, the e.node parameter is the node that was expanded. Since we are not sure what exactly is the issue and your setup, we will need a small demo or live url to run and investigate.

Thank you for the understanding.

Kind Regards,
Petur Subev
Telerik