I want to stylize kendo treeview items based on a value in the view model.

My controller:

   public ActionResult Index()
    {
        var feeders = FeedersService.GetAll();
        var result = from res in feeders select toFeedersViewModel(res);
        ViewBag.items = getItems(result, null);
        return View();
    }

    public IEnumerable<TreeViewItemModel> getItems(IEnumerable<FeedersViewModel> feeders, string parent)
    {
        var list = new List<TreeViewItemModel>();
        foreach (var item in feeders.Where(t => t.Parent == parent))
        {
            list.Add(new TreeViewItemModel()
            {
                Text = item.RootName,
                Items = getItems(feeders, item.RootName).ToList(),
                ImageUrl = item.Parent == null ? "~/Content/web/treeview/folder.png" : "~/Content/web/treeview/file.png",
                Expanded = true,
                HtmlAttributes = item.Status == 0 ? new Dictionary<string, string>() { { "'class'", "'white'" } } : new Dictionary<string, string> { { "class", "red" } }

            });
        }            
        return list;
    }

My View Looks:

@(
    Html.Kendo().TreeView()
        .Name("treeview")
        .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.items)
 )

<style scoped>
.red
{
    color:red;
}

.white
{
    color:white;
}
</style>

The treeview is working as expected but the htmlattributes dictionary passed from the controller is not changing the css of the treeview items.

Related posts

Recent Viewed