Kendo网格模板未正确显示Bootstrap Toggle，仅在列中显示复选框

Question

我正在使用Bootstrap Toggle插件，并尝试通过使用模板使其在kendo网格中正确显示，并且它显示的只是复选框而不是开关的外观，我知道插件可以正常工作因为如果我使用一张普通的旧桌子，它就会出现。

这是使用普通旧表的外观

在“选项”列中看到切换开关吗？多数民众赞成在我试图进入剑道网格选项列，但正如您在下面看到的那样，它使用剑道网格的外观

$(document).ready(function() {

  $('#grid').kendoGrid({
    height: 500,
    dataSource: colData,
    columns: [{
        field: "field",
        title: "Columns"
      },
      {
        field: "Options",
        title: "Options",
        template: hereItIs
      }
    ]
  });
});

function hereItIs() {
  var input = '<input type="checkbox" checked data-toggle="toggle" />';
  return input;
}
var colData = [{
    "field": "Apple"
  },
  {
    "field": "Orange"
  },
  {
    "field": "Pear"
  },
  {
    "field": "Plum"
  },
  {
    "field": "Grape"
  },
  {
    "field": "Banana"
  },
  {
    "field": "Watermelon"
  }
];

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css" />

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>


<div id="grid"></div>

关于为何切换开关无法在ken​​do网格中正确显示的任何想法？

Answer 1

我必须添加一个初始化程序才能使其正常工作：

$(function() {
  $('.bootToggle').bootstrapToggle();
})

我不得不添加一个类来知道它应该在哪里进行初始化。

<input type="checkbox" checked data-toggle="toggle" class="bootToggle" />

用笔查看result（我的第一支笔，所以希望它能工作） （在笔中，我更改为templateId而不是templateId，但这仅是因为我通常只执行mvc telerik-ui并习惯于templateId）...