This is a migrated thread and some comments may be shown as answers.

On demand load initial parameter issue

1 Answer 113 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Amit
Top achievements
Rank 1
Amit asked on 13 May 2014, 08:51 PM
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

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 15 May 2014, 04:15 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TreeView
Asked by
Amit
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or