KendoGrid encountered a JavaScript runtime error due to an invalid template

Having some trouble navigating the Kendo world and encountering an issue with a grid that is set to a JSON array data source.

An error message stating "JavaScript runtime error: Invalid template" is displayed, specifically referencing null values in the data. Does this mean the data did not bind properly?

Despite seeing the column headers, no rows are showing up in the grid. It should be noted that there are no ID fields in the data as it is derived from a temporary table generated by a SQL view.

A function named populateGrid is used to populate the Kendo grid with data retrieved from a server. However, the current approach seems to result in missing row data while the column headers are rendered correctly.

The error details suggest issues with the template being used for rendering the grid. Here is a snippet of the error:

`Unhandled exception at line 11, column 6788 in
http://--------:51392/WW/js/kendo.web.min.js 0x800a139e - JavaScript
runtime error: Invalid template:'<tr data-uid="#=data.uid#"
role='row'><td  role='gridcell'>#=data.Account
Num==null?'':data.Account Num#</td><td 
role='gridcell'>#=data.address==null?'':data.address#</td><td 
role='gridcell'>#=data.Arb Location==null?'':data.Location#</td><td 
role='gridcell'>#=data.WNum==null?'':data.Num#</td><td`

Any assistance or feedback on resolving this issue would be greatly appreciated. Thank you!

javascriptsqljsonkendo-uikendo-grid

Answer №1

It seems like the issue with the generated template stems from having spaces in your data field names. For example, if you have a field named 'Account Num', the template is trying to access "data.Account Num", which won't function correctly.

To troubleshoot this problem, consider removing spaces from your data field names initially. If you prefer to keep the spaces, another option would be manually entering the columns instead of relying on auto-generation.

Here's how you can handle spaces:

Start by setting up your datasource scheme with fields as follows:

schema: {
    data: "Data",
    model: {
        fields: {
            "Name": { type: "string" },
            "Account Num": { type: "string" }
        }
    }
}

Then, define your columns with templates like this:

columns: [
   {
      field: "Name",
      title: "Name",
      template: "#=data['Name']==null?'':data['Name']#"
   },
   {
      field: "Account Num",
      title: "Account Num",
      template: "#=data['Account Num']==null?'':data['Account Num']#"
   }
]

The original issue was Kendo attempting to generate the template automatically, but it was referencing

data.Account Num

This approach doesn't work in JavaScript, so manually defining each column's template to access

data['Account Num']

should result in proper functionality and achieve the desired outcome.

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

Exploring JSON objects in React for improved search functionality

Hey there! I'm working on implementing a search bar that updates the list of JSON entries based on user queries. Below is the code snippet that displays the video list (<Videos videos={this.state.data}/>). Initially, when the page loads, I have ...

javascriptreactjs

What could be the reason for NPM failing to work following an update?

Just two days ago, I updated NPM and now it's suddenly not working on my Windows 10 20H2 platform. Every action I take results in the same error message: C:\Users\ethan>npm internal/modules/cjs/loader.js:883 throw err; ^ Error: Canno ...

javascriptnode.jsnpm

Incorporating the Acts_as_votable gem alongside Angularjs for interactive voting functionality

I'm trying to figure out how to implement Acts_as_Votable in an Angular template for a car voting system. Despite my efforts, I can't seem to display the vote count when rendering the list in Angular. I think I may need to establish some kind of ...

javascriptruby-on-railsangularjsjsonacts-as-votable

Is it possible for numerous identical components to trigger the display of the identical modal on a single webpage?

I am currently utilizing Vue in my project and I have a component that displays a button. When this button is clicked, it triggers a modal to open which is also part of the same component. The functionality works as intended. However, if there are multipl ...

javascriptvue.jsbootstrap-vue

Switching the default z-index for child elements within an HTML container

According to the specification, elements are typically drawn "in tree order" for in-flow, non-positioned elements of similar block level or float status and identical z-index. This means that elements declared last in the HTML markup appear on top. But wha ...

javascripthtmlcssz-index

By default, the D3 hierarchy will collapse to the first level

I've been working on code to create an indented tree structure. My goal is to initially collapse the tree and show only the first level children or the root node. I tried a few different approaches, but none were successful. The current portion I have ...

javascripthtmlcssd3.jssvg

Why won't my navigation bar stay in place when I scroll down on the screen?

I'm trying to create a sticky navigation bar that becomes fixed when the user scrolls down to 200 pixels, but it's not working properly. I want it to behave like in this example: import React,{useState,useEffect} from 'react' functio ...

javascripthtmlreactjstailwind-css

Retrieve an array of information from a firestore database query

I am encountering an issue while trying to retrieve information about all users who are friends of a specific user. I have attempted to gather the data by pushing it to an array and then returning it as a single JSON array. However, it seems that the dat ...

javascriptreactjsasynchronousgoogle-cloud-firestore

Discover how ReactJS can dynamically display or hide div elements based on specific conditions being met within JSON data

How do I show or hide a div based on a condition in React, using data from a JSON array? I have implemented the code below, but changing the value of isPassed={resultPass.pass} to isPassed={resultPass.failed} still displays the result as pass. I came acro ...

javascriptreactjsif-statementprop

The data in Next.js getStaticProps does not update or refresh as expected

As I recently transitioned to working with Next.js, I have encountered several challenges. One issue that arose was related to the use of useEffect in React compared to its behavior in Next.js. In my index file, I have implemented the following code: impo ...

javascriptnext.js

Guide on transforming an array of objects into a fresh array

I currently have this array: const initialData = [ { day: 1, values: [ { name: 'Roger', score: 90, }, { name: 'Kevin', score: 88, }, { name: 'Steve&apo ...

javascripttypescriptecmascript-6

Tips for invoking the href function in jwplayer with individual arguments

I need assistance with configuring jwplayer to load a list of href links one by one. Each href link includes a function that needs to be triggered automatically with specific parameters passed to JavaScript. Below is the code snippet I am currently worki ...

javascriptphpjqueryhtmljwplayer

Feeling puzzled by the code snippet for vuejs-templates using webpack-simple?

Just starting out with javascript. Learning Vue.js through example reading. But feeling confused by the code snippet from vuejs-templates/webpack-simple. Specifically line 25 data () { return { msg: 'Welcome to Your Vue.js App' ...

javascriptvue.jsvue-component

Why is my Ajax utilizing PHP _POST not functioning as expected?

I am facing an issue with the JavaScript code below: <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script> <script> function deletUserInfo(id_user){ console.log(id_user); ...

javascriptphpjqueryajaxpost

Transforming original ASCII text containing UTF-8 encoded characters in the form of backslash escapes

I am currently using this Python code to collect Persian tweets: #!/usr/bin/env python # -*- coding: UTF-8 -*- import sys import tweepy import json import os consumer_key ="xxxx" consumer_secret ="xxxx" access_key = "xxxx" access_secret = "xxxx" auth = ...

pythonjsontwitterencodingutf-8

Utilize a script in the node package.json file to execute another script while including an additional parameter; for example, incorporating the mocha watcher

Is there a way to reuse a command already defined in a 'script' section of node's package.json? Let's consider the following practical example: Instead of having an additional -w flag on the watch script: "scripts": { "t ...

jsonnode.jsnpmmocha.js

I encountered an issue in reactjs where I received the error message: TypeError: this.state.coords.map is not functioning properly

Here is the code snippet I wrote: import React, { Component } from 'react'; class LocationApp extends Component { constructor(props){ super(props) this.state = { coords:[], error:[], } } ...

javascriptarraysreactjsfunctiondictionary

Ways to handle the res.locals object in a request manipulation

I am currently utilizing node-restful in my project and I am looking to replace my date properties with the help of moment. However, when I attempt the following approach; var QuestionResource = app.user = restful.model('Question', questionSche ...

javascriptnode.jsexpressmomentjs

Choose a specific element using jQuery based on a class that is shared by several elements

I am looking to target an element with the class 'submenu-expand' and apply an additional class to it. $('.menu-item').on('click',function(){ $('.submenu-expand').toggleClass('expanded') }) While this cod ...

javascriptjquery

"Troubleshooting the lack of functionality in nested ajax calls, click events, or event

Initially, a navigation click event was created: $('#inner-navigation li a') .on('click', function (e) { e.preventDefault(); AjaxNavUrl.checkURL(this.hash); }); This event triggers an ajax call and respo ...

javascriptjqueryajax