Display custom properties in treeview template

6 posts, 0 answers
  1. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 14 Jul 2015 Link to this post

    Hi,

    I can't figure out how to add my own properties to a treeview template.  I am using a model 'NodeViewModel' which gets populated in my controller from a back end data source, and I want some of the properties to be used in the template HTML.  However, the template only allows setting of basic properties (such as text, Id and expanded) because they use the TreeViewItem class which my model maps to (I'm not sure if there's another way of doing it, that's just from the examples I've worked with).  Below I have pasted by view and my model - any help is appreciated.  I am trying to get the property RiskColour to bleed through into the template displayed.

    Any help would be massively appreciated.

    Thanks, Mark

     

    MY MODEL :-

    public class NodeViewModel
        {
            public NodeViewModel()
            {
                this.Expanded = true;
                this.Children = new List<NodeViewModel>();
            }

            public int Id { get; set; }
            public string Title { get; set; }
            public bool Expanded { get; set; }
            public int SortOrder { get; set; }
            public string RiskColour { get; set; }   ====== THIS IS MY PROPERTY I AM HAVING ISSUES WITH

            public bool HasChildren
            {
                get { return Children.Any(); }
            }

            public IList<NodeViewModel> Children { get; private set; }
        }

     

    MY VIEW :-

    <script id="TreeViewTemplate" type="text/kendo-ui-template">
            <div style="text-align:left;">
                #: item.text # ASDAFF
            </div>
        </script>
        <script>
        function onSelect(e) {
            alert($(e.node).data("id"));
        }
        </script>
        @( Html.Kendo().TreeView()
            .Name("TreeViewTemplateBiding")
            // .Template("#: item.text #")
           // .TemplateId("TreeViewTemplate")
            .HtmlAttributes(new { @class = "alignleft" })
            .Events(events => events
                .Select("onSelect")
            )
            .BindTo((IEnumerable<TEAMSPortalV2.Models.NodeViewModel>)ViewBag.Tree, (NavigationBindingFactory<TreeViewItem> mappings) =>
            {
                mappings.For<TEAMSPortalV2.Models.NodeViewModel>(binding => binding.ItemDataBound((item, node) =>
                {
                    item.Id = node.Id.ToString();
                    item.Text = node.Title;
                    item.Expanded = node.Expanded;
                    item.RiskColour = node.RiskColour;    ====== THIS IS MY PROPERTY I AM HAVING ISSUES WITH - item.RiskColour generates an error :(
                })
                .Children(node => node.Children));
            })
         )

  2. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 14 Jul 2015 in reply to Mark Link to this post

    Apologies - I left the .templateId attribute commented out in the view - the issue is when it is uncommented still.  Thanks,
  3. Kendo UI is VS 2017 Ready
  4. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 16 Jul 2015 Link to this post

    Hello Mark,

    I am afraid that this is not supported when binding the data on the server. You should bind the data via Ajax in order to include custom fields in the items.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 17 Jul 2015 in reply to Daniel Link to this post

    Thanks Daniel,

    Initially today I tried a workaround - pushing the extra fields across in the text and ImageURL properties with the intention of using the loaded or databound event of the tree view to run some jQuery to extract the values and tidy up accordingly.  However, I can't find how to bind to such an event (the DataBound event only fires on client binding it seems and can't find any other appropriate events) - is this possible / advisable?

    I then looked at the AJAX binding instead example - I tried that before but to no avail (Not to say it won;t work that is - probably just me!). In the example in the link you sent, each level of the tree structure is an employee, and as such accepts EmployeeID.  In my requirement, each node level represents different entities (basically building, floor, room, item for simplicity) - so how do I go about using the AJAX method for that?  Each level would need to call a different controller action passing a different array of parameters.  How is this achieved, and do you have any sample code that could assist me?

    Thanks, Mark

  6. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 21 Jul 2015 Link to this post

    Hello again Mark,

    You can specify different actions for the different levels by setting a separate dataSource model children option for each level as in this demo. I attached a sample project that demonstrates how can this be achieved with MVC.

    Also, there is another option that I can suggest when binding the data on the server. Instead of using a template you could set whatever content is needed to the nodes Text. You can use the Encoded property to prevent the encoding if the content should contain HTML:
    item.Text = string.Format("<div style='text-align:left;color:{0};'>{1}</div>", node.RiskColour, node.Title);
    item.Encoded = false;


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 13 Aug 2015 in reply to Daniel Link to this post

    Hi Daniel - this is working now, apologies for delay in replying.  Thank you.

    Mark

Back to Top
Kendo UI is VS 2017 Ready