Can't get treeview to display folder icons.

2 posts, 0 answers
  1. Robert
    Robert avatar
    1 posts
    Member since:
    Aug 2013

    Posted 04 Sep 2013 Link to this post

    So, we're evaluating Kendo UI against Dev Express for our next version of Oliver.  Thought I'd test forum support as well!  

    I'm having a problem getting my tree view to display folders (rather than the default >).  Probably something simple.  Here's the MVC wrapper - note it's a treeview in a panel:

    @(Html.Kendo().PanelBar()
        .Name("panelbar")
        .ExpandMode(PanelBarExpandMode.Single)
        .Items(panelbar =>
        {
            panelbar.Add().Text("Folders")
                .Content(@<text>
                <div id="folderTreeView">
                    @(Html.Kendo().TreeView()
                        .Name("treeview")
                        .DataTextField("text")
                        .LoadOnDemand(true)
                        .DataSource(source => 
                            source.Read(read =>
                                read.Action("GetFolders", "documents")
                            )
                        )
                        .Events( events => events
                            .Select( "onTreeItemSelect" )
                        )
                        .Deferred()
                    )
                </div>
                </text>);
            panelbar.Add().Text("Batches").Content("Batches? We 'aint got no batches. I don't gotta show you no stinkin' batches!");
            panelbar.Add().Text("Clusters");
            panelbar.Add().Text("Tags");
            panelbar.Add().Text("Exemplars");   

        })
        .Deferred()
    )
     
    Here's the ajax handler:
            public List<DocTreeItem> GetFolders(int? id)
            {
                if (!id.HasValue)
                    id = 0;

                List<DocTreeItem> folders = (from docFolders in _dataContextFactory.OliverDBContext.GetTable<FolderTree>()
                                                where docFolders.ParentFolderId == id 
                                                select new DocTreeItem()
                                                {
                                                    id = docFolders.FolderId,
                                                    text = docFolders.FolderName + " (" + docFolders.DocCount.ToString() + ")",
                                                    hasChildren = docFolders.HasChildren,
                                                    spriteCssClasses ="folder"
                                                }).ToList();
                return folders;
            }

    where DocTreeItem is:
        public class DocTreeItem
        {
            public int id { get; set; }
            public string text { get; set; }
            public bool hasChildren { get; set; }
            public string spriteCssClasses { get; set; }
        }

    What am I doing wrong?  Note, I have to define DocTreeItem instead of using Kendo.TreeViewItem because of a problem with camelCase:  If I return a list of TreeViewItems, kendo js is expecting them in camel case.  But, when I enable camel case via: config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver(); my grid controls break because the grid model binds to the non-camel case model definition, but when it goes to bind on the client, the ajax call now is sending camel case and so the grid won't find it.  How do you deal with that, also?

    Thanks,

    Robert

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 06 Sep 2013 Link to this post

    Hello Robert,


    The reason for the issue is that the dataSpriteCssField is not specified in the TreeView configuration, so the Widget is not aware which property to look up to.
    E.g.
    @(Html.Kendo().TreeView()
        .Name("treeview")
        ...
        .DataSpriteCssClassField("spriteField")

    Regarding your second question, this behavior is expected, since the Grid expects the data in the following format: 
    E.g.
    {"Data": ..., "Total": ..., "AggregateResults": ...,"Errors": ...}

    A similar issue is discussed in the following forum topic.

    I hope that this was the information that you were looking for. I wish you a great day!

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top