The children of the KendoUI treeview are showing up as null

Within my KendoUI treeview setup, the main nodes trigger a call to an MVC controller that checks for a nullable ID parameter before utilizing a different model.

When accessing the URL: http://localhost:2949/Report/GetReportGroupAssignments

The resulting JSON data displayed is as follows:

[
    {"Id":1,"ReportGroupName":"Standard Reports","ReportGroupNameResID":null,"SortOrder":1},
    {"Id":2,"ReportGroupName":"Custom Reports","ReportGroupNameResID":null,"SortOrder":2},
    {"Id":3,"ReportGroupName":"Retail Reports","ReportGroupNameResID":null,"SortOrder":3},
    {"Id":4,"ReportGroupName":"Admin Reports","ReportGroupNameResID":null,"SortOrder":5},
    {"Id":5,"ReportGroupName":"QA Reports","ReportGroupNameResID":null,"SortOrder":4}
]

The structure of my MVC controller method is as follows:

public JsonResult GetReportGroupAssignments(int? id)
{
    var model = new List<ReportGroup>();
    var defModel = new List<ReportDefinition>();

    try
    {
        if (id == null)
        {
            model = _reportService.GetReportGroups("en-us").ToList();
            return Json(model, JsonRequestBehavior.AllowGet);
        }
        else
        {
            defModel = _reportService.GetReportDefinitions().Where(e=>e.ReportGroupID ==Convert.ToInt32(id)).ToList();
            return Json(defModel, JsonRequestBehavior.AllowGet);
        }   
    }
    catch (Exception ex)
    {
        Logger.Error(ex, "Error loading LoadReportList.");
        return null;
    }
}

Also, the JavaScript code related to this scenario looks like this:

var serviceRoot = "/Report";
homogeneous = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: serviceRoot + "/GetReportGroupAssignments",
            dataType: "json" 
        }
    },
    schema: {
        model: {
            id: "Id",
            hasChildren: "Id"
        }
    }
});

var treeview = $("#treeview").kendoTreeView({
    expanded: true,
    dragAndDrop: true,
    dataSource: homogeneous,
    dataTextField: "ReportGroupName" 

}).data("kendoTreeView");

In investigating the issue further, it appears that child records have a "load" method triggered behind the scenes when clicking on the parent node. To display children properly, the ID needs to be passed in order to fetch data from another model in the database (where ID corresponds to ReportGroupID).

If I click to expand "Standard Reports," I notice that all child elements appear as undefined. How can I rectify this issue?

https://i.sstatic.net/Vz6d4.png

Update: Information regarding the ReportDefinition class:

public class ReportDefinition {
    public override int Id { get; set; } 
    public string ReportKey { get; set; } 
    public string ReportName { get; set; } 
    public int? ReportNameResID { get; set; } 
    public string ReportDef { get; set; } 
    public int? ReportDefinitionResID { get; set; } 
    public string ReportAssembly { get; set; } 
    public string ReportClass { get; set; } 
    public int ReportGroupID { get; set; } 
    public int AppID { get; set; } 
    public int SortOrder { get; set; } 
    public bool IsSubReport { get; set; }
} 

Answer №1

Your issue seems to stem from the fact that the ReportDefinition class is lacking a key property called ReportGroupName, leading the TreeView to show 'undefined'.

To resolve this, consider including the following Property within your ReportDefinition class:

public class ReportDefinition {

    // Other existing Properties 

