Treelist shows "No records available." after upgrade to 2021.2.616.545

0 Answers 56 Views
TreeList
Azhar
Top achievements
Rank 1
Azhar asked on 28 Jun 2021, 06:02 AM

I am using Kendo for Asp.Net MVC in my application. Recently I upgraded to version 2021.2.616 After that the treelist stopped showing data. Only "No records available." is shown(see attached pic)


@(Html.Kendo().TreeList<Models.CategoryModel>()
    .Name("treelist")
    .HtmlAttributes(new { id = "itemtreelist" })
    .Toolbar(toolbar =>
    {   
toolbar.Custom().Click("AddNewCategory_click").Text("Add New Item Category").Name("addNewCategory");

        }
    })
    .Columns(columns =>
    {
        columns.Add().Field(e => e.Name).Width(200).Filterable(filterable => filterable.Ui("itemNameFilter"));
        columns.Add().Field(e => e.Description).Width(300);
        columns.Add().Field(e => e.IsActive).Template(
            "#if(IsActive == true){#" +
                Html.Kendo().CheckBox().Name("name#:IsActive#").HtmlAttributes(new { @class = "IsActive" }).Checked(true).ToHtmlString()
            +"#}else{#" +
                Html.Kendo().CheckBox().Name("name#:IsActive#").HtmlAttributes(new { @class = "IsActive" }).Checked(false).ToHtmlString()
            + "#}#"
            ).Width(75).Filterable(false) ;
        columns.Add().Field(e => e.ImagePath).Title("Image").Filterable(false).Template(
            "#if(ImagePath == null){#" +
                "No Image"
            + "#}else{#" +
             "<img src='#=ImagePath#' alt='#=Name#' Title='#=Name #' style='height:50px;' />"
            + "#}#"
            );

        columns.Add().Command(c =>
        {
            
               
                c.Custom().Click("EditCategory_click").Text("Edit").Name("editCategory");
           
        }).Width(125);

        columns.Add().Command(c =>
        {
           
                c.Destroy();
           
        }).Width(125);


    })
    .Editable(e=>e.Mode("Inline"))
    .Height(200)
    .Filterable(filterable => filterable
        .Extra(false))
    .Sortable()
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("GetItemCategories", "Category"))
        .Create(c => c.Action("CreateItemCategory", "Category"))
        .Update(c => c.Action("UpdateItemCategory", "Category"))
        .Destroy(c => c.Action("DestroyItemCategory", "Category"))
        .Model(m => {
            m.Id(f => f.Id);
            m.ParentId(f => f.ParentCategoryId);
            m.Expanded(true);
            m.Field(f => f.Name);
            m.Field(f => f.Description);
            m.Field(f => f.IsActive);
        })
    )
    .Height(600)

)


 

Few Notes:

1. There are no console errors

2. The data is coming from the server correctly. I checked and verified in developer console

3. Everything was working before upgrade (previously used 2019.x.xxx)

4. this is the part of the code (in action method) that returns the data for the treelist


IEnumerable<CategoryModel> result = ... linq query here ...;
return Json(result.ToTreeDataSourceResult(request,
                    e => e.Id,
                    e => e.ParentCategoryId,               
                    e => e                   
                    ));

Ivan Danchev
Telerik team
commented on 30 Jun 2021, 06:27 PM

Could you post an exemplary response the GetItemCategories action returns back to the client?

It should be formatted as shown below:

{
   "Data":[
      {
         "EmployeeId":1,
         "FirstName":"Daryl",
         "LastName":"Sweeney",
         "ReportsTo":null,
         "Address":"P.O. Box 427, 5676 Arcu. Rd.",
         "City":"Castelvecchio Calvisio",
         "Country":"Antigua and Barbuda",
         "Phone":"(555) 924-9726",
         "Extension":8253,
         "hasChildren":true,
         "Position":"CEO",
         "BirthDate":"\/Date(-409111200000)\/",
         "HireDate":"\/Date(1328644800000)\/"
      }
   ],
   "Total":1,
   "AggregateResults":{
  
   },
   "Errors":null
}

Azhar
Top achievements
Rank 1
commented on 01 Jul 2021, 12:51 PM

this is the an example of result from api call:
{"Data":[{"Id":36812,"Name":"test item 1","Description":null,"IsActive":true,"ParentCategoryId":0,"ImagePath":null},{"Id":52392,"Name":"test item 1","Description":null,"IsActive":true,"ParentCategoryId":36812,"ImagePath":null}],"Total":2,"AggregateResults":{},"Errors":null}

The actual result contains a few hundred records. Apart from that there is no difference
Ivan Danchev
Telerik team
commented on 06 Jul 2021, 12:49 PM

The problem is in the data itself. You are returning the first record with ParentCategoryId = 0. So the TreeList cannot display it because it cannot find a parent item with Id = 0. If you want the record to have no parent, you should set ParentCategoryId = null. So this field should be of type int? and the data will look like this:

var result = new List<CategoryModel>()
{
    new CategoryModel()
    {
        Id = 36812,
        ParentCategoryId = null,
        Name = "test item 1",
        Description = null,
        IsActive = true,
        ImagePath = null

    },
    new CategoryModel()
    {
        Id = 52392,
        ParentCategoryId = 36812,
        Name = "test item 2",
        Description = null,
        IsActive = true,
        ImagePath = null
    },
};

Azhar
Top achievements
Rank 1
commented on 08 Jul 2021, 05:46 PM | edited

Thanks a lot. This worked. I have been trying to resolve this for days. I could not find any documentation mentioning this change in the newer versions (with 2019.x.xxx version I was using previously treelist worked with parentcategoryid=0)

No answers yet. Maybe you can help?

Tags
TreeList
Asked by
Azhar
Top achievements
Rank 1
Share this question
or