Question

我们最终从Telerik MVC Extensions迁移到Kendo，我在尝试将静态预过滤器应用于剑道网格时遇到了问题。

我正在尝试过滤掉状态列中包含“已存档”一词的行。

如何使用Kendo执行此操作？

以下是我试图转换的Telerik MVC扩展方法

@(Html.Telerik().Grid<MyViewModel>()
    .Columns(columns =>
    {                    
        columns.Bound(m => m.Id);   
        columns.Bound(m => m.Status);               
        ...
    })
    .DataBinding(......)              
    .Filterable(filtering => filtering.Filters(filters =>
    {
        filters.Add(m => m.Status).IsNotEqualTo("Archived");
    }))              
)

Answer 1

这是在获取初始dataSource demo showing client side filtering

之后从客户端执行此操作的一种方法

这个例子是javaScript版本，我们利用DataBound事件，当网格反弹到dataSource时，我们运行这个函数：

  function onDataBound(e){
            var grid = $('#grid').data('kendoGrid'); 

            if(initialFilter)
            {
                grid.dataSource.filter( { field: "ShipName", 
                                          operator: "contains", 
                                          value: "Han" });
              initialFilter = false;
            }

          }

initialFilter是一个全局变量，它是bool，允许我们控制此函数并运行一次。否则这将继续循环。

然后将过滤器应用于dataSource，我们有三个部分。

{{fieldName},{operator},{value}}

所以在这个例子中，我正在查看ShipName，过滤shipName中包含值Han的位置。

通过mvc版本附加它只需将其添加到events选项即

.Events(event => event.DataBound("onDataBound"))

另一种方法是在网格初始化期间应用过滤器，这样就可以过滤数据，而不必经历第一个版本提出的问题。 filter at initialization

对于这个版本，我只是更改dataSource并将相同的过滤器应用为dataSource设置的一部分，如下所示：

 dataSource: {
     type: "odata",
     transport: {
         read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
     },
     schema: {
         model: {
             fields: {
                 OrderID: {
                     type: "number"
                 },
                 Freight: {
                     type: "number"
                 },
                 ShipName: {
                     type: "string"
                 },
                 OrderDate: {
                     type: "date"
                 },
                 ShipCity: {
                     type: "string"
                 }
             }
         }
     },
     pageSize: 20,
     serverPaging: true,
     serverFiltering: true,
     filter: {
         field: "ShipName",
         operator: "contains",
         value: "Han"
     }
 },

因此，在您的数据源配置中，您可以添加如下内容：

.Read(read => read.Action("",""))
.Model(model => {model.Id("ShipId");})
.Filter(filter => 
                {
                  filter.Add(f => f.ShipName).Contains("Han"); 
                })

希望这能为您提供一个良好的起点，但如果您需要更多信息，请告诉我，我会为您扩展答案。

Kendo Grid，设置简单的过滤器

1 个答案: