Images
The TreeView items support images and sprite icons.
Images
To enhance the appearance of the TreeView items, add the ImageUrl() option with the image URL as a parameter to the respective item. The example below shows how to display each TreeView item with an image and text.
@(Html.Kendo().TreeView()
.Name("treeview")
.Items(treeview =>
{
treeview.Add().Text("Inbox")
.ImageUrl(Url.Content("~/Content/TreeView_images/mail.png"))
.Expanded(true)
.Items(inbox =>
{
inbox.Add().Text("Read Mail")
.ImageUrl(Url.Content("~/Content/TreeView_images/readmail.png"));
});
treeview.Add().Text("Search Folders")
.ImageUrl(Url.Content("~/Content/TreeView_images/search.png"));
treeview.Add().Text("Settings")
.ImageUrl(Url.Content("~/Content/TreeView_images/settings.png"));
})
)
When the TreeView is configured for remote data binding, you can define a field that holds the image URL for the data item and use the DataImageUrlField() option to specify the name of that field.
The following example shows how to display images in the TreeView items when the component retrieves the data from a remote endpoint.
@(Html.Kendo().TreeView()
.Name("treeview")
.DataTextField("Name")
.DataImageUrlField("ItemImage")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("ReadItems", "TreeView")
)
)
)
public List<HierarchicalViewModel> GetHierarchicalData()
{
var data = new List<HierarchicalViewModel>()
{
new HierarchicalViewModel() { ID = 1, ParendID = null, HasChildren = true, Name = "Parent item", ItemImage = "/TreeView_images/rootImage.png" },
new HierarchicalViewModel() { ID = 2, ParendID = 1, HasChildren = true, Name = "Item 1", ItemImage = "/TreeView_images/item1.png" },
new HierarchicalViewModel() { ID = 3, ParendID = 1, HasChildren = false, Name = "Item 2", ItemImage = "/TreeView_images/item2.png" },
new HierarchicalViewModel() { ID = 4, ParendID = 2, HasChildren = false, Name = "Item 1.1", ItemImage = "/TreeView_images/item1_1.png" },
new HierarchicalViewModel() { ID = 5, ParendID = 2, HasChildren = false, Name = "Item 1.2", ItemImage = "/TreeView_images/item_2.png" }
};
return data;
}
public JsonResult ReadItems(int? id)
{
var result = GetHierarchicalData()
.Where(x => id.HasValue ? x.ParendID == id : x.ParendID == null)
.Select(item => new {
id = item.ID,
Name = item.Name,
hasChildren = item.HasChildren,
ItemImage = item.ItemImage
});
return Json(result, JsonRequestBehavior.AllowGet);
}
Sprites
Sprites are a collection of image files combined into a single file that is loaded on the page with the background-image CSS property.
To include sprites in the TreeView items, specify the respective sprite CSS class for each item by using the SpriteCssClasses() method. As a result, the sprite images will be loaded on the page through a single HTTP request.
@(Html.Kendo().TreeView()
.Name("treeviewSprites")
.Items(treeview =>
{
treeview.Add().Text("My Documents")
.SpriteCssClasses("rootfolder")
.Expanded(true)
.Items(inbox =>
{
inbox.Add().Text("Kendo UI Project").SpriteCssClasses("folder");
});
treeview.Add().Text("PDF Reports").SpriteCssClasses("pdf");
treeview.Add().Text("New Web Site").SpriteCssClasses("image");
})
)
<style>
#treeviewSprites .k-sprite { /* "treeviewSprites" matches the "Name" of the TreeView component. */
background-image: url("@Url.Content("~/Content/TreeView_sprites/coloricons-sprite.png")");
}
.rootfolder { background-position: 0 0; }
.folder { background-position: 0 -16px; }
.pdf { background-position: 0 -32px; }
.image { background-position: 0 -64px; }
</style>
When the TreeView is configured for remote data binding, you can define a field that holds the sprite CSS class for the data item and use the DataSpriteCssClassField() option to specify the name of that CSS class.
The following example shows how to render sprites for the TreeView items when the component retrieves the data from a remote endpoint.
@(Html.Kendo().TreeView()
.Name("treeview")
.DataTextField("Name")
.DataSpriteCssClassField("SpriteClass")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("ReadItems", "TreeView")
)
)
)
public List<HierarchicalViewModel> GetHierarchicalData()
{
var data = new List<HierarchicalViewModel>()
{
new HierarchicalViewModel() { ID = 1, ParendID = null, HasChildren = true, Name = "Parent item", SpriteClass = "rootfolder" },
new HierarchicalViewModel() { ID = 2, ParendID = 1, HasChildren = true, Name = "Item 1", SpriteClass = "folder" },
new HierarchicalViewModel() { ID = 3, ParendID = 1, HasChildren = false, Name = "Item 2", SpriteClass = "pdf" },
new HierarchicalViewModel() { ID = 4, ParendID = 2, HasChildren = false, Name = "Item 1.1", SpriteClass = "html" },
new HierarchicalViewModel() { ID = 5, ParendID = 2, HasChildren = false, Name = "Item 1.2", SpriteClass = "image" }
};
return data;
}
public JsonResult ReadItems(int? id)
{
var result = GetHierarchicalData()
.Where(x => id.HasValue ? x.ParendID == id : x.ParendID == null)
.Select(item => new {
id = item.ID,
Name = item.Name,
hasChildren = item.HasChildren,
SpriteClass = item.SpriteClass
});
return Json(result, JsonRequestBehavior.AllowGet);
}
<style>
#treeviewSprites .k-sprite { /* "treeviewSprites" matches the "Name" of the TreeView component. */
background-image: url("@Url.Content("~/Content/TreeView_sprites/coloricons-sprite.png")");
}
.rootfolder { background-position: 0 0; }
.folder { background-position: 0 -16px; }
.pdf { background-position: 0 -32px; }
.html { background-position: 0 -48px; }
.image { background-position: 0 -64px; }
</style>