Treeview Node Id passing to Controller action

[Bill]

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

[Dimo]

Hello Bill,

You are mixing server-side URL helpers with client-side event arguments, which is impossible. data.id is a client-side object and is undefined server-side at the time Url.Action is created. Please use a plain string URL instead of Url.Action().

Regards,
Dimo
Telerik

[Nathan]

I have a similar situation.  How did you resolve it.  I have asked questions but they are good for just giving fragments of code and not anything that his helpful.  When I select on a node, I want it to to navigate/call an action in my controller and be able to pass that node id to the controller.  I'm using razor syntax as well.

[Bill]

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

[Nathan]

Hey Bill, thanks for replying (so quickly I may add).

I'm about to dump the treeview as well because of the vague documentation.  I'm stuck with trying to create action links for the nodes.  Basically when you click a node, an action on the controller is called.  I see where they do it for a grid but of course, and maybe I just can't find it but I get frustrated with their docs and how they expect everyone to do everything in jquery (not razor).  Instead of a treeview I was going to use bootsrap buttons/links.  Not sure what to do...giving me a headache.

[Dimo]

Hello,

The following forum thread discusses the same topic in detail:

http://www.telerik.com/forums/treeview-20cb0e6f0667

Regards,
Dimo
Telerik