Invalid template detected within the Kendo dropdown component

I am trying to create a template that will only be displayed if the data value is "Low". This is how I have set up my template column:

template: '# if( data=="Low" ){#<span><i class="fa fa-square blue"></i> <span># } '

Unfortunately, when I try to display it, I get an error message:

Error: Invalid template:'# if( data=="Low" ){# # } #: data #' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput=''; if( data=="Low" ){;$kendoOutput+=' '; };$kendoOutput+=': data ';;$kendoOutput+=;}return $kendoOutput;'

I am new to this and would appreciate any help on resolving this issue. Thank you.

Answer №1

Don't forget to close the template with a # symbol at the end, it should look like this:

template: '# if( value=="High" ){#<span><i class="fa fa-square red"></i> <span># } #'

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 message: "The variable 'bitmap' is not defined in jQuery/CreateJS $.ajax"

I recently acquired a product designer that uses CreateJS and jQuery. Within the code, there is a function called UrlLoader which wraps an $.ajax call. function UrlLoader(params) { $.ajax({ url: url, type: 'POST' ...

Adjust the width of the dropdown menu for the v-combobox

I am currently working on creating a multiple search filter similar to the one found in Gitlab dashboard. https://i.sstatic.net/YHivl.png For this task, I am utilizing Vuetify's v-combobox like this : <v-combobox id="mycombo&quo ...

Accessing the value of a field using JavaScript/jQuery

Welcome to my page! I am working on obtaining the current Start and Finish date values. I plan to add a button for users to click, which will then retrieve all dates and display them somewhere on the page. But for now, I just need a way to access the date ...

When the filter feGaussianBlur is applied to an SVG circle, it disappears on Safari but not on Chrome

While implementing the filter with feGaussianBlur to an SVG circle, I encountered a peculiar issue. It works perfectly on Chrome, but unfortunately, the circle disappears when viewed on Safari. https://i.sstatic.net/k916B.png https://i.sstatic.net/5Bfp9. ...

Is there a way to use ng-click to switch the ng-src of one image with that of another?

*I made updates to the plunkr and code to reflect my localhost version more accurately. It turned out that the AngularJS version was not the issue even after fixing the previous plunkr.* Let me start by saying that I am facing some challenges with Angular ...

What is the best way to pass an array as a parameter in Angular?

I have set up my routing module like this: const routes: Routes = [ { path: "engineering/:branches", component: BranchesTabsComponent }, { path: "humanities/:branches", component: BranchesTabsComponent }, ]; In the main-contin ...

Attributes requested with jQuery JavaScript Library

Is there a way to dynamically add extra key-value pairs to the query string for all requests sent to the web server? Whether it's through direct href links, Ajax get post calls or any other method, is there a generic client-side handler that can handl ...

Achieving fixed width and automatic height for images in Next JS: a guide

I am struggling to showcase a list of images with a fixed width while utilizing the original image height set at 100%. A similar inquiry can be found here, yet it remains unanswered. I have gone through the responses shared here and attempted them. The im ...

The navigation pills in Bootstrap 5 are experiencing functionality issues

Hey everyone, I'm currently tackling a new project and running into an issue with Bootstrap 5 nav pills. I need them to toggle between column and grid view, but they aren't behaving as expected (content displays fine on the first pill, but nothin ...

What is the best way to incorporate a fadeIn animation to a text in jQuery?

Looking for help with appending the fadeIn() jQuery function to a string that increments an integer within a paragraph. I attempted concatenation without success. Any recommendations on how to solve this issue? $p.text(parseInt($p.text(),10) + 1); ...

What are the best practices for protecting a web application with login and database in the year 2022?

My knowledge of security is outdated and I am looking to update my skills in full stack development. Currently, I am exploring Oauth2, JWT, Next.JS, Auth0, and more, but I am struggling to integrate all these components together. Please bear with me as I m ...

Routes inoperative as intended

When using a standard expressroute for this login, I have noticed that even if the req.body.password is incorrect, I am still getting redirected to '/login'. router.post('/student/login', (req, res) => { if (req.body.password === ...

Comparing Angular 2 with Angular.js, React.js, and Typescript

Hello there, I am a fresh-faced web developer looking to create a modest website for my personal use. However, my knowledge is limited when it comes to JavaScript and jQuery concepts. In order to expand my skills and build an enhanced website, I decided ...

Tips for passing multiple items for the onselect event in a ng-multiselect-dropdown

I've got a multi-select dropdown with a long list of options. Currently, when I choose a single item, it triggers the Onselect event and adds data from the newArrayAfterProjectFilter array to the myDataList based on certain conditions in the OnselectE ...

Tips for concealing the fourth child element within a list item

I'm facing an issue with a list of items rendered in my react component where I need to hide the 4th child of the list item. Here is the relevant html code: <div class="ExpandableContent-Content MyAccountTabList-ExpandableContentContent&qu ...

Add a jQuery calendar to a Gridview within a "ForEach" loop

This is my PHP code for creating a gridview table with multiple rows of date input fields. foreach ($form_data['srms'] as $srms) { echo '<tr>' . "\n"; echo '<td><input type="text" id="datepicker" nam ...

ReactJS error: Unable to access the setState property

As a newcomer to ReactJS, I have been facing some challenges. I recently familiarized myself with the ES6 syntax, and it claims that the following pieces of code are equivalent in meaning. 1. YTSearch({key: API_KEY, term: 'nba'}, function(vide ...

Triggering event selection changes in AngularJS Slider Range

Currently, I am utilizing the Angular slider from PopSugar for selecting a range between minimum and maximum values. However, I am facing an issue where I am unable to trigger a controller function when the slider stops moving. Is there a way to implement ...

Material UI in React: A lengthy typography body necessitates a line break

Currently using the Material UI grid system to create two columns side by side. However, due to the Lorem ipsum text length, the right column is pushed down to a new row. Shortening the text will allow it to be displayed properly in two columns. <Grid c ...

Alter the URL for Jquery AJAX post by utilizing radio buttons

I have a product search box that allows users to search by Cartridge Name or Printer Name. These are different SQL queries, so I have created separate PHP files for each query. However, I am facing challenges in using jQuery to check the value of the radio ...