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?

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

React TypeScript - creating a component with a defined interface and extra properties

I'm completely new to Typescript and I am having trouble with rendering a component and passing in an onClick function. How can I properly pass in an onClick function to the CarItem? It seems like it's treating onMenuClick as a property of ICar, ...

Exploring search capabilities within D3 graph nodes

After creating a JSON file with four tiers and utilizing D3.js's collapsing box format to visualize it (source: https://bl.ocks.org/swayvil/b86f8d4941bdfcbfff8f69619cd2f460), I've run into an issue. The problem stems from the sheer size of the J ...

Exploring the intricacies of JSON object retrieval

I'm currently working on a form that allows users to submit address details for a selected location. However, before submitting the form, I want to give the user the ability to preview the address that will be sent. The addresses are stored within a J ...

The pageSize in React's Material Table does not reflect dynamic updates

Currently, I am attempting to implement pagination for material table data using TablePagination. One issue I am facing is that the pageSize property, initially defined as a state variable, does not update when the selected pageSizeOptions change. Despite ...

Modifying CSS files in real-time

I've been attempting to dynamically change the CSS file, but I've run into an issue: Whenever I try to alter the style, it seems to work correctly while in "debug mode", showing that the changes are applied. However, once the JavaScript function ...

Leveraging $scope variables to dynamically generate new scope values within an Angular controller

I am currently faced with the challenge of using latitude and longitude data provided by the server, which is stored in $scope.Address. I am attempting to create a map object with these values as shown below. However, my current implementation is not fun ...

webdriverIO encountered an unhandled promise rejection, resulting in a NoSuchSessionError with the message "invalid session id

I am currently learning how to conduct UI testing using Jasmine and WebdriverIO in conjunction with NodeJS. Below is a snippet of my test code: const projectsPage = require('../../lib/pages/projects.page'); const by = require('selenium-we ...

npm: Generating debug and production builds while ensuring accurate dependency management

I am in the process of developing a single page application using TypeScript along with various other dependencies such as jQuery, immutable, lodash, and React. Each resulting module is integrated into the project using requirejs. My goal is to generate t ...

Having trouble accessing news feed with jQuery due to an unexpected token error when attempting to cross domains

I am attempting to access the Yahoo News feed from a SharePoint site, but it is causing a cross-domain access issue. Despite trying various solutions found on numerous websites and blogs, I still cannot resolve the problem. (I am executing this code in the ...

Can Nuxt's asyncData handle multiple requests with conditional statements?

I've been grappling with this issue for some time now. I understand how Nuxt asyncData can be used to make either one request or multiple requests, but is there a way to incorporate conditional logic for making multiple requests based on a query param ...

Scroll bar malfunction in Highcharts

I am struggling to get the scroll bar working so that all categories can be displayed. I have tried different approaches but haven't been able to figure out where I'm going wrong. See the code in action here: http://jsfiddle.net/manraj/7racxxu0/ ...

Error message: `$injector:modulerr - Angular JS` - Indicates an

Currently, I am trying to delve into the world of Angular JS by taking the codeschool course "Shaping up with angular js". The instructor in the videos emphasizes the importance of wrapping code in function(){}. However, upon attempting to do so, an error ...

Is there a restriction on the number of strings allowed in minimist?

Here is the output received from the code provided below. Question input and i are both true as intended, but why aren't project and p? They are defined in exactly the same way as input and i. $ bin/test --input -p { _: [], update: fa ...

I encountered an issue with the mui TextField component in React where it would lose focus every time I typed a single character, after adding key props to

I'm encountering an issue with a dynamic component that includes a TextField. Whenever I add the key props to the parent div, the TextField loses focus after typing just one character. However, when I remove the key props, everything works as expected ...

"Utilizing the power of Twitter Bootstrap and Snap.js for

I am currently working on integrating Snap.js by jakiestfu with Twitter Bootstrap. I have managed to make it work to some extent (I can slide the content and open a drawer through a click event). However, I am facing a challenge where the drawer content re ...

The change event for the select element is malfunctioning

Currently, I am deep diving into Nodejs with the second edition of the node cookbook. This book has caught my attention because it explains concepts using practical sample code, making it easier to grasp. The example code I am working on is related to Br ...

Bidirectional updates in AngularJS with CSS styling

On the backend, certain HTML elements store their position and size persistently and retrieve them when the page loads. These elements can be dragged and resized by users, with any updates needing to be saved on the backend for consistency across sessions. ...

Recording audio using Cordova and Javascript

Recently, I've been dabbling in creating a new app using Cordova, VueJs, and Onsen UI for VueJs. One of the main features I want to implement is the ability to use the microphone on Android or iOS devices to record audio and then send it to the Google ...

Guide to implementing a delay in JavaScript/jQuery code right after invoking an asynchronous function

Is there a way to execute an asynchronous function and then introduce a delay in the subsequent code execution to ensure that the asynchronous operation has completed? I want to avoid wrapping the following code in a function and delaying it, I simply ne ...

What is a more efficient method for obtaining the current URL in isomorphic React applications that works on both the client and server side?

Currently, I am working on developing an app utilizing a React Redux boilerplate that can be found here. One of the components requires access to the current URL upon mounting in order to generate a shareable link for social media. This component is acces ...