DataSpriteCssClassField does not seem to be working

[Ken De Vries]

Hi,

I cannot seem to get the DataSpriteCssClassField to work correctly.  Here is the controller supplied class for each node...

01.public class DataDictionary_Categories : IStringIDDescription
02.{
03.
04.    [DataMember]
05.    [XmlAttribute]
06.    public string CategoryCode { get; set; } = string.Empty;
07.
08.    [DataMember]
09.    [XmlAttribute]
10.    public string TaxonomyCode { get; set; } = string.Empty;
11.
12.    [DataMember]
13.    [XmlAttribute]
14.    public string Taxonomy { get; set; } = string.Empty;
15.
16.    [DataMember]
17.    [XmlAttribute]
18.    public string Parent { get; set; } = string.Empty;
19.
20.    [DataMember]
21.    [XmlAttribute]
22.    public string Description { get; set; } = string.Empty;
23.
24.    [DataMember]
25.    [XmlAttribute]
26.    public string DataSpriteCSSClass { get { return ("glyphicon glyphicon-folder-close"); } set { } }
27.
28.    [DataMember]
29.    [XmlAttribute]
30.    public int ComponentCount { get; set; } = 0;
31.
32.    [DataMember]
33.    [XmlAttribute]
34.    public bool HasChildren
35.    {
36.        get
37.        {
38.            return (ComponentCount == 0);
39.        }
40.
41.        set { }
42.    }
43.
44.        public DataDictionary_Categories()
45.    {
46.
47.    }
48.}

 

Here is the TreeView setup...

01.@(Html.Kendo().TreeView()
02.    .Name("CategoryTree")
03.    .TemplateId("TreeViewTemplate")
04.    .HtmlAttributes(new { })
05.    .DataTextField("Description")
06.    .AutoScroll(false)
07.    .LoadOnDemand(true)
08.    .Events(e => e.Select("OnCategorySelected"))
09.    .Events(e => e.Expand("OnCategoryExpand"))
10.    .Events(e => e.Collapse("OnCategoryCollapse"))
11.    .Animation(true)
12.    .DataSpriteCssClassField("DataSpriteCSSClass")
13.    .DataSource(d => d
14.        .Model(m => m
15.            .Id("CategoryCode")
16.            .HasChildren("HasChildren")
17.        )
18.        .Read(read => read.Action("ListSubCategories", "Services"))
19.        .Events(e => e.RequestEnd("OnCategoryRequestEnd"))
20.        .Events(e => e.RequestStart("OnCategoryRequestStart"))
21.))

I am trying to use the BootStrap glyph icons folder open/folder close glyphs. I have the glyhs working elsewhere.  It seems that the TreeView does not recognize this kind of thing.  Am I missing something?

[Ken De Vries]

By the way, I m trying to replace the little triangle default icon that is used to expand and collapse the nodes.

[Iliana Dyankova]

Hi Ken,

The dataSpriteCssClassField will set a sprite CSS class to the nodes (documentation link). In order to change the plus / minus icons with font icons you should use additional CSS. Take a look at this dojo which demonstrates how to achieve the expected result.

Regards,
Iliana Nikolova
Telerik

[Ken De Vries]

Thank you!

 I knew this had to be simple.  There were just not any examples to follow.

 

[Scott]

The documentation link provided above does not seem to be available (404).  https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview/configuration/dataSpriteCssClassField

 

[Ivan Danchev]

Hello Scott,

Here's the correct link to the TreeView's dataSpriteCssClassField configuration option.

Regards,
Ivan Danchev
Progress Telerik