How can we bind event for custom checkbox on Kendo UI Grid Column using Vue Js?

Question

here I set a method checkboxToggle() on checkbox , but don't know why it's not working , when I click on the checkbox it doesn't call that method , WHY?

Here is my code:

` 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 one

<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>

Help will be appreciated

Answer 1

I found a Sol here -:

Generally speaking, the Kendo UI templates are not able to bind the event handlers to the rendered elements. Thus, to achieve the desired outcome, we should use the native Vue templates:

https://www.telerik.com/forums/how-can-we-bind-event-for-custom-checkbox-on-kendo-ui-grid-column-using-vue-js

use this example-: https://codesandbox.io/s/840nl43698

it helps me , hope you guys find it usefull

Thanks