Display custom properties in treeview template

[Mark]

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));
        })
     )

[Mark]

Apologies - I left the .templateId attribute commented out in the view - the issue is when it is uncommented still.  Thanks,

[Daniel]

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

 

 

[Mark]

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

[Daniel]

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

 

 

[Mark]

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

Mark