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

ASSP.net MVC listview to treeview

1 Answer 25 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 19 Apr 2021, 03:26 PM

Hey all I am very new to Kendo UI but am trying to remake the layout of my companies listbox over to treeview so that I will be able to categorize the items coming in from the api call.

The current code is this:

01.@(Html.Kendo().ListBox()
02.        .Name("lbAvailableSocialMediaSources")
03.        .Toolbar(tb =>
04.        {
05.            tb.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
06.            tb.Tools(tools => tools
07.                .TransferTo()
08.                .TransferFrom()
09.                .TransferAllTo()
10.                .TransferAllFrom());
11.        })
12.        .ConnectWith("Sources")
13.        .HtmlAttributes(new {style="width:44%"})
14.        .Draggable(true)
15.        .DropSources("Sources")
16.        .DataSource(ds => ds.Read(r => r.Url("/api/sources" + (!string.IsNullOrWhiteSpace(Model.Providers) ? "?providerId="+ Model.Providers :"")).Type(HttpVerbs.Get)))
17.        .DataTextField("Name")
18.        .DataValueField("Id")
19.        .Events(e=>e.DataBound("sourcesViewModel.dataBound").Add("sourcesViewModel.add")))
20.    @(Html.Kendo().ListBox()
21.        .Name("Sources")
22.        .HtmlAttributes(new { style = "width:44%" })
23.        .DataTextField("Name")
24.        .DataValueField("Id")
25.        .Draggable(true)
26.        .DropSources("lbAvailableSocialMediaSources")
27.        .BindTo(new List<SocialMediaSource>())
28.        .Selectable(ListBoxSelectable.Multiple))

The above produces the attached image screenshot.95.png.

All that works just fine. I am able to drag over any item and also use the buttons to do the same.

Now here is the problem and where I am currently stuck at not knowing how to go about doing it.

I am wanting to use the treeview with checkboxes so that i am able to put items that are currenbtly in the list into items under their category name.

The api json looks like this:

{
    "meta": {
        "total_results": 193,
        "offset": 0,
        "total_pages": 1
    },
    "object_list": [{
            "name": "GitHubCommits",
            "cat":"Git Hub",
            "guid": "6b69875a84017a3704dec1b3843f761a41c8044d654bf3f0450ddb56fa3ff9fa",
            "sub_types": [{
                    "name": "Keyword",
                    "key": "keyword"
                }
            ]
        }, {
            "name": "GitLab",
            "cat":"Git Hub"
            "guid": "1ff8683f7579baa702fafiuiurehgyu87t5ius3tiiud2de6e17cc1bea3e8e0db647b9c9",
            "sub_types": [{
                    "name": "Keyword",
                    "key": "keyword"
                }
            ]
        }, {
            "name": "facebook",
            "cat":"Social Media"
            "guid": "1ff8683f7579baa702faf987654fho865fks3tiiud2de6e17cc1bea3e8e0db647b9c9",
            "sub_types": [{
                    "name": "Keyword",
                    "key": "keyword"
                }
            ]
        }, {
       ....ETC....

Taken the json above I am having a hard time trying to produce a treeview with that kind of data structure. Most all the examples I've seen for the treeview have all been static adding it to the treeview or dynamic with a structure that I am not able to put my json data into:
root.Add().Text("Kendo UI Project").Id("2")
  .Expanded(true)
  .SpriteCssClasses("folder")
  .Items(project =>
{
 project.Add().Text("about.html").Id("3").SpriteCssClasses("html");
 project.Add().Text("index.html").Id("4").SpriteCssClasses("html");
 project.Add().Text("logo.png").Id("5").SpriteCssClasses("image");
});
 
root.Add().Text("New Web Site").Id("6")
 .Expanded(true)
 .SpriteCssClasses("folder")
 .Items(item =>
 {
  item.Add().Text("mockup.jpg").Id("7").SpriteCssClasses("image");
  item.Add().Text("Research.pdf").Id("8").SpriteCssClasses("pdf");
 });
 ...ETC...


and also

@(Html.Kendo().TreeView()
.Name("treeview-telerik")
.TemplateId("treeview")
.Checkboxes(true)
.DragAndDrop(true)
.Items(treeview =>
{
 treeview.Add().Text("My Documents")
 .Expanded(true)
 .Items(root =>
 {
   root.Add().Text("New Web Site")
   .Expanded(true)
   .Items(images =>
   {
     images.Add().Text("mockup.pdf");
     images.Add().Text("Research.pdf");
   });
    ..ETC..


I don't know how you would go about looping it this way using my json data: 

treeview.add().Text("Categories")
   .Expanded(True)
   .Items(
    root.add().Text("Git Hub")=> {
        images.Add().Text("GitHubCommits");
        images.Add().Text("GitLab");
    });
      root.add().Text("Social Networks")=> {
        images.Add().Text("facebook");
      });
     ...ETC...

 What I am looking to accomplish is seen here https://demos.telerik.com/aspnet-mvc/treeview/checkboxes but again, I do not know how to go about making the needed structure with the json I have to work with so that it knows what data to pull.

My attempt at the treeview code has not gone so well. Just producing undefined for all 192 items (image screenshot.96.png) when just trying to output the Name as it is in the listview..

So to recap, I am wanting to produce a treeview from my current json data so that I am able to categorize everything in a neater, more user friendly design/look. 


1 Answer, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 22 Apr 2021, 10:34 AM

Hello David,

You can bind the TreeView to data in several ways. I suggest reviewing this section of the documentation:

https://docs.telerik.com/aspnet-mvc/html-helpers/navigation/treeview/binding

Generally speaking the TreeView uses hierarchical data, so you have to convert any flat structures to hierarchical data before binding the widget to it. I binding to a remote endpoint, the remote end-point should return homogeneous items. You can review runnable examples of the supported data binding options on the following links:

Local Data Binding

Remote Data Binding

You can click on the View Source tab to review the code behind the examples and the configurations. For example, note on the remote data binding demo how data is fetched from the Northwind Employees table and passed to the TreeView in a suitable format.

If you need further details on the DataSource configuration you can check the section dedicated to the DataSource configuration:

DataSource documentation

For example, to display the data from the posted JSON in a TreeView you can use the following configuration:

@(Html.Kendo().TreeView()
    .Name("treeview")
    .DataTextField("name")
    .DataSource(dataSource => dataSource
        .Custom()
        .Transport(t=>t
            .Read(read => read
                .Url("https://run.mocky.io/v3/5768ca25-aafa-48d8-b053-c15532a44028")
            ))
            .Schema(s=>s.Model(m=>
            {
                m.Id("guid");
                m.Field("name",typeof(String));
            })
            .Data("object_list"))
    )
)

I hope you will find the above information and example are useful.

Regards,
Aleksandar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
TreeView
Asked by
David
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
Share this question
or