Kendo网格模板没有正确显示Bootstrap，只显示列中的复选框

Question

我正在使用Bootstrap Toggle插件，并试图通过使用模板使它在剑道网格中正确显示，它所显示的只是复选框，而不是开关的外观，我知道插件工作正常，因为如果我使用一个普通的旧表，它就会出现。

下面是使用普通旧表的样子

​

​

看到选项列中的切换开关了吗？这就是我想要进入的kendo网格选项列，但正如您在下面看到的，它是如何使用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>

​

你知道为什么剑道网格中的切换开关没有正确显示吗？

Answer 1

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

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

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

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

制作了一支钢笔来查看结果 (我的第一支笔，所以我希望它能用)(在笔中，我改为templateId而不是模板，但这只是因为我通常只使用mvc telerik-ui，并且习惯了templateId).