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

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?

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.

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

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:

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:

 @(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.

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 ?

Hi Team,

I have a requirement that to load child data from database every time i clicked on expand icon but right now its only load data on first time of expand button but I need it on every click.

Drag and drop feature is not behaving as expected. When trying to drag and drop an item from one place to another, it always gets dropped at the end of the targeted parent node and not at the desired place. As a result it becomes the last node of the parent. Can't move a node in between two nodes.