I have a treeview that has text in 3 levels and on the third level/depth I want to show 4 clickable icons infront of said text, which link to a controler action that fetches an image with a certain id. that is all 4 icons/images have links with different id's
What is the simplest way to do this ?
Regards,
Emil
12 Answers, 1 is accepted
This is a simple sample in the dojo: http://dojo.telerik.com/@ruzhenov/OCOMO
It uses jQuery in order to add 4 anchor elements before the text on the third level.
On the prepneded element, you could choose what HTML to construct, that will best fit your scenario. This is just en example of a four elements with different ids and different icons.
Regards,
Bozhidar
Telerik by Progress
Rank 1
This is a very good answer, but.
Im using a MVC view, with a bound model to display the treeview, so I would rather do this serverside if possible.
I basicly have this code for each level of my tree, and then each node has a items list which are its children.
Kendo.Mvc.UI.TreeViewItemModel itm = new Kendo.Mvc.UI.TreeViewItemModel();
teljari = teljari + 1;
itm.Id = teljari.ToString();
itm.Text = innerItem.gotuheiti;
find = itm.Id;
itm.Items = new List<Kendo.Mvc.UI.TreeViewItemModel>();
is there a way to add those icons at this stage, I could probably make some html to add in there, just not sure how/where to add it.
Regards,
Emil
Here you could find what is supported on the server side by the control: http://docs.telerik.com/kendo-ui/api/aspnet-mvc/Kendo.Mvc.UI.Fluent/TreeViewItemBuilder
I have tried to use something like:
@(Html.Kendo().TreeView() .Name("treeview") //The name of the treeview is mandatory. It specifies the "id" attribute of the widget. .Items(items => { items.Add().Text("Item 1").Content("<a href='#' id='id1'></a><a href='#' id='id2'></a><a href='#' id='id3'></a><a href='#' id='id4'></a>"); //Add item with text "Item1") items.Add().Text("Item 2"); //Add item with text "Item2") }))But it does not work as expected. So I would suggest to make on the client.
Regards,
Bozhidar
Telerik by Progress
Rank 1
ok, if I do this in the client then I have to stop binding to the model and somehow populate the treeView in the client.
Any suggestions ? I tried setting
dataSource:
Read(read => read.Action("Read", "Home"))
but that doesnt work clientside.
Regards,
Emil
Rank 1
if I do
<div class="demo-section k-content">
@(Html.Kendo().TreeView()
.Name("treeview")
.BindTo((IEnumerable<Kendo.Mvc.UI.TreeViewItemModel>)Model)
then I get the databinding server side
then I do what you suggested with
<script>
$(document).ready(function(){
$('#treeview ul ul ul .k-in').prepend('<a href="#" id="icon4" class="click-icon"></a>');
$('#treeview ul ul ul .k-in').prepend('<a href="#" id="icon3" class="click-icon"></a>');
$('#treeview ul ul ul .k-in').prepend('<a href="#" id="icon2" class="click-icon"></a>');
$('#treeview ul ul ul .k-in').prepend('<a href="#" id="icon1" class="click-icon"></a>');
});
</script>
then I get the icons correctly, but I need to get id's from the current item in the model, the view is bound to. that is the current item in the model has 4 id's one for each image I want to download on image click. I have a controller action that takes said Id and returns the image.
this is the model binding in the view
@model List<Kendo.Mvc.UI.TreeViewItemModel>
so thats where Im kinda stuck right now.
Regards,
Emil
You can check following resource: http://docs.telerik.com/kendo-ui/api/aspnet-mvc/Kendo.Mvc.UI.Fluent/TreeViewBuilder#methods-Template(System.String)
I created a simple sample using the following code:
@(Html.Kendo().TreeView() .Name("treeview") //The name of the treeview is mandatory. It specifies the "id" attribute of the widget. .Template("<span>#= item.Icon1 #</span>") .DataSource(dataSource => dataSource .Model(model => model // The property that uniquely identieis a node. // The value of this property is the argument of the action method .Id("ID") // the boolean property that tells whether a node has children ) .Read(read => read // The action method which will return JSON .Action("Employees_Read", "Home") ) ))and:
using Kendo.Mvc.Extensions;using Kendo.Mvc.UI;using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc; namespace MVC.Controllers{ public class HomeController : Controller { public ActionResult Index() { ViewBag.Message = "Welcome to ASP.NET MVC!"; return View(); } public JsonResult Employees_Read() { var list = new List<Item>() { new Item() { ID = 1, Content = "dasdas", Icon1 = "Icon1" }, new Item() { ID = 2, Content = "asdasd", Icon1 = "Icon12" } }; return Json(list, JsonRequestBehavior.AllowGet); } } public class Item { public int ID { get; set; } public string Content { get; set; } public string Icon1 { get; set; } }Can you try to use a similar approach and if it does not work, please send us a runnable example with your code, so we will be able to test it on our side.
Regards,
Bozhidar
Telerik by Progress
Rank 1
this sounds and feels like the right path for this.
For it to work though I have to get more elaborate examples of templates since each row in my database table basicly consists of level1 text, level2 text, level 3 4 id's that are to be used with a controller action with id to fetch a download file(image) and level 3 text.
is that suitable for a template ? only level 3 items cointain icons everything else is just text, those icons having href on them.
Regards,
Emil
You can check the following resources about templates: http://docs.telerik.com/kendo-ui/framework/templates/overview
The templates could be really complicated, so I think it should be possible to achieve your scenario.
Regards,
Bozhidar
Telerik by Progress
Rank 1
do you have an example of how to create lets say a 3 level treeView with templates ?
how would you go about doing each level ?
these are basicly the texts to display for each level
@Model.streetname
@Mode.type
@Model.description
are the levels just <ul></ul> ? or how does it work ?
Regards,
Emil
We do not have an example about your case exactly, but you can check the following demo: http://demos.telerik.com/aspnet-mvc/treeview/templates and http://demos.telerik.com/aspnet-mvc/treeview/index
Regards,
Bozhidar
Telerik by Progress
Rank 1
Yes these examples arent really helping. Do I use a template to do all the levels of the grid ? or do I bind to the model and just set the 4 images I need to set with a template ?
if I use the template to do the whole thing how do I create html that conforms with the treeview control itself ?
I can do either seperately, that is, bind to a model or insert images with links behind them, but I need those images to have id's from the model that is where it becomes complicated.
Regards,
Emil
Here is a similar example, which gets data for the image form the server. Also the tree view is nested:
<script id="treeview-template" type="text/kendo-ui-template"> #: item.text # # if (item.iconUrl) { # <img src="#=item.iconUrl#" id="#=item.id#" /> # } #</script><div class="demo-section k-content"> @(Html.Kendo().TreeView() .Name("treeview") .TemplateId("treeview-template") .DataSource(source => { source.Read(read => read.Action("Read_TemplateData", "Home")); }) )</div>using Kendo.Mvc.Extensions;using Kendo.Mvc.UI;using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc; namespace MVC.Controllers{ public class HomeController : Controller { public ActionResult Index() { ViewBag.Message = "Welcome to ASP.NET MVC!"; return View(); } public ActionResult Read_TemplateData(string id) { IEnumerable<TreeViewItemViewModel> result; if (string.IsNullOrEmpty(id)) { result = TreeViewRepository.GetProjectData().Select(o => o.Clone()); } else { result = TreeViewRepository.GetChildren(id); } return Json(result, JsonRequestBehavior.AllowGet); } } public class Item { public int ID { get; set; } public string Content { get; set; } public string Icon1 { get; set; } } public class TreeViewItemViewModel { public string id { get; set; } public string text { get; set; } public string spriteCssClass { get; set; } public string iconUrl { get; set; } public bool expanded { get; set; } public bool hasChildren { get; set; } public IEnumerable<TreeViewItemViewModel> items { get; set; } public TreeViewItemViewModel Clone() { TreeViewItemViewModel clone = new TreeViewItemViewModel { id = this.id, iconUrl = this.iconUrl, spriteCssClass = this.spriteCssClass, text = this.text, expanded = this.expanded, hasChildren = this.hasChildren }; return clone; } } public static class TreeViewRepository { private static List<TreeViewItemViewModel> projectData; static TreeViewRepository() { projectData = new List<TreeViewItemViewModel>(); projectData.Add(new TreeViewItemViewModel { id = "1", text = "My Documents", iconUrl = "../Images/bullet.png",//D:\work\MVC-Test\MVC\MVC\ expanded = true, hasChildren = true, spriteCssClass = "rootfolder", items = new List<TreeViewItemViewModel> { new TreeViewItemViewModel { id = "2", text = "Kendo UI Project", expanded = true, spriteCssClass = "folder", hasChildren = true, items = new List<TreeViewItemViewModel> { new TreeViewItemViewModel { id = "3", text ="about.html", spriteCssClass = "html" }, new TreeViewItemViewModel { id = "4", text ="index.html", spriteCssClass = "html" }, new TreeViewItemViewModel { id = "5", text ="logo.png", spriteCssClass = "image" } } }, new TreeViewItemViewModel { id = "6", text = "New Web Site", expanded = true, spriteCssClass = "folder", hasChildren = true, items = new List<TreeViewItemViewModel> { new TreeViewItemViewModel { id = "7", text ="mockup.jpg", spriteCssClass = "image" }, new TreeViewItemViewModel { id = "8", text ="Research.pdf", spriteCssClass = "pdf" } } }, new TreeViewItemViewModel { id = "9", text = "Reports", expanded = true, spriteCssClass = "folder", hasChildren = true, items = new List<TreeViewItemViewModel> { new TreeViewItemViewModel { id = "10", text ="February.pdf", spriteCssClass = "pdf" }, new TreeViewItemViewModel { id = "11", text ="March.pdf", spriteCssClass = "pdf" }, new TreeViewItemViewModel { id = "12", text ="April.pdf", spriteCssClass = "pdf" } } } } }); } public static List<TreeViewItemViewModel> GetProjectData() { return projectData; } public static IEnumerable<TreeViewItemViewModel> GetChildren(string id) { Queue<TreeViewItemViewModel> items = new Queue<TreeViewItemViewModel>(projectData); while (items.Count > 0) { var current = items.Dequeue(); if (current.id == id) { return current.items.Select(o => new TreeViewItemViewModel { id = o.id, text = o.text, expanded = o.expanded, hasChildren = o.hasChildren, iconUrl = o.iconUrl, spriteCssClass = o.spriteCssClass }); } if (current.hasChildren) { foreach (var item in current.items) { items.Enqueue(item); } } } return new List<TreeViewItemViewModel>(); } } }I hope this is the case that you want to cover. If it is not, try to rework the example in a way to shows us what you want to achieve.
Regards,
Bozhidar
Telerik by Progress