How to add multi line node in kendo tree view

1.1k views Asked by At

I am creating a kendo tree view. Is it possible to have multiline nodes in kendo tree view. I am using kendo controls in my .net MVC application.

I am using below template to create tree view.

@(Html.Kendo().TreeView()
     .Name("treeview-left")   
     .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.inlineDefault)
     .Events(events => events
     .Select("onSelect"))
)
1

There are 1 answers

5
ASG On BEST ANSWER

Have a look at http://demos.telerik.com/aspnet-mvc/treeview/templates

You should be able to do it like this

@(Html.Kendo().TreeView()
.Name("treeview")
.TemplateId("treeview-template")
.DataSource(source =>
{
    source.Read(read => read.Action("GetSomeData", "MyController"));
})    
)

Then add the template onto your cshtml

<script id="treeview-template" type="text/kendo-ui-template">
 <p>
    #: item.Text #<br/>
    #: item.OtherText #<br/>
    #: item.SomeMoreText #
 </p>
</script>

Next create a model

    public class CustomTreeViewItemModel : TreeViewItemModel
    {
       public string OtherText { get; set; }
       public string SomeMoreText { get; set; }
    }

Then add your controller action

  public ActionResult GetSomeData()
    {
        return Json(GetData(), JsonRequestBehavior.AllowGet);
    }
 /*I added this to get some data*/
 private List<CustomTreeViewItemModel> GetData()
    {
        return new List<CustomTreeViewItemModel>
        {
            new CustomTreeViewItemModel
            {
                Id="1",
                Text="Text",
                OtherText="OtherText",
                SomeMoreText="SomeMoreText"
            }
        };
    }