asp.net-mvc-5 - Kendo UI Core Listview Edit Template with Autocomplete TextBox(Kendo Autocomplete)

Question

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

Answer 1

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

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

我在这里找到了这个想法http://jsfiddle.net/F4NvL/

<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");