Search code examples
asp.net-mvckendo-uikendo-asp.net-mvckendo-treeview

How to add multi line node in kendo tree view


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"))
)

Solution

  • 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"
                }
            };
        }