how to bind the tree view using datasource

4 posts, 0 answers
  1. vikas gupta
    vikas gupta avatar
    38 posts
    Member since:
    Nov 2009

    Posted 04 May 2013 Link to this post

    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")
            )
        ) 
        
        
    )
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 06 May 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jim
    Jim avatar
    7 posts
    Member since:
    Mar 2011

    Posted 26 Sep 2013 Link to this post

    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
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 Sep 2013 Link to this post

    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!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready