Accessing TreeViewItemModel

11 posts, 0 answers
  1. Doug
    Doug avatar
    7 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
    553 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
    7 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
    553 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
    7 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
    7 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
    7 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
    553 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.
  9. Jay
    Jay avatar
    3 posts
    Member since:
    Feb 2019

    Posted 14 Feb Link to this post

    Is that the only way to implement the TreeView control? All the free ones do the same thing: use a flat model with ID, ParentID, etc.

    But I have a nested group join (see below) that is already in hierarchical form. Why can't I just feed it to the control? Do I have to convert the joins to a flat model?

    Thanks,

    Jay

       var listGAA2 = (from GE in db.GENRE
          join AL in db.ALBUM on GE.GENRE_ID equals AL.GENRE_ID into albumgenre
          orderby GE.NAME
          select new
          {
           GenreID = GE.GENRE_ID,
           GenreName = GE.NAME,
           albums = from AL in albumgenre
                join AR in db.ARTIST on AL.ARTIST_ID equals AR.ARTIST_ID into albumartist
             orderby AL.NAME
             select new
             {
              AlbumID = AL.ALBUM_ID,
              AlbumName = AL.NAME,
              artist = from AR in albumartist
                select new
                {
                 ArtistID = AR.ARTIST_ID,
                 ArtistName = AR.NAME
                }
             }
           }).ToList();

  10. Dimitar
    Admin
    Dimitar avatar
    553 posts

    Posted 2 days and 20 hours ago Link to this post

    Hello Jay,

    There is an existing demo, where a similar scenario to the one described is demonstrated (Binding TreeView widget to different parent nodes with an unknown number of records):


    Form the above example, you will notice that the widget is bound to Categories > Products > OrderDetails. When a node is expanded, an ajax request is being issued to the server to retrieve the corresponding parent-child items, which are then displayed in the TreeView. From the above example, you could review the widget configuration and also inspect the service implementation in this GitHub repository.

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Jay
    Jay avatar
    3 posts
    Member since:
    Feb 2019

    Posted 1 day and 1 hour ago in reply to Dimitar Link to this post

    Thank you, Dimitar, for your response. I do appreciate your time.

    Unfortunately, I am not a JavaScript developer and I have no clue how to download the project you linked to from Git (there is no "download" button that I saw).

    I'm just a WINS tech stack backend developer. But it appears that I have to be a javascript developer to use your product.

    I'm only in a trial period and will ask Support for assistance with this particular bit of rocket science.

     

Back to Top