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

Treeview Node Id passing to Controller action

5 Answers 695 Views

TreeView

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

Bill asked on 11 Jul 2013, 06:52 PM

Hi,

I'm trying to redirect to a controller action and pass the ID of the selected tree node into the controller action.

Ideally, I would like to use some code like this:

<div class="kendo-tree">

@(Html.Kendo().TreeView()

.Name("treeview")

.DataTextField("Name")

.TemplateId("treeview-template")

.DataSource(dataSource => dataSource

.Read(read => read.Action("DashboardTree", "Home"))

)

.Events(e => e.Select("onSelect"))

)

</div>

And here's what the onSelect would do:

function onSelect(e) {

var data = $('#treeview').data('kendoTreeView').dataItem(e.node);

//alert("node clicked" + data.id);

window.location = @Url.Action("Edit", "Employee", new { id = data.id });

}

I'm not sure if window.location is the way to do this and would welcome better suggestions. I don't have a form to submit, I just want to go to another page when the user clicks a tree node. Surely I'm missing something here...

Thanks,
bh

5 Answers, 1 is accepted

answered on 24 Mar 2014, 07:53 PM

Hi Nathan,

It's been a while and I ended up bailing on the TreeView. I used a ListView with templates. The templates are used to build the URL. Here's some code:

Template code:
<script type="text/x-kendo-tmpl" id="template">
<div class="DashboardEmployee">
<div><img src="#: ThumbnailURL #" alt="#:LastName# image" /></div>
<div class="DivText"><a href="@Url.Action("Edit", "Employee")/#:Id#">#:LastNameFirst#</a> <br />#:DepartmentName #</div>
</div>
</script>

Here's the ListView:
<div style="width: 200px; overflow:hidden;">
@(Html.Kendo().ListView<Shiner.ViewModels.EmployeeIndexVM>()
.Name("employeeList")
.TagName("div")
.ClientTemplateId("template")
.Events(events => events
.Change("listviewClicked")
)
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("Employees_Json", "Home"));
dataSource.PageSize(7);

})
.Pageable(p => p.Numeric(false))
.Selectable()
)
</div>

Here's the controller code:
public ActionResult Employees_Json([DataSourceRequest] DataSourceRequest request)
{
var emps = GetEmployees();
var jsonResult = Json(emps.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
return jsonResult;
}

This works pretty well. You could probably use the same technique with the TreeView though I have not tried it. Hope this helps!

Bill