Hi,
I've just started using Telerik UI for .NET Core.
I'm just trying to build a simple tree and add images to each node. For some reason it's not displaying the images.
Any help would be greatly appreciated.
I'm hardcoding the names of the nodes and the images, so all the action is in the .cshtml file.
Here's my code. If you just look at the first node I'm trying to add(Inbox), you'll see all of the ways I tried to add an image to the node.
I have all but one way commented out. The rest of the code is just trying to the same things for additional nodes.
@page
@model Bakery.Pages.ConversionManagerModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ConversionManager</title>
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-nova.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.nova.min.css" />
<script src="~/lib/jquery/dist/jquery.js"></script>
@* Place Kendo UI scripts after jQuery *@
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script
</head>
<body>
<div>
@(Html.Kendo().TreeView()
.Name("treeview-images")
.Items(treeview =>
{
treeview.Add().Text("Inbox")
//.ImageUrl(Url.Content("~/Shared/Images/db78.png"))
//.ImageUrl(Url.Content("./Shared/Images/db78.png"))
//.ImageUrl(Url.Content("C:/tmp/db78.png"))
//.ImageUrl(Url.Content("C:/tmp/db78.png"))
.ImageUrl("~/Shared/Images/db78.png")
.Expanded(true)
.Items(inbox =>
{
inbox.Add().Text("Read Mail")
.ImageUrl(@"c:\tmp\db78.png");
});
treeview.Add().Text("Drafts")
.ImageUrl(Url.Content(@"c:\tmp\db78.png"));
treeview.Add().Text("Search Folders")
.ImageUrl(Url.Content(@"c:\tmp\db78.png"))
.Expanded(true)
.Items(inbox =>
{
inbox.Add().Text("Categorized Mail")
//.ImageUrl(Url.Content(@"c:\tmp\db78.png"));
.ImageUrl(Url.Content(@"C:\tmp\db78.png"));
inbox.Add().Text("Large Mail")
.ImageUrl(Url.Content(@"c:\tmp\db78.png"));
inbox.Add().Text("Unread Mail")
.ImageUrl(Url.Content(@"c:\tmp\db78.png"));
});
treeview.Add().Text("Settings")
.ImageUrl(Url.Content(@"c:\tmp\db78.png"));
})
)
</div>
</body>
</html>
Thanks.
2 Answers, 1 is accepted
Can you confirm the paths to the images are correct and that they are in actually present in the wwwroot folder? Also, paths like @"c:\somePath" can't work in a web app, you need to provide paths that can resolve on the client, from the browser, and then ensure those paths match the assets you have on the web server. You can see the network requests the browser makes for those images in the browser dev toolbar to get a better understanding of what is happening.
I am also attaching here an archive that works for me so you can use it as a reference.
Regards,
Marin Bratanov
Progress Telerik
Rank 1
Thank you very much Marin! I got it working.
I had my images folder in Pages\Shared\images instead of wwwroot\Shared\images. I'm using Razor Pages and I thought
relative paths were relative to the Pages folder, not wwwroot.
Thanks,
John