Treeview Node Id passing to Controller action

6 posts, 0 answers
  1. Bill
    Bill avatar
    13 posts
    Member since:
    Jun 2013

    Posted 11 Jul 2013 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Nathan
    Nathan avatar
    23 posts
    Member since:
    Jul 2012

    Posted 24 Mar 2014 in reply to Bill Link to this post

    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.
  5. Bill
    Bill avatar
    13 posts
    Member since:
    Jun 2013

    Posted 24 Mar 2014 in reply to Nathan Link to this post

    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

  6. Nathan
    Nathan avatar
    23 posts
    Member since:
    Jul 2012

    Posted 25 Mar 2014 in reply to Bill Link to this post

    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.
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 Mar 2014 Link to this post

    Hello,

    The following forum thread discusses the same topic in detail:

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

    Regards,
    Dimo
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready