Question

在这里我在复选框上设置了方法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>

我们将为您提供帮助

Answer 1

我在这里找到了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

它对我有帮助，希望你们觉得有用

谢谢

如何使用Vue Js在Kendo UI网格列上为自定义复选框绑定事件？

1 个答案: