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

Can't get treeview to display folder icons.

1 Answer 267 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 04 Sep 2013, 01:41 PM
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

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 06 Sep 2013, 09:31 AM
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!
Tags
ListView
Asked by
Robert
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or