Looking to set up an event listener for a customized checkbox in a Kendo UI Grid column with Vue Js?

Can someone help me figure out why my method checkboxToggle() is not working when I click on the checkbox?

Here is the code snippet:

` Methods:{

 toggleTemplate(){
    let template =
       `<label class="switch" >
        <input type="checkbox" class="user-status" # if(Status){#checked#}                                         #               v-on:click="checkboxToggle()"/>
        <span class="slider round"></span></label>`;

    let compiledTemplate = kendo.template(template);
    return compiledTemplate.bind(this);

},
 checkboxToggle(){
        //TODO Grid checkbox template event binding not working
        alert("Checkbox Toggle !!!")
}

}

Another question

<kendo-datasource ref="localDataSource" :data="filteredUsers"
            :group='groupingFiled'>
            </kendo-datasource>
          <kendo-grid :height="500"  :data-source-ref="'localDataSource'"  :resizable="true"
            :filterable="false":sortable-allow-unsort="true":sortable-show-indexes="true"
            :scrollable-virtual="true" :pageable-numeric="false"
            :pageable-previous-next="false" :pageable-messages-display="'Showing {2} users'"
            :editable="'popup'":toolbar="[{name: 'excel', text: 'Excel'}]"
            :excel-file-name="'Motadata_UserListing.xlsx'" :excel-filterable="true" >
            <kendo-grid-column :selectable="true" :width="35"></kendo-grid-column>
            <kendo-grid-column :field="'UserId'" :hidden="true"></kendo-grid-column>
            <kendo-grid-column :field="'UserName'"  :width="150"></kendo-grid-column>
            <kendo-grid-column :field="'UserType'":width="180"></kendo-grid-column>
            <kendo-grid-column :field="'Role'" :width="120"></kendo-grid-column>
            <kendo-grid-column :field="'AssignedGroups'"  ></kendo-grid-column>
            <kendo-grid-column :field="'Email'":width="210" ></kendo-grid-column>
            <kendo-grid-column :field="'Description'":width="200" ></kendo-grid-column>

       <kendo-grid-column :field="'Status'"
                               :width="170"
                               :template="this.toggleTemplate()"></kendo-grid-column></kendo-grid>

I would appreciate any help with this issue. Thank you.

javascriptvue.jskendo-ui

Answer №1

Discovering a solution here:

In general, the Kendo UI templates do not have the ability to attach event handlers to the elements they render. To achieve the desired result, it's recommended to use native Vue templates instead:

Learn more about using single file components with Vue

Check out this example: View the code on CodeSandbox

This example was helpful for me, and I hope you find it useful too.

Thank you!

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

Will the useEffect hook re-run whenever the component renders if it includes props in its dependency array?

According to the React documentation on useEffect, it is recommended to include props in the dependency array of useEffect: import { useEffect } from 'react'; import { createConnection } from './chat.js'; function ChatRoom({ roomId }) ...

javascriptreactjsreact-hooks

How to utilize 'this' in a Vue template?

I'm feeling confused: I came across information stating that we can use this in Vue.js templates. But now I'm unsure about which one to use. I decided to experiment with some cases here: new Vue({ el: "#app", data: function() { return { ...

vue.jsvuejs2

Why aren't Material UI v5 styles being applied to the class?

I have been attempting to customize the MUI slider by applying styles using the className prop. However, I am facing an issue where the styles assigned to the main class are not being applied, but other styles such as the 'hover' state are workin ...

javascripthtmlcssreactjsmaterial-ui

Tabulator - Enhancing Filter Results Using a Second Tabulator

I've implemented a Tabulator that displays search results, here is the code: var table = new Tabulator("#json-table", { layout:"fitDataFill", //initialFilter:[{field:"title", type:"!=", value:"ignoreList.title"}], ajaxURL:tabUrl, ajax ...

javascriptjqueryjsontabulator

Basic exam but located in a place that is not valid

Here is a test I am working on: // import {by, element, browser} from "protractor"; describe('intro', () => { beforeEach(() => { browser.get(''); }); it('should have multiple pages', () => { let buttonOn ...

javascriptnode.jsseleniumtypescriptprotractor

The performance of Node.js Knex SQL insert queries leaves much to be desired

I have created a simple login system that performs the following actions: Verifies if the username exists (works fine) Adds the username to the database After adding the username, I retrieve the id of the added username. Everything works smoothly on the ...

javascriptmysqlsqlnode.js

What are the steps to make a counter-clockwise dial with jQuery Knob?

Is there a way to use multiple instances of jQuery.countdown? Can I create countdown circles using jQuery Knob? Find examples here and here. Using Multiple instances of jQuery.countdown <div data-countdown="2016/01/01"></div> <div data-co ...

javascriptjqueryhtmlcss

Use JavaScript to identify and color the intersecting area of two triangles that overlap on a webpage

I created two triangular divs using HTML and I am utilizing jQuery UI to enable them to be draggable. Now, my goal is to overlap these two triangles and change the color of the overlapping area to a different shade. Here is an example: https://i.sstatic. ...

javascriptjqueryhtmlcss

Timeout set to run indefinitely

Looking at the code snippet below, it seems to be running at a frame rate of 60 frames per second. If any button is clicked, the variable isjump will be set to true and the following code will start executing. The goal here is to exit the jump() function a ...

javascript

Issue: mongoose.model is not a valid function

I've been diving into several MEAN tutorials, and I've hit a snag that none of them seem to address. I keep encountering this error message: Uncaught TypeError: mongoose.model is not a function Even after removing node_modules and reinstalling ...

javascriptnode.jsmongoosewebpack

Reloading the page using ajax technology

What is the best way to handle logging out on a webpage without reloading the page? Thanks in advance!) My perspective: def logout(request): auth.logout(request) html = render(request, 'base.html') return html Using Ajax: $('a[hre ...

javascriptpythonhtmlajaxdjango

The jQuery fadeOut function modifies or erases the window hash

While troubleshooting my website, I discovered the following: /* SOME my-web.com/index/#hash HERE... */ me.slides.eq(me.curID).fadeOut(me.options.fade.interval, me.options.fade.easing, function(){ /* HERE HASH IS CLEARED: my-web.com/index/# * ...

javascriptjquerywindowshashfadeout

There was an error in the syntax: a semicolon is missing before the statement

During an ajax request, I encountered this error and upon reviewing it thoroughly, I am unable to pinpoint the cause. The following code snippet is where the issue seems to lie: $('#post_submit').click(function() { var poster_id = <?php echo ...

javascriptjqueryajaxsyntax-error

What is the process for displaying all cookies in node.js?

I recently wrote some node.js code to retrieve cookies for a specific route. router.get('/', function (req, res, next) { var cookies = req.cookies; res.render('cartoons', { Cookies: cookies, }); }); In my cartoons Jade file, the ...

javascriptnode.jsexpresscookiessession-cookies

What is the best way to implement a loading cursor when the Submit button is clicked?

Is there a way to incorporate a progress cursor into my code in order to notify the user to wait when they click the Submit button or the Upload Button while uploading multiple files? Below is an example of my form: <form action="" method="post" enct ...

javascriptjquerycsshtmlforms

Using AJAX for redirection following a successful PHP post without any errors

I am fairly new to javascript, but I have successfully posted form data to a php file. However, I am now encountering an issue with validations on the php file. What I need is for this ajax request to display the error message if any validation fails and t ...

javascriptphpjqueryajaxpost

Vue app showcasing array items through search upon button pressing

As I delve into learning Vue Js, I've encountered a bit of confusion. My goal is to showcase array elements from a Rest API based on the specific ID being searched for. For example: within my Json File are various individuals with unique IDs, and when ...

javascriptvue.js

unique navbar color transition effect specifically for the homepage

I have successfully created a function called changeColour in my code that changes the color of the navbar when scrolling past a certain point. However, I am encountering an issue where I only want this effect to be applied on the Home page. I would like a ...

javascriptcssreactjsscrollreact-router-dom

What are the best techniques for distinguishing the selected selector in jQuery?

$('#select_id1, #select_id2, #select_id3').change(function() { // Depending on which select element has changed, 'str' should be set accordingly. // For '#select_id1', 'str' should be equal to 'select_id ...

javascriptjquery

Utilize Material-UI's <Autocomplete /> feature to conduct searches using multiple parameters

Recently, I started delving into mastering Material UI and something has been on my mind. We are working with an array of objects as follows: const top100Films = [ { label: 'The Shawshank Redemption', year: 1994 }, { label: 'The Godfath ...

javascriptreactjsmaterial-ui