Hello Everyone,
I am trying to build a kendo tree view with remote data getting from the controller. I want to display a Image (attachment) at a certain node . How do I do that.?
Following is my data from the controller.
In the attached files, I have uploaded, I want to show the image at the arrow highlighted
Also. k-icon k-i-collapse is not showing at "Project Metrics" node even when the node is expanded.
var result = new List<HierarchicalViewModel>()
{
new HierarchicalViewModel() { ID = 1, ParendID = null, HasChildren = true, Name = "Program Structure" },
new HierarchicalViewModel() { ID = 3, ParendID = null, HasChildren = true, Name = "Project Metrics" },
new HierarchicalViewModel() { ID = 2, ParendID = 1, HasChildren = true, Name = "Program Structure" },
new HierarchicalViewModel() { ID = 4, ParendID = 3, HasChildren = true, Name = "Project Metrics" },
new HierarchicalViewModel() { ID = 5, ParendID = 2, HasChildren = false, Name = "State" },
new HierarchicalViewModel() { ID = 6, ParendID = 2, HasChildren = false, Name = "Executive Summary" },
new HierarchicalViewModel() { ID = 7, ParendID = 2, HasChildren = false, Name = "Reporting period for RHGCP funding" },
new HierarchicalViewModel() { ID = 8, ParendID = 2, HasChildren = false, Name = "Describe how funds are distributed and administrated in the State" },
new HierarchicalViewModel() { ID = 9, ParendID = 2, HasChildren = false, Name = "Describe the method(s) used for project selection" },
new HierarchicalViewModel() { ID = 10, ParendID = 2, HasChildren = false, Name = "Describe the method(s) used to measure effectivenss of the projects and programs" },
new HierarchicalViewModel() { ID = 11, ParendID = 2, HasChildren = false, Name = "Describe any noteworthy efforts the State has used to effectively deliver a successful program" },
new HierarchicalViewModel() { ID = 12, ParendID = 2, HasChildren = false, Name = "Describe the status of data acquistion and analysis efforts" },
new HierarchicalViewModel() { ID = 13, ParendID = 2, HasChildren = false, Name = "Add number of crossings" },
new HierarchicalViewModel() { ID = 14, ParendID = 2, HasChildren = false, Name = "Provide program emphasis areas" },
new HierarchicalViewModel() { ID = 15, ParendID = 2, HasChildren = false, Name = "Describe Section 130 program effectiveness" },
new HierarchicalViewModel() { ID = 16, ParendID = 2, HasChildren = false, Name = "Input performance measures" },
new HierarchicalViewModel() { ID = 17, ParendID = 3, HasChildren = false, Name = "Project Listing" },
new HierarchicalViewModel() { ID = 18, ParendID = 3, HasChildren = false, Name = "Crash Data Statistics" }
};
return result;
//Kendo Tree View
@(Html.Kendo().TreeView()
.Name("treeview")
.DataTextField("Name")
.Checkboxes(true)
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Read_TreeViewData", "Questions")
)
)
.Events(ev => ev.Select("onTreeViewselectNode")
.Check("onCheck")
)
)
<script>
function onTreeViewselectNode(e) {
var dataItem = e.sender.dataItem(e.node);
console.log(dataItem);
}
function onCheck(e) {
console.log("Checkbox changed :: " + this.text(e.node));
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
}
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
</script>