How can I Use DropDownTree with a single databind instead of numerous requests.

[freeTheCode]

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]

Hello,

The DropDownTree sends multiple requests to the server to load the children of the parent nodes. This is done through the .LoadOnDemand(true) option and it designed for performance purposes. If the data contains thousands or tens of thousands of records and they are represented as a multi level hierarchy, loading all at once could lead to the browser becoming unresponsive or the request size could become very large to a point where it could exceed the max allowed request size. Such a scenario can be avoided if the DropDownTree sends separate requests for each parent node that the user expands. This way only the child nodes of that particular parent node are requested when it is expanded, instead of all the data.

Nevertheless, if you want to load all the data in the DropDownTree with a single request, you can do so as shown in the example below.

1. Declare the DropDownTree:

@(Html.Kendo().DropDownTree()
	.Name("dropdowntree")
	.DataTextField("text")
)

2. Declare a model that has camel case fields:

public class SampleModel
{
    public string id { get; set; }

    public string text { get; set; }
        
    public bool hasChildren { get; set; }

    public List<SampleModel> items { get; set; }
}

3. Create an action that returns all the data  (in this example a List<SampleModel>):

public JsonResult Read()
{
    var result = new List<SampleModel>()
    {
        new SampleModel() {
            id = "1",
            text = "Root1",
            hasChildren = true,
            items = new List<SampleModel>()
            {
                new SampleModel()
                {
                    id = "11",
                    text = "Child1.1",
                    hasChildren = false,
                    items = null
                },
                new SampleModel()
                {
                    id = "12",
                    text = "Child1.2",
                    hasChildren = false,
                    items = null
                }
            }
        },
            new SampleModel() {
            id = "2",
            text = "Root2",
            hasChildren = true,
            items = new List<SampleModel>()
            {
                new SampleModel()
                {
                    id = "21",
                    text = "Child2.1",
                    hasChildren = false,
                    items = null
                },
                new SampleModel()
                {
                    id = "22",
                    text = "Child2.2",
                    hasChildren = false,
                    items = null
                }
            }
        }

    };


    return Json(result, JsonRequestBehavior.AllowGet);
}

The DropDownTree does not use ToTreeDataSourceResult. The collection can be returned as json as shown above.

4. On document.ready send a standard AJAX request to the Read action and in the success callback get a reference to the DropDownTree and load the data returned by the Read action:

$(document).ready(function () {
	$.ajax({
		url: '@(Url.Action("Read", "Home"))',
		type: 'POST',
		dataType: 'json',
		success: function (data) {
			var ddt = $("#dropdowntree").data("kendoDropDownTree");
			ddt.dataSource.data(data);
		}
	});
})

Regards,
Ivan Danchev
Progress Telerik