Can't get treeview to display folder icons.

[Robert]

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

[Dimiter Madjarov]

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