时间戳

首页 > 解决方案 > 我们如何使用 Vue Js 为 Kendo UI Grid Column 上的自定义复选框绑定事件？

javascript - 我们如何使用 Vue Js 为 Kendo UI Grid Column 上的自定义复选框绑定事件？

问题描述

在这里我checkboxToggle()在复选框上设置了一个方法，但不知道为什么它不起作用，当我单击复选框时它不会调用该方法，为什么？

这是我的代码：

` 方法：{

 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 !!!")
}

}

另一个

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

帮助将不胜感激

标签： javascriptvue.jskendo-ui

解决方案

我在这里找到了一个 Sol -：

一般来说，Kendo UI 模板无法将事件处理程序绑定到呈现的元素。因此，为了达到预期的结果，我们应该使用原生的 Vue 模板：

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

使用这个例子-： https ://codesandbox.io/s/840nl43698

对我有帮助，希望大家觉得有用

谢谢

推荐阅读