Accessing TreeViewItemModel

8 posts, 0 answers
  1. Doug
    Doug avatar
    6 posts
    Member since:
    Jan 2013

    Posted 14 Dec 2017 Link to this post

    Hello, I am currently evaluating the Telerik control sets for use in a large project to start soon.  I have a requirement where we will be building a treeview in our ASP.NET MVC controller code using TreeViewItemModel list and passing to the view.  In the view razor code and/or javascript, is there a way to access the TreeViewItemModel as a user is selecting different nodes in the tree?  Specifically, when building the TreeViewItemModel, I populate the .Text and .Id properties and I need to access these values to post back to my controller code to handle the selection changes.  Is this possible? I need to quickly mock something up to demonstrate this.

    Controller code to build the treeview contents is here:

    public List<TreeViewItemModel> BuildTreeContents()
    {
    List<TreeViewItemModel> tree = new List<TreeViewItemModel>();
    IQueryable<SupplierModel> suppliers = GetSuppliers();
    IQueryable<ManagedOrgModel> managedOrgs = null;
    IQueryable<ManagedLocationModel> locations = null;
    TreeViewItemModel node = null;
    List<TreeViewItemModel> orgs = null;
    List<TreeViewItemModel> locs = null;
    foreach (SupplierModel supplier in suppliers)
    {
    node = new TreeViewItemModel();
    node.Text = supplier.SupplierName;
    node.Id = supplier.SupplierID;
    managedOrgs = GetManagedOrgs(supplier.ClientID, supplier.SupplierID);
    orgs = new List<TreeViewItemModel>();
    foreach (ManagedOrgModel managedOrg in managedOrgs)
    {
    TreeViewItemModel orgNode = new TreeViewItemModel();
    orgNode.Text = managedOrg.ManagedOrgName;
    orgNode.Id = managedOrg.ManagedOrgID;
    locations = GetLocations(managedOrg.ClientID, managedOrg.SupplierID, managedOrg.ManagedOrgID);
    locs = new List<TreeViewItemModel>();
    foreach (ManagedLocationModel location in locations)
    {
    TreeViewItemModel locationNode = new TreeViewItemModel();
    locationNode.Text = location.ManagedLocationName;
    locationNode.Id = location.ManagedLocationID;
    locs.Add(locationNode);
    }
    orgNode.Items = locs;
    orgNode.HasChildren = true;
    orgs.Add(orgNode);
    }
    node.Items = orgs;
    node.HasChildren = true;
    tree.Add(node);
    }
    return tree;

     

    Thanks,

    Doug Matulis

  2. Dimitar
    Admin
    Dimitar avatar
    459 posts

    Posted 18 Dec 2017 Link to this post

    Hello Doug,

    I am attaching an ASP.NET MVC solution, where a similar scenario to the one described is demosntrated (Retrieving the data item for the currently selected TreeView node).

    The desired behavior can be easily achieved as follows:

    1) Subscribe to the TreeView select event:
    @(Html.Kendo().TreeView()
    .Name("treeview")
    ...
    .Events(ev => ev.Select("onTreeViewselectNode"))
    )

    2) Retrieve the widget instance (e.sender) and use the TreeView's dataItem() method to retrieve the to retrieve the data item to which the clicked node is bound to:
    <script>
    function onTreeViewselectNode(e) {
    var dataItem = e.sender.dataItem(e.node);
     
    console.log(dataItem);
    }
    </script>

    Then, you should be able to send an ajax request to a controller action method an process the data on the server as per the project requirements.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Doug
    Doug avatar
    6 posts
    Member since:
    Jan 2013

    Posted 18 Dec 2017 in reply to Dimitar Link to this post

    Hello Dimitar,

    Thanks for getting back to me.  It's strange, I had the same code in my .cshtml file as your sample (see snippet below) and yet when I debug my code e.node is undefined and yours works.  I went through both projects and the only difference is I am building my tree contents in my controller code based on database contents and using TreeViewItemModel objects in a tree hierarchy and passing the model to the view via the viewbag.  Tree renders and works fine in the view at runtime, but as noted, e.node is undefined in the event handler.  See snippet:

    Controller Code:

    public ActionResult POSCreated()
    {
    ViewBag.Message = "POs Created test page";
    IEnumerable<TreeViewItemModel> tree = savvy.GetTreeContents();
    ViewBag.Tree = tree;
    return View();
    }

    ---------------------------------------------------------------------------

    .cshtml code:

    @{
    ViewBag.Title = "POSCreated";
    Layout = "~/Views/Shared/_Layout.cshtml";
    }

    <div class="container-fluid placeholders">
    <div class="row">
    <div class="col-xs-4 col-md-2 placeholder">
    <h2>POSCreated</h2>
    </div>
    </div>
    </div>
    <div class="container-fluid">
    <div class="row">
    <div class="col-md-3 k-content">
    @(Html.Kendo().TreeView()
    .Name("navTreeView")
    .BindTo((List<TreeViewItemModel>)ViewBag.Tree)
    .Events(handler => handler
    .Change("onTreeNodeSelected")
    )
    )
    </div>
    <div class="col-md-9">
    </div>
    </div>
    </div>
    <script>
    function onTreeNodeSelected(e) {
    var dataitem = e.sender.dataItem(e.node);
    debugger;
    }
    </script>

  4. Dimitar
    Admin
    Dimitar avatar
    459 posts

    Posted 19 Dec 2017 Link to this post

    Hello Doug,

    I am attaching a modified version of the previous project, where the TreeView binding is updated as per your example. With it, the change event works as expected. Please inspect the sample and try to integrate the same approach in your application.

    In case the issue continues to persist, please modify the above solution, so that the issue is reproduced and send it back to us for additional review. This way, I will be able to troubleshoot it locally and determine if the observed behavior is cause by environment or widget configuration and advise you further.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Doug
    Doug avatar
    6 posts
    Member since:
    Jan 2013

    Posted 19 Dec 2017 in reply to Dimitar Link to this post

    Hi Dimitar:

    I attached the project I have been working with where the e.node is undefined when a node is selected and handled in the javascript event handler.  See the POs Created cshtml file and relevant code in the Home controller.  All dependencies on our database have been removed.

    Thanks,

    Doug

  6. Doug
    Doug avatar
    6 posts
    Member since:
    Jan 2013

    Posted 19 Dec 2017 Link to this post

    Dimitar, Last attachment failed, trying again....  Failed once more.

    I take a look at your last attachment and see if I can get something to work.

    Thanks,

    Doug

     

  7. Doug
    Doug avatar
    6 posts
    Member since:
    Jan 2013

    Posted 19 Dec 2017 in reply to Doug Link to this post

    Hello Dimitar:

    Ok, I'm stupid or blind, maybe both.  I found the issue and I don't know how I kept missing it.  I was using the Change event instead of the Select event in the tree.  Sorry to have taken your time.

    Much Thanks,

    Doug

  8. Dimitar
    Admin
    Dimitar avatar
    459 posts

    Posted 20 Dec 2017 Link to this post

    Hello Doug,

    I am glad to hear that the issue that you were facing is now successfully resolved.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top