Search code examples
telerikkendo-asp.net-mvctelerik-mvc

How to access a Model property in a TreeView on Telerik MVC TreeView (Kendo UI)


How do I access the ID property of the model when I select one of the treeview nodes? (I want to display the details based on ID next to the treeview)

        @(Html.Kendo().TreeView()
                .Name("OrganizationTree")
                .HtmlAttributes(new { @class = "demo-section" })
                .DataTextField("Name")
                .DragAndDrop(true)
                .ExpandAll(true)
                .Events(events => events
                        .Select("onOrgSelect")
                        .Drop("onOrgDrop")
                )
                .DataSource(dataSource => dataSource
                    .Model(m=> m 
                        .Id("ID")
                        .HasChildren("HasChildren")
                    )
                    .Read(read => read
                        .Action("Organizations_Read", "Organizations")
                    )
                )
        )

Here's the javascript function:

    function onOrgSelect(e)
    {
        var id = $("#" + e.node.id).?????;
        GetOrganization(id);
    }

Solution

  • Check the common operations topic here.

    function onSelect(e) { // this refers to the TreeView object var dataItem = this.dataItem(e.node);
    
    console.log("Selected node with id=" + dataItem.id);
    }
    
    $("#treeview").kendoTreeView({ dataSource: [ { id: 1, text: "Item 1", items: [ { id: 3, text: "Item 3" } ] }, { id: 2, text: "Item 2" } ], select: onSelect });