DataSpriteCssClassField does not seem to be working

4 posts, 0 answers
  1. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 26 Jan Link to this post

    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?

  2. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 26 Jan Link to this post

    By the way, I m trying to replace the little triangle default icon that is used to expand and collapse the nodes.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 29 Jan Link to this post

    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
  5. Ken De Vries
    Ken De Vries avatar
    24 posts
    Member since:
    Mar 2010

    Posted 29 Jan in reply to Iliana Nikolova Link to this post

    Thank you!

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

     

Back to Top
UI for ASP.NET MVC is VS 2017 Ready