[DropDownTree] use type: "aspnetmvc-ajax" in datasource

[vahid]

hi, i need use "aspnetmvc-ajax" in DropDownTree.dataSource but i got Error: "Uncaught TypeError: data.Data is undefined"

$("#dropdowntree").kendoDropDownTree({ 
     dataSource: { 
          type: "aspnetmvc-ajax", 
          transport: { 
              read: { url: "xxxxxxxxxxxxxxxxxxxxxxxxxxx" , data: forgeryToken, dataType: "json" }
 }}

thank you

[Neli]

Hi Vahid,

I have tested locally and the dataSource type: "aspnetmvc-ajax", can be used without any issue for loading the DropDowntree data on my end. Could you please share more details about the endpoint used on your side and also about the returned response? 

Below you will as an example the endpoint used in the sample project i used to test:

public ActionResult GetData([DataSourceRequest]DataSourceRequest request) 
        {
            var result = new List<object>()
            {
                new { Text = "Text 1", Value = "Value 1" },
                new { Text = "Text 2", Value = "Value 2" },
                .....
            };
            return Json(result.ToDataSourceResult(request));
}

 

And the dataSource configuration:

 

var dataSource = new kendo.data.DataSource({
        type: "aspnetmvc-ajax",
        transport: {
          read: {
              url: '@Url.Action("GetData", "Home")'
            }
        },
        schema: {
            data: "Data",
            model: {
                fields: {
                    Text: { type: "string" },
                    Value: { type: "string" }
                }
            }
        }
    });

I hope this helps.

Regards,

Neli

[vahid]

hi,my response data includes hasChildren, i got error click for expand data 

my query:

             $("#dropdowntree").kendoDropDownTree({
                    placeholder: "Select ...",
                    dataSource: {
                        type: "aspnetmvc-ajax",
                        transport: {
                            read: {
                                url: "/Test/Index?handler=ReadTree1" , data: forgeryToken,
                                dataType: "json"
                            }
                        },
                        schema: {
                                data: "Data",
                                errors: "Errors",
                            model: {
                                id: "Id",
                                hasChildren: "hasChildren",
                                parentId : "ParentId",
                            },
                        }
                    },
                    dataTextField: "Name",
                    dataValueField: "Id"
                });

response data

"Data":[
{"Id":3,"Name":"..","ParentId":null,"hasChildren":true},
{"Id":2,"Name":"Account","ParentId":null,"hasChildren":true},
{"Id":1,"Name":"Admin","ParentId":null,"hasChildren":true},
{"Id":4,"Name":"Test","ParentId":null,"hasChildren":true}]

now click for expand "Account" igot error "Uncaught TypeError: data.Data is undefined"'

 

screen shot Previw

thanks 

[Neli]

Hi Vahid,

First, I would like to appologize that the endpoint and configuration from my previous reply is suitable for setting up a DropDownList, not a DropDownTree, please excuse me for my mistake.

Could you please let me know the purpose of using the dataSource  type: "aspnetmvc-ajax" for loading the DropDownTree data? Your configuration seems correct. However the  type: "aspnetmvc-ajax" is needed when DataSourceRequest and ToDataSourceResult instances from Kendo.MVC assembly are used. You could omit using the DataSourceRequest and configure the DropDownTree endpoint as demonstrated in our demos and in the example below:

public JsonResult Categories(int? Id)
        {
            var result = GetAllEmployees()
                 .Where(x => Id.HasValue ? x.ParendID == Id : x.ParendID == null)
                 .Select(item => new {
                     Id = item.Id,
                     Name = item.Name,
                     HasChildren = item.HasEmployees
                 });

            return Json(result, JsonRequestBehavior.AllowGet);
        }

And a sample configuration of the DropDownTree:

var ds = new kendo.data.HierarchicalDataSource({
            //type: "aspnetmvc-ajax",
            transport: {
                read: {
                    url: '@Url.Action("Categories", "Home")',
                    dataType: "json"
                }
            },
             schema: {                
                model: {
                    id: "Id",
                    hasChildren: "HasChildren",
                    Name: "Name"
                }
            }
        });

        $("#ddt").kendoDropDownTree({
            dataSource: ds,
            dataTextField: "Name"
        });

You could check also the respective endpoints in our DropDownTree UI for ASP.NET MVC demos and UI for ASP.NET Core demos by clicking on the View Source - Remote_Data_BindingController.cs tab.

Could you please try to implement the read endpoint as demonstrated above and let me know if the issue is resolved?

Regards,

Neli

 

 

[vahid]

thank you. i remove "aspnetmvc-ajax"