1

我正在使用 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);" })
                                                )

请指导我。

4

2 回答 2

1

首先，创建一个带有 a 的网格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
           );
    }

希望它有所帮助！

于 2012-11-02T14:22:49.513 回答
0

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

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

于 2012-10-14T15:18:24.773 回答