如何将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 
      ); 
    } 

希望它有帮助！