如何将 Kendo UI mvc Grid 与 Kendo Mvc 自动完成同步答案

【问题标题】：How to sync Kendo UI mvc Grid with Kendo Mvc Autocomplete如何将 Kendo UI mvc Grid 与 Kendo Mvc 自动完成同步
【发布时间】：2012-10-13 08:37:07
【问题描述】：

我正在使用 asp.net mvc witk Kendo UI MVC 工具。我正在尝试在 Kendo UI Mvc Grid 中显示记录列表。当我输入一个字母时，我有一个剑道 ui 自动完成文本框，它显示与条件匹配的相应字段记录，将像下拉菜单一样显示。现在我想将自动完成文本框与 kendo ui mvc 网格同步。这意味着当我键入符合条件的字母记录时，应显示在网格中。我尝试过更改事件，但它似乎对我不起作用。

 @(Html.Kendo().AutoComplete().Events(c=>c.Change("GridChange"))
                                                   .Name("txtSearchItem")
                                                .Filter("startswith")
                                           .DataTextField("xxx")
                                              .Value(ViewBag.SearchValue)
                              .BindTo((List<MyRecords>)Model).HtmlAttributes(new { @class = "required", style = "font-size:19px;width:150px;", onkeypress = "return isNumericKey(event);" })
                                                )

请指导我。

【问题讨论】：

是的，我尝试过使用过滤器和文本框 keyup js 事件。它的工作就像魅力。谢谢你的回答。
您能与我们分享您的解决方案吗？

标签： asp.net-mvc asp.net-mvc-3 kendo-ui

【解决方案1】：

首先，创建一个带有HeaderTemplate 的网格，以创建一个作为自动完成功能的组合框。

  @( Html.Kendo().Grid(Model)

                   .Name("Grid")
                   .ClientDetailTemplateId("inventoryTemplate")
                   .DataSource(ds => ds.Ajax()
                           .Read(r => r.Action("Read", "Home"))
                           )
                   .Columns(columns =>
                   {
                       columns.Bound(p => p.Item).Width(10)
                         .Filterable(false).Sortable(false).HeaderTemplate(@<text>
        @(Html.Kendo().ComboBox()
                                .DataValueField("Items")
                                .Placeholder("Items")
                                .DataTextField("Items")
                                .Name("Items")
                                .DataSource(ds => ds.Read(rea => rea.Action("ListOfItems", "Home")))
                                .Events(ev => ev.Change("onComboListCodeChange"))
                              )
                              </text>);
                   })
                   )

现在创建此方法将从过滤器字典中获取一个数组，稍后您将需要它。

 function getArrayFromDic(dic) {
    var arr = new Array();
    arr = $.map(dic, function (n, i) {
        return { field: n.field, operator: n.operator, value: n.value };
    });
    return arr;

}

此函数将获取一个字典，该字典表示网格上可用的过滤器。如果有多个过滤器。

 function getFilterDic() {

    var grid = $('#Grid').data('kendoGrid');
    var filtersDicTemp = {
    };

    if (grid.dataSource._filter) {
        $.each(grid.dataSource._filter.filters, function (index, value) {
            filtersDicTemp[value.field] =
                                    {
                                        field: value.field, operator: value.operator, value: value.value
                                    }
        });
    }
    return filtersDicTemp;
}

在这种情况下，每次更改过滤器自动完成组合框的值时都会调用它。 kendo.data.DataSource 上有一个名为filter 的方法，您可以在其中传递一组过滤器。

function onComboListCodeChange(e) {
        var grid = $('#Grid').data('kendoGrid');
        var filtersDic = getFilterDic();
        if (this.value() && this.value() != 'All') {
            if (this.value() != 'Items' && this.value() != '') {
                filtersDic["Items"] =
               {
                   field: "Items", operator: "startswith", value: this.value()
               }
            }
        }
        else {
            if (filtersDic["Items"]) {
                delete filtersDic["Items"];
            }
        }

        var filters = getArrayFromDic(filtersDic);

        grid.dataSource.filter(
               filters
           );
    }

希望对您有所帮助！

【讨论】：

【解决方案2】：

使用这里的方法http://demos.kendoui.com/web/grid/toolbar-template.html

不同之处在于您将使用自动完成（几乎相同）并且您不需要通过工具栏模板将其放入工具栏内。

【讨论】：