Clicking on nodes in kendo TreeView makes the node arrow to go way and the node does not expand

[Svetlin]

This is the code and i cant figure out why the tree does not expand and the clicking on node makes the arrow to go way and nothing happens. Any ideas?

Thank you a lot

    var dataSource = new kendo.data.HierarchicalDataSource({
        data: [
    {
        Id: "504644ed-f044-441a-b5a2-0932535cae1d",
        CategoryName: "Category 1",
        RootCategoryLvl: [
            {
                Id: "254efcac-e213-423a-b665-a4bad0df1bce",
                CategoryName: "Category 1-2",
                ChildrenCategory1: []
            },
            {
                Id: "0a4e218f-dfef-44d2-a68e-f2ec7db65298",
                CategoryName: "Category 1-1",
                ChildrenCategory1: [
                    {
                        Id: "8fa23676-79ec-4b09-aba5-a25400dc3fc9",
                        CategoryName: "Category 1-1-1",
                        ChildrenCategory2: [
                            {
                                Id: "238e006d-a7d2-4a9f-9e49-a25400dc7d87",
                                CategoryName: "Category 1-1-1-1",
                                ChildrenCategory3: null
                            },
                            {
                                Id: "f443ad31-e1a0-4627-926b-a25400dc8784",
                                CategoryName: "Category 1-1-1-2",
                                ChildrenCategory3: null
                            },
                            {
                                Id: "07a2b4a9-2d1d-4e83-a688-a25400dc8fa5",
                                CategoryName: "Category 1-1-1-3",
                                ChildrenCategory3: null
                            }
                        ]
                    },
                    {
                        Id: "8ce00d5a-8f46-4ea8-b0ae-a25400dc53af",
                        CategoryName: "Category 1-1-2",
                        ChildrenCategory2: []
                    }
                ]
            }
        ]
    },
    {
        Id: "e0de81c2-b05f-43cc-b9ca-8d2e2a26a2b9",
        CategoryName: "Category 2",
        RootCategoryLvl: [
            {
                Id: "df2e275d-25f2-4675-9263-13c1a8c573a5",
                CategoryName: "Best Selling Products",
                ChildrenCategory1: []
            },
            {
                Id: "18f82b35-01a9-4350-b24d-94a56a063351",
                CategoryName: "Current Inventory List",
                ChildrenCategory1: []
            }
        ]
    },
    {
        Id: "09a0101f-1fc9-4827-b870-a23400a2bd1e",
        CategoryName: "test1",
        RootCategoryLvl: []
    },
    {
        Id: "5bd75a56-994f-457f-8e65-a23400a35040",
        CategoryName: "test2",
        RootCategoryLvl: []
    }
        ],
         schema: {
            model: {
                id: "Id",
                hasChildren: "ChildrenCategory1",
                children: {
                    schema: {
                        model: {
                            id: "Id",
                            hasChildren: "ChildrenCategory2",
                            children: {
                                schema: {
                                    model: {
                                        id: "Id",
                                        hasChildren: "ChildrenCategory3",
                                        children: {
                                            schema: {
                                                model: {
                                                    id: "Id",
                                                    hasChildren: false
                                                    
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }                     
                    }
                }
            }
        }
    });

   $("#treeview-right").kendoTreeView({
       dataSource: dataSource,
       dataTextField: ["CategoryName"]
   });

[Alexander Popov]

Hi Svetlin,

Here is a corrected version of the dataSource:   

schema: {
     model: {
         id: "Id",
         children: {
             schema:{
                 data: "RootCategoryLvl",
                 model: {
                     id: "Id",
                     children:  {
                         schema:{
                             data: "ChildrenCategory1",
                             model: {
                                 id: "Id",
                                 children:  {
                                     schema:{
                                         data: "ChildrenCategory2",
                                         model: {
                                             id: "Id",
                                             children:  "ChildrenCategory3"
                                         }
                                      }
                                 }
                             }
                          }
                     }
                 }
              }
         }
     }
  }
});

Additionally you can greatly simplify the structure by using the same name for the children, as shown in this example.

Regards,
Alexander Popov
Telerik

[Svetlin]

Hi Alex and thanks for the response. I have changed the json response to:

[
    {
        "Id": "504644ed-f044-441a-b5a2-0932535cae1d",
        "CategoryName": "Category 1",
        "Children": [
            {
                "Id": "254efcac-e213-423a-b665-a4bad0df1bce",
                "CategoryName": "Category 1-2",
                "Children": []
            },
            {
                "Id": "0a4e218f-dfef-44d2-a68e-f2ec7db65298",
                "CategoryName": "Category 1-1",
                "Children": [
                    {
                        "Id": "8fa23676-79ec-4b09-aba5-a25400dc3fc9",
                        "CategoryName": "Category 1-1-1",
                        "Children": [
                            {
                                "Id": "238e006d-a7d2-4a9f-9e49-a25400dc7d87",
                                "CategoryName": "Category 1-1-1-1",
                                "Children": null
                            },
                            {
                                "Id": "f443ad31-e1a0-4627-926b-a25400dc8784",
                                "CategoryName": "Category 1-1-1-2",
                                "Children": null
                            },
                            {
                                "Id": "07a2b4a9-2d1d-4e83-a688-a25400dc8fa5",
                                "CategoryName": "Category 1-1-1-3",
                                "Children": null
                            }
                        ]
                    },
                    {
                        "Id": "8ce00d5a-8f46-4ea8-b0ae-a25400dc53af",
                        "CategoryName": "Category 1-1-2",
                        "Children": []
                    }
                ]
            }
        ]
    },
    {
        "Id": "e0de81c2-b05f-43cc-b9ca-8d2e2a26a2b9",
        "CategoryName": "Category 2",
        "Children": [
            {
                "Id": "df2e275d-25f2-4675-9263-13c1a8c573a5",
                "CategoryName": "Best Selling Products",
                "Children": []
            },
            {
                "Id": "18f82b35-01a9-4350-b24d-94a56a063351",
                "CategoryName": "Current Inventory List",
                "Children": []
            }
        ]
    },
    {
        "Id": "09a0101f-1fc9-4827-b870-a23400a2bd1e",
        "CategoryName": "test1",
        "Children": []
    },
    {
        "Id": "5bd75a56-994f-457f-8e65-a23400a35040",
        "CategoryName": "test2",
        "Children": []
    }
]

and the code to:

   var data = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: '/Inventory/GetcategoryTree',
                type: "GET",
                dataType: "json",
            }
            
        },
        schema: {
            model: {
                id: "Id",
                children: "Children"
            }
        }       
                    
                
            
        
    });

   $("#treeview").kendoTreeView({
        dataSource: data,
        dataTextField: "CategoryName"
    });

All looks fine but each node has the triangular graphic the ones with children but the ones without as well. What could cause this? See attached, the Best Selling Product"Best Selling Product" and "Current Inventory List" do not have a children, but the triangle still appears. But also, when you click on the node graphic, the graphic goes way( see attachment 2). 

Thanks

Svet

[Alexander Popov]

Hi Svetlin,

The triangle shows because the Children property is an array, even though that array is empty. I would recommend passing null instead of empty array or omitting the Children property completely.

Regards,
Alexander Popov
Telerik

[Svetlin]

Thanks a lot!