Telerik Forums
UI for ASP.NET MVC Forum
0 answers
55 views

Hi Team,

We are facing problems in below scenarios, Request help on the same.

We have data based parent and their child nodes and it is binding properly however, we wanted to implement functionality like we need to display only parent node for their selected nodes. (currently, it is displaying all nodes including parents and their childs.)

Request help on the asap asap.

 

Nikunj
Top achievements
Rank 1
 asked on 08 Apr 2023
0 answers
86 views
How to do sorting and filtering of child nodes in .net mvc treeview using telerik?
 @(Html.Kendo().TreeView()
            .Name("treeview")
            .ExpandAll(true)
            .DataSpriteCssClassField("sprite")
            .BindTo((IEnumerable<FolderViewVM>)Model.FolderList, (NavigationBindingFactory<TreeViewItem> mappings) =>
            {
                mappings.For<FolderViewVM>(binding => binding.ItemDataBound((item, doc) =>
                {
                    item.Text = doc.Name;
                    item.Id = doc.Id.ToString();
                })
                .Children(doc => doc.Children));

            })
Robin
Top achievements
Rank 1
 updated question on 04 Jan 2023
4 answers
390 views

I want to do something like what happens at http://demos.telerik.com/aspnet-mvc/treeview/checkboxes, where when you click a node, its parent nodes light up but are not checked. I've looked at the demo and can't figure out how to make this happen. Any ideas would be helpful.

It's the end of the day on Friday, so I don't really have time right now to come up with samples of my code. If no one has an idea by Monday, I will do that.

Thanks!

Laurie

Dharmangi
Top achievements
Rank 1
Iron
 answered on 03 Oct 2022
1 answer
83 views

Is there anyway to use the DropDownTree without it having to make so many requests.

It looks like it is essentially building the tree one request at a time for each item inside it. This is ridiculously inefficient.

Why can't it be passed a single data structure in a request to build itself, after all a dropdownlist,  combobox even a grid can be built with a single request for the IList<data> to databind. 

There is little to no documentation on the DropDownTree control which is disappointing.

For a Data structure like this, it makes 6 request which makes no sense.

  • Item 1
    • Item 1A (parent=1)
    • Item 1B (parent=1)
  • Item 2
    • Item 2A (parent =2)
  • Item 3

 

Could someone at telerik please provide an example of how to create such a data structure that can be passed to the DropDownTree in one request to allow it to render this. Currently this control is not very usable if it needs one request per item.

A treeview will load all it's data with a single request that returns an

var data = (IList<DataModels>)object .ToTreeDataSourceResult(request, e => e.ID, e => e.Parent_ID, e => e);

Does the DropDownTree not have something similar to a TreeDataSource? Why can't it use the same TreeDataSourceResult Object?

Ivan Danchev
Telerik team
 answered on 20 Sep 2022
0 answers
122 views
1 answer
154 views

Problem:

I have a search funtionality that loads the folder structure and a second that loads the documents for a folder. Due to dependencies on other systems is the latter a giant performance hit if i have to loop over the folder in an eager loaded system. these same dependencies & preformance impact also block me from excecuting the first webservice on every expand. Documents are only available in leaf folders, as they are a specific type, but that's not relevant to the treeview.

Right now, we have implemented it so that we cache the folder structure, and on every expand we load the cached version & filter out what we needed. Due to cache size limitations, we have settled on a cache time of 30 minutes. We see now that users complain about  the treeview not working anymore when they have been called away, when they had lunch & when they had to work on other things for a while (i.e. when they didn't use the app for more than 30m.

I have managed to eager load the complete folder structure, but that required it to be fully expanded, while most folders should be collapsed. The contents of collapsed folders seems to be ignored. A folder that has been extended but recollapsed however, is kept in the treeview and will not be requested again. We could make a Javascript that would collapse everything, but that would give a nasty flicker on the view.

Question:

I would like to know if there is a way to eager load the collapsed folder structure while keeping lazy loading for the documents.

 

Anton Mironov
Telerik team
 answered on 23 May 2022
2 answers
240 views

Hello.

 

I'm trying to put different color text (and style) on TreeView node item.

I just found that this is archieved with SpriteCssClass property on TreeViewItemModel class but it seems that It is not working.

 

My view:


<h2>Index</h2>

<script>
    kendo.culture("es-ES"); //week start day depends on the used kendo culture
</script>

@section Menu {
        <h4>Departamento</h4>
        @(
            Html.Kendo().TreeView()
                    .Name("left-menu")
                    .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.depts)
                    .DataSpriteCssClassField("SpriteCssClass")
                    .Events(ev => ev
                        .Select("onSelect")
                        )
        )
}

 

My CSS file:

/* Treeview Departamentos */

.deptRoot {
    color: dodgerblue;
    font-weight: bold;
}

.deptSub {
    color: cadetblue;
    font-weight: bold;
}

.empSup {
    color:indianred;
    font-weight: normal;
}

.empleado {
    color: white;
    font-weight: normal;
}


This is my JSON Tree data passed by ViewBag.depts var:

[
  {
    "Enabled": true,
    "Expanded": false,
    "Encoded": true,
    "Selected": false,
    "Text": "Informática",
    "SpriteCssClass": "deptRoot",
    "Id": "1#48",
    "Url": null,
    "ImageUrl": null,
    "HasChildren": true,
    "Checked": false,
    "Items": [
      {
        "Enabled": true,
        "Expanded": false,
        "Encoded": true,
        "Selected": false,
        "Text": "Soporte",
        "SpriteCssClass": "deptSub",
        "Id": "2#1001",
        "Url": null,
        "ImageUrl": null,
        "HasChildren": true,
        "Checked": false,
        "Items": [
          {
            "Enabled": true,
            "Expanded": false,
            "Encoded": true,
            "Selected": false,
            "Text": "RAUL MORENO RAMIREZ",
            "SpriteCssClass": "empSup",
            "Id": "3#221",
            "Url": null,
            "ImageUrl": null,
            "HasChildren": true,
            "Checked": false,
            "Items": [
              {
                "Enabled": true,
                "Expanded": false,
                "Encoded": true,
                "Selected": false,
                "Text": "BRIAN SALAZAR MUÑOZ",
                "SpriteCssClass": "empleado",
                "Id": "4#585",
                "Url": null,
                "ImageUrl": null,
                "HasChildren": false,
                "Checked": false,
                "Items": [

                ],
                "HtmlAttributes": {

                },
                "ImageHtmlAttributes": {

                },
                "LinkHtmlAttributes": {

                }
              }
            ],
            "HtmlAttributes": {

            },
            "ImageHtmlAttributes": {

            },
            "LinkHtmlAttributes": {

            }
          }
        ],
        "HtmlAttributes": {

        },
        "ImageHtmlAttributes": {

        },
        "LinkHtmlAttributes": {

        }
      },
      {
        "Enabled": true,
        "Expanded": false,
        "Encoded": true,
        "Selected": false,
        "Text": "Desarrollo",
        "SpriteCssClass": "deptSub",
        "Id": "2#1002",
        "Url": null,
        "ImageUrl": null,
        "HasChildren": true,
        "Checked": false,
        "Items": [
          {
            "Enabled": true,
            "Expanded": false,
            "Encoded": true,
            "Selected": false,
            "Text": "GUILLEM ALBERT JULVE SEGOVIA",
            "SpriteCssClass": "empSup",
            "Id": "3#292",
            "Url": null,
            "ImageUrl": null,
            "HasChildren": false,
            "Checked": false,
            "Items": [

            ],
            "HtmlAttributes": {

            },
            "ImageHtmlAttributes": {

            },
            "LinkHtmlAttributes": {

            }
          }
        ],
        "HtmlAttributes": {

        },
        "ImageHtmlAttributes": {

        },
        "LinkHtmlAttributes": {

        }
      },
      {
        "Enabled": true,
        "Expanded": false,
        "Encoded": true,
        "Selected": false,
        "Text": "MTRANS",
        "SpriteCssClass": "deptSub",
        "Id": "2#1003",
        "Url": null,
        "ImageUrl": null,
        "HasChildren": true,
        "Checked": false,
        "Items": [
          {
            "Enabled": true,
            "Expanded": false,
            "Encoded": true,
            "Selected": false,
            "Text": "CARLOS LUNA PACHECO",
            "SpriteCssClass": "empSup",
            "Id": "3#40",
            "Url": null,
            "ImageUrl": null,
            "HasChildren": true,
            "Checked": false,
            "Items": [
              {
                "Enabled": true,
                "Expanded": false,
                "Encoded": true,
                "Selected": false,
                "Text": "ALBERT FERRANDIZ ISERTE",
                "SpriteCssClass": "empleado",
                "Id": "4#576",
                "Url": null,
                "ImageUrl": null,
                "HasChildren": false,
                "Checked": false,
                "Items": [

                ],
                "HtmlAttributes": {

                },
                "ImageHtmlAttributes": {

                },
                "LinkHtmlAttributes": {

                }
              }
            ],
            "HtmlAttributes": {

            },
            "ImageHtmlAttributes": {

            },
            "LinkHtmlAttributes": {

            }
          }
        ],
        "HtmlAttributes": {

        },
        "ImageHtmlAttributes": {

        },
        "LinkHtmlAttributes": {

        }
      }
    ],
    "HtmlAttributes": {

    },
    "ImageHtmlAttributes": {

    },
    "LinkHtmlAttributes": {

    }
  }
]


All items have the same text color. Where is the mistake?

 

Thx in advance for who resolve this ;)

 

