Add css class to treeview line

[I. Breukink]

I would like to be able to style the treeview more. I’m using the spriteCssClass, but would also like to add a custom cssclass-name for the complete line  (<li>).  I should be able to define this for each treeview line individually.

Because sometimes i want to change the background color of a certain line (including the sprite), adapt the height of a line, or make other css-changes. How can i do this?

[Dimo]

Hello Ivor,

Custom CSS classes for TreeView items (the <li> elements) can be added via the items' HtmlAttributes() fluent method.

items.Add().Text("Item Text")
    .SpriteCssClasses("folder")
    .HtmlAttributes(new { @class = "myItemClass" })

In case your development involves style customizations, I highly recommend you the following resources, which provide knowledge and insight how CSS works. They will greatly facilitate your work and allow you to achieve your goals faster and more easily.

CSS selectors
http://css.maxdesign.com.au/selectutorial/

CSS specificity
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

The three presentations on the first website's home page and the Selector tutorial provide fundamental information, which is required for everybody that deals with CSS. Firebug for Firefox and Chrome's Web Developer Toolbar are also tremendously useful tools for such tasks. The second article explains how conflicting styles are handled by the browser.

Regards,
Dimo
the Telerik team

[I. Breukink]

Thanks Dimo, this is great. But i'm using a datasource to build to control. Like

{text:'Web', spriteCssClass:'icon1', items: [{text:'Cases'},{text:'Content'},{text:'Header'}]}

Is it also possible like this (or in another format, when supplying the information as a datasource or completely generated on serverside)? That would make it much easier. Or do you suggest i make a custom javascript to build the treeview using your code? Will that not slow down the buildup of the treeview?

Thanks

Ivor

[Dimo]

Hello Ivor,

I am afraid that setting custom HTML attributes in the TreeView's client datasource is not supported. You either need to create the TreeView server-side, or intialize the TreeView from exising HTML markup that already has the custom CSS classes applied to the <li> elements.

When creating the TreeView server-side, you can either add custom classes on a particular item as shown above, or use local data like this:

(code based on Local Data offline demo)

Html.Kendo().TreeView()
    .Name("treeview-right")
    .BindTo((IEnumerable<CategoryItem>)ViewBag.inline, (NavigationBindingFactory<TreeViewItem> mappings) =>
    {
        mappings.For<CategoryItem>(binding => binding.ItemDataBound((item, category) =>
            {
                item.Text = category.CategoryName;
                item.HtmlAttributes.Add("class", "abc");
            })
            .Children(category => category.SubCategories));

        mappings.For<SubCategoryItem>(binding => binding.ItemDataBound((item, subCategory) =>
        {
            item.Text = subCategory.SubCategoryName;
        }));
    })

All the best,
Dimo
the Telerik team