Node Images

Use the imageMemberPath property to add images to nodes by specifying the name of a property on the data items that contains an image URL.

For example, some our sample items array have an "Image" property set to image URLs:

Electronics
Trimmers/Shavers
Tablets
Phones
Apple
Motorola
Nokia
Samsung
Speakers
Monitors
Shopkins
Train Sets
Science Kit
Play-Doh
Crayola
Coffeee Maker
Breadmaker
Solar Panel
Work Table
Propane Grill
1
2
3
4
5
6
7
// This file locates: "Scripts/Lesson/C1Nav/Images.js".
c1.documentReady(function () {
    var theTree = wijmo.Control.getControl('#theTree');
    theTree.displayMemberPath = "Header";
    theTree.childItemsPath = "Items";
    theTree.imageMemberPath = "Image";
});
1
2
3
4
5
6
7
8
9
10
11
// This file locates: "Content/css/Lesson/C1Nav/Images.css".
/* default trees on this sample */
.demo-control .wj-treeview {
    display:block;
    height: 350px;
    font-size: 120%;
    margin-bottom: 8px;
    padding: 6px;
    background: #f0f0f0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Images
        public ActionResult Images()
        {
            return View(Models.TreeViewData.GetData(Url));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@model IEnumerable<TreeViewData>
 
<h1>
    @Html.Raw(Resources.C1Nav.Images_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Nav.Images_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Images_Text2)
</p>
 
@Html.C1().TreeView().Id("theTree").Bind(Model)