    // Don't forget to add this crucial property
    public string ReportGroupName { get; set; }

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Azure experiencing issue with MUI Datepicker where selected date is shifted by one day

I have developed a unique custom date selection component that utilizes Material UI and Formik. This component passes the selected date value to a parent form component in the following manner: import React from 'react'; import { useField } from ...

Guide to adding customized CSS and JavaScript to a specific CMS page on Magento

I'm trying to incorporate a lightbox for video playback on a specific page of my CMS. I've placed my CSS file in JS/MY THEME/JQUERY/PLUGIN/VENOBOX/CSS/myfile.css and the JS files in JS/MY THEME/jquery/plugins/venobox/js/myfile.js, but it doesn&ap ...

What is the best way to reset the state in React prior to the render being called?

Whenever I click on a copy icon, a popup is displayed. This happens because the state "showPopup" is set to true upon clicking the copy icon, and the render function recognizes this and shows the popup. The popup will close automatically if I click anywher ...

Accessing audio files in a directory using ajax

I need assistance with implementing a feature in my mp3 music player code. I want the player to fetch songs from a directory instead of using the page's URL. var songs = [{ { title: 'Blackout City', artist: 'Anamanaguchi&ap ...

Having trouble getting a NodeJS sample app to start up because it can't locate the 'config' file?

I am currently delving into the world of Node.js and have been attempting to launch a sample application that I recently acquired from a git repository: https://github.com/madhums/node-express-mongoose-demo Despite diligently following all the provided i ...

Tabulate the number of items in an array based on the month and

I have received JSON data with dates indicating the creation time of multiple parcels. I want to analyze this data and calculate the total number of parcels created in each month. I am new to this process and unsure about which thread on Stack Overflow can ...

What could be causing my express router.get endpoints with multiple paths to only render text?

Currently, I am in the process of configuring a password reset flow using Pug (formerly Jade) and Express. Oddly enough, GET requests that contain URLs with multiple appended paths are causing my Pug view files to render with only text. The images and sty ...

Preventing Unwanted Scroll with jQuery

I'm currently working on a project where I have several description blocks that are meant to fade in when the corresponding image is clicked. The fading effect works fine, but there's an issue with the page scrolling up each time a new image is c ...

The Vue.js component was unable to retrieve the data

I am facing an issue with accessing data inside a simple component. Here is the code for my component: <template> <!-- success --> <div class="message-box message-box-success animated fadeIn" id="message-box-success"> <div cl ...

Prevent the event from spreading down to the child elements

I believed I had a solid understanding of the concept of event bubbling, but now I am starting to doubt my grasp on it. I designed a semi-modal dialog like so: <div class="context-menu"> <div class="menu"> … </div> < ...

Is it possible for Netbeans 7.3 to debug a PHP script when triggered by a JSON request?

In my Netbeans 7.3.1 setup, I usually have no issues debugging PHP files with Xdebug when my site project is structured to generate the site directly from PHP code. However, I'm currently working on a site that consists mostly of HTML files and only h ...

Is it possible to transfer a JSON object from Silverlight to JavaScript?

Is it possible to pass a JSON object directly from Silverlight to JavaScript, or does it have to be serialized first? ...

Ways to resolve - Error: Unable to access 'comments' property of null

I am currently working on developing a blog web application and I am facing an issue with enabling user comments on posts. Despite extensive research and attempts to troubleshoot by searching online, I have not been able to find a solution. I have been str ...

Angular 12: How to detect when a browser tab is closing and implement a confirmation dialog with MatDialog

I have a scenario where I am checking if the browser tab is closed using the code below. It currently works with windows dialog, but I would like to incorporate MatDialog for confirmation instead. @HostListener('window:beforeunload', ['$eve ...

Can Django capture and store the name of the active user's logged-in browser in the database?

In Django, we already have session details stored in django_session and last_login in the auth_user table. However, I am interested in storing the browser name when a user logs in using their browser in the database. Currently, I can retrieve the browser ...

Utilize an unmanaged assembly as a point of reference

Currently, I am facing an issue with referencing a managed DLL in my .NET project without having to copy it into the output directory. The objective is for my program to run the DLL from its installed location, wherever that may be. However, the problem ar ...

Continuously encountering a Login Required message while attempting to upload a file on Google Drive

I am currently developing a chrome extension that is designed to intercept specific downloads, like .doc and .docx files, and automatically upload them to a designated folder in Google Drive. Below is the manifest for this extension: { // Manifest det ...

FNS Date-Timezone Abbreviation

Is there a way to shorten the Australian Eastern Daylight Time abbreviation to just AEDT? When I use it currently, it displays as 11/11/2022 15:29:25 Australian Eastern Daylight Time. I would like it to show as 11/11/2022 15:29:25 AEDT import { formatInT ...

Having trouble retrieving the value of the second dropdown in a servlet through request.getParameter

I am facing an issue with storing the value of the second dropdown in a servlet after utilizing an ajax call in Java to populate it based on the selection made in the first dropdown. While I was able to successfully store the value of the first dropdown ...

Accessing an object's property within a mapped array in a Next.js application is possible

Currently, I am attempting to iterate through an array of objects and extract the link property as a <li></li> element. However, I am facing an issue where nothing is being returned: import { useState, useEffect } from "react"; import ...