This is a migrated thread and some comments may be shown as answers.

DataSpriteCssClassField does not seem to be working

5 Answers 24 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Ken De Vries
Top achievements
Rank 1
Ken De Vries asked on 27 Jan 2016, 02:53 AM

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?

5 Answers, 1 is accepted

Sort by
0
Ken De Vries
Top achievements
Rank 1
answered on 27 Jan 2016, 02:57 AM
By the way, I m trying to replace the little triangle default icon that is used to expand and collapse the nodes.
0
Iliana Nikolova
Telerik team
answered on 29 Jan 2016, 09:18 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Ken De Vries
Top achievements
Rank 1
answered on 29 Jan 2016, 08:03 PM

Thank you!

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

 

0
Scott
Top achievements
Rank 2
answered on 19 Feb 2018, 03:52 PM

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

 

0
Ivan Danchev
Telerik team
answered on 20 Feb 2018, 06:49 AM
Hello Scott,

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

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TreeView
Asked by
Ken De Vries
Top achievements
Rank 1
Answers by
Ken De Vries
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Scott
Top achievements
Rank 2
Ivan Danchev
Telerik team
Share this question
or