Как использовать KendoDatePicker в x-kendo-template в .NET Core - PullRequest
Новая
       28

Как использовать KendoDatePicker в x-kendo-template в .NET Core

0 голосов
/ 23 мая 2019

У меня есть шаблон всплывающего редактора, который работает, когда я хочу добавить / отредактировать строку в моей сетке Kendo, и она привязана к свойствам модели.Проблема в том, что я не могу получить виджеты Kendo (например, datepicker или dropdownlist) для генерации внутри кендо-шаблона (в первую очередь желающего использовать taghelpers).Также я не смог использовать jQuery для преобразования входных данных в виджеты кендо на $(document).ready().Как я могу это сделать?

Моя сетка: 

<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>

1 Ответ

0 голосов
/ 24 мая 2019

Я решил проблему. Он включал использование синтаксиса 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>
...