KR

                                                                                                                                                                                                                                                                                                                                                                                                        
Guillem Albert
Top achievements
Rank 1
Iron
 answered on 11 Oct 2021
1 answer
85 views

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. 


Aleksandar
Telerik team
 answered on 22 Apr 2021
3 answers
320 views

 @(Html.Kendo().TreeView()
                .Name("treeviewDetails")
                .Items(treeview =>
                {
                    treeview.Add().Text("Information")
                        .Expanded(true)
                        .Items(root =>
                        {
                            root.Add().Text("Priority" + ": " + InOnwHours);
                            root.Add().Text("Due Date" + ": " + "Today");
                            root.Add().Text("Return emails" + ": " + "example@gmail.com");
                        });

}     

 

How i can format the part of text in  root.Add().Text text ?  i need show the text after ":"  in different color, style and size. (for example example@gmail.com  in red) see attached image.

 

Thank you for help.

Dimitar
Telerik team
 answered on 31 Mar 2021
1 answer
78 views

Hello,

 

I am currently evaluating the Telerik control Tree View to display the hiearchy data as shown in the attached screen shot.

I have a requirement where we will be building a treeview in our ASP.NET MVC controller code  passing to the view.  

I need to display the Kendo Tree View  with all nodes expanded when the application loads initially  How do I do that ?




Aleksandar
Telerik team
 answered on 08 Dec 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?