Question

如何使用Listview编辑模板中的Kendo UI自动完成文本框？尝试应用自动完成选项时，文本框不带它。要求还包括服务器端过滤选项。这需要在ASP中实现.NET MVC5 Web应用程序。

Answer 1

我正在为Jquery开发Kendo UI，并且实现了类似的东西。该实现背后的想法是，在编辑ListView时必须添加自动完成功能。

我在下面共享“编辑模板”和“ ListView JS”。

<script type="text/x-kendo-tmpl" id="editTemplate">
<div class="product-view k-widget">
    <dl>
        <dt>Product Name</dt>
        <dd>
            <label for="PAPC">Project Code<span class="k-icon k-i-star requiredstar" data-toggle="tooltip" title="Required"></span></label>
            <input type="text" required name="PAPC" validationMessage="Hotel is required" data-bind="value: ProjectCode" />
            <span class="k-invalid-msg" data-for="PAPC"></span>
        </dd>
    </dl>
    <div class="edit-buttons">
        <a class="k-button k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
        <a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
    </div>
</div>

var listView = $("#lvPA").kendoListView({
        dataSource: datasrc,
        template: kendo.template($("#template").html()),
        editTemplate: kendo.template($("#editTemplate").html()),
        edit: function (e) {
            var model = e.model;
            var item = $(e.item[0]);

            var projectcode = item.find('[name="PAPC"]'); //Get your element
            //Add a autocomplete here
            projectcode.kendoAutoComplete({
                valueTemplate: '<span>#:data.ProjectCode#</span>',
                template: projectTemplate,
                minLength: 3,
                autoWidth: true,
                dataTextField: "ProjectCode",
                dataSource: new kendo.data.DataSource({
                    type: "GET",
                    serverFiltering: true,
                    transport: {
                        read: ProjectAPI,
                        parameterMap: function (data, type) {

                            return { filter: $('[name="PAPC"]').val() };
                        }
                    },
                }),
                height: 200
            });
        }
    }).data("kendoListView");

具有自动完成文本框的Kendo UI Core Listview编辑模板（Kendo自动完成）

1 个答案: