ng-grid is not compatible with cell templates referenced from files

Currently, I am utilizing angular-js along with ng-grid. In some instances, I need to employ cell-templates for certain columns. However, there seems to be an issue when attempting to reference external template-html files.

    columnDefs: [ { 
       field: "Foo", 
       displayName: "Foo", 
       cellTemplate: '<div class="ngCellText"><input type="text" ng-model="row.entity[col.field]"/> </div>' 
    }] // Working as expected

    columnDefs: [ { field: "Foo", displayName: "Foo", cellTemplate: 'cellTemplate.html' } ]
    // Error: [$parse:syntax] Syntax Error

Furthermore, upon navigating to a Plunkr example from the ng-grid site, it appears that issues persist in this scenario as well (you can click on the link to view the exact error message).

javascriptangularjsng-grid

Answer №1

It appears to function properly if you assign a different name to the external template than the one already in the $templateCache.

    $scope.gridOptions = {
    data: 'myData',
    columnDefs: [{
        field: 'name',
        displayName: 'Name'
    }, {
        field: 'age',
        displayName: 'Age',
        cellTemplate: "newCellTemplate.html"
    }]
    };

View the working example on Plunker

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

Executing a Parent Method from an Overridden Method in a Child Class

Is it possible to call a method from a parent class that has been overridden in the child class? Below is an example where I want to access the bar.my_name() method from within the foo.my_name() overriding method. function bar() { this.my_name = funct ...

javascriptclassinheritancemethodsoverriding

Struggling to figure out why BXSlider won't cooperate

I'm struggling to make BXSlider work on my website. Here is the code I have used. The JS/CSS files are properly linked and downloaded from the site with correct paths. $(document).ready(function(){ $(document).ready(function(){ $('.bx ...

javascriptjquerycss

Purge existing files from the directory, generate fresh files, and retrieve the newly generated files using Node.js

For my latest project, I am working on a node application with a unique goal: The concept is simple - the user provides a link to a webpage and specifies some keywords. The application then generates new web pages based on these keywords. For example, if ...

javascriptnode.jsasync-awaitpromisesettimeout

Combining Json, Jquery Autocomplete, and PHP to customize the displayed search options based on multiple items within the Json data

I have a PHP file that returns an array of results, with the 'Name' field being one of them. I want to customize my jQuery autocomplete feature to only search by the 'Name' field and suggest results based on that. However, once a sugges ...

phpjavascriptjqueryajaxjquery-ui

Vue alert - Cannot access indexOf property of a value that is undefined

After browsing through numerous similar issues on StackOverflow, none seem to address the specific problem I encountered... I have been smoothly working on a Vue JS project + Laravel until I suddenly encountered an error that seems unsolvable (even though ...

javascriptvue.jsvuesax

Unable to find module 'babel-runtime/core-js/object/define-properties'

I'm currently working on developing a Vue application plugin. However, I encountered an issue while attempting to implement the following code snippet: export default function(Vue){ Vue.auth = Authentication; Object.defineProperties(Vue.prot ...

javascriptvue.js

Is it possible for me to use the name "Date" for my component and still be able to access the built-in "new Date()" functionality?

Currently following the NextJS tutorial, but adding my own twist. In the NextJS example, the custom component is named "Date" (/components/date.js) and does not utilize the built-in Date() object in processing, making it unique to the file. In my scenario ...

javascriptreactjsdatenext.js

Sending data from jQuery to an AngularJS function is a common task that can be accomplished in

In my Controller, I have a function that saves the ID of an SVG path into an array when a specific part of the image.svg is clicked. $(document).ready(function(){ var arrayCuerpo=[]; $('.SaveBody').on("click", function() { ...

javascriptjqueryangularjsarrays

Is there a way to convert this JSON object into HTML table code?

I've been working on tweaking a code snippet I came across, but I'm struggling to get it to function the way I desire. Here is the current Javascript code: function JsonUtil() { /** * Given an object, * return its type as a string. ...

javascripthtmljsonrecursionhtml-table

Generate a JSON file using Node.js

I've been honing my skills with Node.js and express by working on a project involving a JavaScript object that generates a dropdown list. The process has been smooth so far. Recently, I integrated mongoose to create a model and saved it. Now, in my co ...

javascriptnode.jsexpress

Restricting the quantity of data being inserted into a MySQL database table

Currently, I am in the process of developing a localhost website using HTML, CSS, JavaScript, PHP, and MySQL. Within this website, there is a specific section dedicated to appointments. The appointment section features a form requesting information such as ...

javascriptphphtmlmysqlsql

Troubleshooting: Node.js Express Server GET Handler Failing to Function

Recently, I've been attempting to build a GET request handler in Express.js. Here's the snippet of code I've put together: // include necessary files and packages const express = require('./data.json'); var app = express(); var m ...

javascriptnode.jsjsonhttpexpress

I am facing an issue where the group-hover feature does not seem to be functioning properly

My NextJS app seems to be having trouble with group-hover functionality. I've experimented with different ways of declaring group-hover at various levels, but it doesn't seem to be working properly. Interestingly, when I changed group-hover to ...

javascriptreactjsnext.jstailwind-css

Incorporating min.js file into a ReactJS application

I have received a min.js file from a third-party source and now I am looking to integrate it into my existing ReactJS project. While exploring some sample codes on how to start using their third-party features, I noticed that each example follows a simila ...

javascriptreactjs

Creating a new SBT project for AngularJS configuration

I am working on a backend system using Scala and Play, and now I want to develop a standalone frontend project for AngularJS. Can anyone provide a tutorial or a simple example that demonstrates how to set up an SBT project specifically for AngularJS? Mos ...

angularjsplayframeworksbt

Avoid the problem of animations triggering twice when clicking

Hey there, I am facing an issue with my slider. If you could take a look at this website , you will notice that after clicking on the arrows, the slider behaves asynchronously. It changes speed rapidly at times and then slows down, repeating this pattern ...

javascriptjqueryclicksliderinfinite-loop

Troubleshooting issue with C# Ajax success response not triggering alert

I am facing an issue where the alert box for success does not show even though the code successfully inserts contact details using ajax and C#. Strangely, when I debug through the JavaScript debugger in Chrome, the alert pops up as expected. Here is the co ...

javascriptc#jqueryajax

Transforming field names in JSON using AngularJS $resource

I am currently working on an AngularJS project that interacts with data through an API. During the implementation of the 'create' functionality using $resource, I encountered a challenge with naming conventions. While I use camelCase, the API onl ...

jsonapiangularjscamelcasing

Passing downloaded images from a Parent component to a Child component in a route without the need for a new

Currently, I am in the process of developing a blog application using Firebase along with Angular and Ionic. As part of this project, when retrieving the list of blogs, I make a request to Firebase to obtain the download URL for each blog thumbnail image. ...

angularjsionic-frameworkrxjsfirebase-storage

Tips on saving stimulsoft report js onto a server using Angular

I am working on a report designer component and have assigned a method to the onSaveReport event. However, I am encountering an issue where the member of my component is showing as undefined. options: any; designer: any; public document: Report ...

javascriptangulartypescriptstimulsoft