The Dynamic Kendo Grid construction encountered an invalid template issue

In my project, I'm working on creating a dynamic Kendo UI grid with columns that are dynamically generated. However, I'm encountering an issue where the data is not rendering properly onto the grid.

The backend of this project involves using ASP.NET Core webAPI to fetch and return both dynamic columns and their corresponding data.

To set up the grid, I referred to a helpful article which guided me through the process (link provided).

After making a successful API call, I have implemented certain logic in the onSuccess event:

onSuccess: function (readings) {
    // Logic for processing data here
}

I have also included some additional functions in the code snippet above for handling specific scenarios such as formatting dates and generating the model for the grid.

Furthermore, the dataset retrieved from the webAPI contains information structured similarly to the examples shown above.

However, while testing the implementation, I encountered an error message related to unexpected tokens. This occurred even after attempting to modify the data source configuration within the script.

// Sample code snippet resulting in syntax error
dataSource: {
    //schema: {
    //    model: model
    //},
    data: readings,
    pageSize: 20
},

Answer №1

The issue lies in the way your JSON data property names are structured.

[{"Id":1000,"RadioChannel":"0D_A1","Units":"Gs","22May20190522PM":-367.25849333773,"22May20190521PM":-367.25849333773,"22May20190520PM":-368.24099331991,"22May20190519PM":-367.84799332704,"22May20190513PM":0.0,"22May20190509PM":-367.84799332704,"22May20190502PM":-367.45499333417,"22May20190501PM":-367.25849333773,"22May20190500PM":-366.37424335377,"22May20190459PM":-367.94624332526}]

By modifying your property names to begin with strings instead of digits, all your code will function correctly.

22May20190520PM => May2220190520PM

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

Error: The system encountered an issue while trying to access an undefined property 'find'

I've been working on developing the backend for a wishlist feature, but I've encountered an issue with my code. (node:19677) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'find' of undefined Despite trying to redefi ...

Capturing the unknown elements in a deeply nested array

I'm trying to create a helper function that will return 0 if an element in a nested array is undefined. The issue I'm facing is that when the first index fails and returns undefined, the function should catch errors at subsequent indexes but it&a ...

Eliminate all elements marked with a particular class when the user clicks outside of a

I am currently building upon a project that I previously started here. Essentially, what I'm doing is dynamically generating tooltip popups that appear next to a link when it is clicked. However, I now need these tooltips to close when any click even ...

How can React useEffects avoid an infinite loop when using setData()?

const [resourceType, setResourceType] = useState("posts"); const [data, setData] = useState(""); useEffect(() => { console.log("use effects called: " + resourceType); fetch(`https://jsonplaceholder.typicode.com/${resourceType}`) .then((result ...

Ways to extract data from a JSON file using jQuery and assign them as text values?

I have a data table that I serialize into JSON and then parse in my view using jQuery to access the values. However, when I use document.getElementById('Name').value = UserInfo.Name; the value of Userinfo.Name = null, I'm having trouble ...

Build a brand new root component in Vue JS

I am facing a challenge with destroying and re-creating the root application component. Below is my template structure: <div id="app"> {{ num }} </div> Here is the code I have implemented: if (app) { app.$destroy(); } else { ...

Utilize jQuery's addClass Method when Submitting a Form Using Ajax

When the form is submitted, I would like to add a class and display a loading animation before executing the AJAX request. However, when setting async to false in the AJAX call, the AJAX request will be executed first before displaying the loading animatio ...

Navigate the array and divide the elements into separate values

For a project I need to upload files, wherein the data is organized within an object like [5.76516834507, 50.8474898368], [5.76115833641, 50.8453698247]. The task here is to extract and store the first value as latitude: 5.76516834507 and the second value ...

JavaScript Filter Function: filtering based on multiple conditions (either one can evaluate to true)

I seem to be missing something very simple here. I am working with an array of objects that contains various information. Depending on user interaction, I want to filter out certain objects; let arr = [ {'num': 1, 'name': 'joe&a ...

What is the proper way to update a dropdown value in a React JS component?

Can you please guide me on how to assign a value in a dropdown in react js? I am retrieving the dropdown data after a delay of 3000 milliseconds and then I need to set a value in the dropdown. const App = ({ children }) => { const val = "ax"; const ...

What is the proper way to utilize the setState() function in ReactJS?

I am new to the world of ReactJS and I have been exploring the concepts of state and setState(). While trying to implement a name change using setState(), I found myself wondering where exactly in my code should I invoke the setState() method: Should I c ...

unable to retrieve the value of this.table property within a JavaScript class

In my JavaScript code, I have created a class that generates a MySQL model like so: class Model { constructor(options = {}, table) { this.options = options; this.table = table; this.create(); } create() { let queryString = `INSERT INT ...

Mastering NodeJS Promises: Efficiently Handling Multiple http.get Requests

I have recently started learning about NodeJS and Promise functionality, so please be patient with me if this question seems uninformed. My goal is to first retrieve a database of records and then verify that the links associated with these records return ...

Issue encountered with create-next-app during server launch

Encountering an error when attempting to boot immediately after using create-next-app. Opted for typescript with eslint, but still facing issues. Attempted without typescript, updated create-next-app, and reinstalled dependencies - unfortunately, the prob ...

When attempting to choose an option from a dropdown menu with Selenium, an error message stating "Element should have been select but was span" is encountered

While working on my c# selenium script, I encountered an issue when trying to select a value from a dropdown list. I kept getting an error message saying "Element should have been select but was span". It seems like there may be an error in the way I am se ...

I need assistance improving my poor JavaScript patterns and practices. Where should I turn for help?

After focusing primarily on back-end tasks for the past few years, it's become apparent to me that JavaScript (and CoffeeScript) projects have evolved significantly in my absence. Working mainly in a rails environment, my previous JavaScript/jQuery i ...

Creating a universally accessible handlebars helper in ExpressJS

I have a basic handlebars helper file located in helpers/handlebars.js: var hbs = require('express-handlebars'); hbs.registerHelper("inc", function(value, options) { return parseInt(value) + 1; }); Unfortunately, I am unable to utilize the ...

What is the solution for fixing the '$ not defined error' in a .js file with $ajax code?

var example = document.createElement("SCRIPT"); example.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"; var nodeScript= document.createTextNode("function test() {console.log('test message');$.ajax({ type: \"POST&bs ...

The URI entered is not valid: The parsing of the hostname failed. Electron Builder

Having an issue while trying to build an electron app using squirrel, even though the iconUrl is valid. Here is my package.json configuration: "squirrelWindows": { "iconUrl": "http://95.85.39.111:5005/skylog.ico" }, Error message received: An unhand ...

The window.addEventListener function is failing to work properly on mobile devices

Hey there! I am facing an issue in my JS code. I wrote this code because I want the menu to close when a visitor clicks on another div (not the menu) if it is open. The code seems to be working fine in developer tools on Chrome or Firefox, but it's no ...