如何將Kendo UI mvc Grid與Kendo Mvc自動完成同步

Question

我正在使用asp.net mvc witk Kendo UI MVC Tools。我正嘗試在Kendo UI Mvc Grid中顯示記錄列表。我有一個kendo 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);" }) 
               ) 

請指導我。

Answer 1

使用從這裏http://demos.kendoui.com/web/grid/toolbar-template.html

的方法的區別是，您將使用自動完成（這幾乎是一樣的），你不需要把它放在工具欄裏面通過工具欄模板。

Answer 2

首先，創建一個帶有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 
      ); 
    } 

希望它有幫助！