Kendo UI - Datepicker 未在 Kendo-Template 中呈现答案

【问题标题】：Kendo UI - Datepicker is not rendering inside Kendo-TemplateKendo UI - Datepicker 未在 Kendo-Template 中呈现
【发布时间】：2019-06-20 11:41:55
【问题描述】：

我们正在尝试使用 Kendo 模板在 Grid 扩展客户端详细信息模板中提供 Kendo Datepicker，以下是我们正在尝试的截图：


<script id="templateUserDefinedFieldsHealthPlan" type="text/x-kendo-template">
<div id="indider"> </div>
<input id="datePicker1" />
</script>

and the jquery script tp provide datepicker is mentioned below :
<script>
    $(() => {
        var template = kendo.template($("#templateUserDefinedFieldsHealthPlan").html());
        var result = template({});
        //alert(result);

        $('#indider').html(result);
        $('#datePicker1').kendoDatePicker();        
    });
</script>

但尽管有 Kendo DatePicker，但只有空白文本框正在呈现。请推荐

【问题讨论】：

标签： templates kendo-ui kendo-grid kendo-template

【解决方案1】：

问题是您也将<div id="indider"> </div> 元素放在了模板中。您需要将其放在模板之外，以将其替换为模板的内容。

查看sn-p。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>
  
  <div id="indider"></div>

  <script id="templateUserDefinedFieldsHealthPlan" type="text/x-kendo-template">
    <input id="datePicker1" />
  </script>
  
<script>
  $(() => {
    var template = kendo.template($("#templateUserDefinedFieldsHealthPlan").html());
    var result = template({});
    //alert(result);

    $('#indider').html(result);
    $('#datePicker1').kendoDatePicker();        
  });
</script>
</body>
</html>

【讨论】：