how to bind the tree view using datasource

[vikas gupta]

Please tell me the way to bind the tree view using data source.
I am using the below code to bind the tree view,I am not  sure I am on the right track.


@(Html.Kendo().TreeView()
    .Name("treeview").DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("GetFolderTreeData", "Dashboard")
        )
    ) 
    
    
)

[Alex Gyoshev]

Hello Vikas,

The posted sample looks correct. Please refer to the demos of the ASP.NET MVC wrappers which are shipped in the distribution package. They can be found in the wrappers\aspnetmvc\Examples\ folder. The TreeView / Remote Data example shows how to use the datasource binding.

Regards,
Alex Gyoshev
the Telerik team

[Jim]

I'm having huge problems converting to DataSources from the former Telerik .Items method of populating a TreeView.  In 99% of our code, we provide a model that includes a list of items to bind, so I'm having real trouble getting my mind around the need to have a separate DataSource property.  In addition, so much of the documentation relates to the JavaScript API, and the migration page for ASP.NET MVC doesn't mention the replacement for the Items property.

In any event, how do I convert the following?
@model IDictionary<int, string>
           
@{Html.Telerik().TreeView().Name("SourceTree")
        .DragAndDrop(settings => settings.DropTargets(".drop-target"))
        .ExpandAll(true)
        .ShowLines(false)
        .ClientEvents(events => events.OnNodeDragging("onNodeDragging").OnNodeDrop("onNodeDrop"))
        .Items(x => { Model.Select(y => x.Add().Text(Shimmer.Core.Helpers.StringFormatHelper.AbbreviateString(y.Value.ToString(), 38)).Value(y.Key.ToString())).ToList(); }).Render();
        }

Here's my first stab at it:
@model IDictionary<int, string>
           
@(Html.Kendo().TreeView().Name("SourceTree")
        .DragAndDrop(true)
        .ExpandAll(true)
        .Events(events => events.Drag("onNodeDragging").Drop("onNodeDrop"))   
        ??? .Items(x => { Model.Select(y => x.Add().Text(Shimmer.Core.Helpers.StringFormatHelper.AbbreviateString(y.Value.ToString(), 38)).Value(y.Key.ToString())).ToList(); })
 )

But I have no idea how to replace the .Items with .DataSource

Thanks

Jim Stanley
Blackboard Connect

[Atanas Korchev]

Hello Jim,

The Items() method hasn't been replaced. You can check the "Basic usage" demo which shows how to populate the treeview. Here is the relevant code:

@(Html.Kendo().TreeView()
    .Name("treeview")
    .Items(treeview =>
    {
        treeview.Add().Text("My Web Site")
            .SpriteCssClasses("folder")
            .Expanded(true)
            .Items(root =>
            {
                root.Add().Text("images")
                    .Expanded(true)
                    .SpriteCssClasses("folder")
                    .Items(images =>
                    {
                        images.Add().Text("logo.png")
                            .SpriteCssClasses("image");

                        images.Add().Text("body-back.png")
                            .SpriteCssClasses("image");

                        images.Add().Text("my-photo.jpg")
                            .SpriteCssClasses("image");
                    });

                root.Add().Text("resources")
                    .Expanded(true)
                    .SpriteCssClasses("folder")
                    .Items(resources =>
                    {
                        resources.Add().Text("pdf")
                            .Expanded(true)
                            .SpriteCssClasses("folder")
                            .Items(pdf =>
                            {
                                pdf.Add().Text("brochure.pdf")
                                    .SpriteCssClasses("pdf");

                                pdf.Add().Text("prices.pdf")
                                    .SpriteCssClasses("pdf");
                            });

                        resources.Add().Text("zip")
                            .SpriteCssClasses("folder");
                    });

                root.Add().Text("about.html")
                    .SpriteCssClasses("html");

                root.Add().Text("contacts.html")
                    .SpriteCssClasses("html");

                root.Add().Text("index.html")
                    .SpriteCssClasses("html");

                root.Add().Text("portfolio.html")
                    .SpriteCssClasses("html");
            });
    })
)

This is also covered in the documentation here: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/treeview/overview

Regards,
Atanas Korchev
Telerik