When a treeview is first rendered is displays an animation indicating data is being loaded. I ahve a treeview that initially doesn't contain data, and only shows data after a user has entered a search.

I can refresh the treeview using   $("#treeview").data("kendoTreeView").dataSource.read();  but no animation is shown. I would have thought it would have been logical to show an animation as default behaviour, matching the grid and other controls.

How can I enable the animation on this call please?

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.

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?

i am getting the error when i use @html.kendo()

it showing are you missing any directives

>please suggest any solution

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.