1

私はasp.net mvc witk Kendo UI MVC Toolsに取り組んでいます。Kendo UI Mvc グリッドにレコードのリストを表示しようとしています。文字を入力すると、条件に一致する対応するフィールドレコードがドロップダウンのように表示されます。ここで、オートコンプリート テキスト ボックスを 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

まず、 でグリッドを作成し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 に答える