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

0 Answers 27 Views
Data Source DropDownTree
vahid
Top achievements
Rank 2
Iron
Iron
vahid asked on 01 Jun 2022, 01:50 PM | edited on 01 Jun 2022, 01:54 PM
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
Telerik team
commented on 06 Jun 2022, 07:44 AM

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
Top achievements
Rank 2
Iron
Iron
commented on 06 Jun 2022, 02:52 PM | edited

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
Telerik team
commented on 09 Jun 2022, 08:48 AM

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
Top achievements
Rank 2
Iron
Iron
commented on 09 Jun 2022, 11:37 AM

thank you. i remove "aspnetmvc-ajax"

No answers yet. Maybe you can help?

Tags
Data Source DropDownTree
Asked by
vahid
Top achievements
Rank 2
Iron
Iron
Share this question
or