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

how to bind the tree view using datasource

3 Answers 239 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
vikas gupta
Top achievements
Rank 1
vikas gupta asked on 04 May 2013, 01:24 PM
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")
        )
    ) 
    
    
)

3 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 06 May 2013, 07:48 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jim
Top achievements
Rank 1
answered on 26 Sep 2013, 11:42 PM
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
0
Atanas Korchev
Telerik team
answered on 30 Sep 2013, 03:27 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TreeView
Asked by
vikas gupta
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Jim
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or