如何在 .NET Core 的 x-kendo-template 中使用 KendoDatePicker

Question

当我想在我的剑道网格中添加/编辑一行并且它绑定到模型的属性时，我有一个弹出编辑器模板工作。问题是我无法在 kendo-template 中生成 Kendo 小部件（例如 datepicker 或 dropdownlist）（主要是想使用 taghelpers）。我也无法使用 jQuery 将输入转换为 $(document).ready() 上的 kendo 小部件。我该怎么做？

我的网格：

<kendo-grid name="accountsGrid" height="500" on-detail-init="onDetailInit">
<datasource type="DataSourceTagHelperType.Ajax" page-size="10">
    <transport>
        <read url="?handler=Accounts&id=@Model.Id" data="getAntiForgeryKeyValue" type="POST" />
        <create url="?handler=CreateAccount&id=@Model.Id" data="getAntiForgeryKeyValue" type="POST" />
        <update url="?handler=EditAccount&id=@Model.Id" data="getAntiForgeryKeyValue" type="POST" />
    </transport>
    <schema>
        <model id="AccountId">
            <fields>
                <field name="LastUpdateDate" type="Date"></field>
            </fields>
        </model>
    </schema>
</datasource>
<columns>
    <column field="Id" hidden="true" />
    <column field="AccountName"
            title="Account Name"
            header-html-attributes='HeaderHtmlAttribute(title:"Account Name")' />
    <column field="LastUpdateDate"
            title="Last Updated"
            format="{0:MMMM dd, yyyy}"
            header-html-attributes='HeaderHtmlAttribute(title:"Last Updated")' />
    <column title="Actions"
            header-html-attributes='HeaderHtmlAttribute(title:"Actions")'
            html-attributes='new Dictionary<string, object> {["class"] = "center-cell" }'>
        <commands>
            <column-command name="edit" />
        </commands>
    </column>
</columns>
<toolbar>
    <toolbar-button name="create" template="getTelerikButton('Add')" />
</toolbar>
<editable mode="popup" template-id="accountEditorTemplate" />
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
</pageable>
<scrollable enabled="true" />

我的编辑器模板：

<script id="accountEditorTemplate" type="text/x-kendo-template">
<div class="row editor-padding">
    @*Account Details*@
    <div class="col-md-6 col-xs-12">
        <h5 class="editorTemplateHeader">Account Details</h5>
        <div class="k-edit-label">
            <label for="AccountName">Account Name</label>
        </div>
        <div class="k-edit-field">
            <input required type="text" class="k-input k-textbox" name="AccountName" validationmessage="Account Name is required" maxlength="8" />
        </div>
        <div class="k-edit-label">
            <label for="Description">Description</label>
        </div>
        <div class="k-edit-field">
            <input type="text" class="k-input k-textbox" name="Description" maxlength="100" />
        </div>
        <div class="k-edit-label">
            <label for="ExpirationDate">Expiration Date</label>
        </div>
        <div class="k-edit-field">
            @*I would like to do this, but nothing appears*@
            <kendo-datepicker name="ExpirationDate"></kendo-datepicker>
        </div>
    </div>
</div>

Answer 1

我解决了这个问题。它涉及使用data- 语法。以下是解决方案：

<div class="k-edit-field">
    <input required type="text"
        name="ExpirationDate"
        data-type="date"
        data-bind="value:ExpirationDate"
        data-role="datepicker" 
        validationmessage="Expiration Date is required" />
</div>