剑道服务器端网格过滤/排序

时间:2016-04-20 13:02:34

标签: model-view-controller kendo-ui

我真的不知道如何实现我的要求:

  • 允许用户在完整数据集
  • 上对用户进行排序/过滤
  • 服务器端初始默认过滤器

所以基本上我想将客户端过滤器控件设置为服务器端定义的值。页面加载后,用户可以覆盖此设置并检索完整数据集的列表。

我正在使用以下网格:

@(Html.Kendo().Grid<SubscriptionViewModel>()
      .DataSource(dataSource => dataSource
          ...
          .ServerOperation(true)

      )
      .Name("subscriptionsGrid")         
      .Columns(columns =>
      {
          ...
          columns.Bound(p => p.SubscriptionValidStatus).Filterable(filterable=>filterable.UI("subscriptionStatusFilter")).HeaderHtmlAttributes(new { style = "white-space: normal; vertical-align: top" });
          ....

      })          
      .Scrollable(a => a.Height("700px"))
      .Selectable(selectable => selectable
          .Mode(GridSelectionMode.Single)
      )
      ...
      .Sortable()
      .Filterable(filterable => filterable
        .Extra(false)
      )
      )

2 个答案:

答案 0 :(得分:2)

thx为您的可能解决方案Dinglemeyer

我只是弄清楚如何做服务器端;添加:

content.layout_type_id

到datasource!

答案 1 :(得分:1)

而不是服务器端默认过滤,您可以让客户端事件在页面加载时添加过滤器...实际效果将是您的过滤器,此时用户可以在列中选择过滤器小部件用于删除它的标头,或者他们可以向其他列添加更多过滤器。我已经使用了一些我用来执行此操作的代码并将其重命名为您的网格名称。

试试这个!

在网格定义中,添加如下事件:

.Events(events => events.DataBound("dataBoundSetFilter"))

然后有一个javascript函数来设置您首选过滤的列的过滤器:

 <script type="text/javascript">

        // hasBound variable set on page load to false, will be set true after Grid databound event
        var hasBound = false;
        function dataBoundSetFilter(e) {
            // If the grid has not yet been data-bound, apply this here filter
            if (hasBound === false) {
                //alert("Start");
                // Get a reference to the grid
                var grid = $("#subscriptionsGrid").data("kendoGrid");
                // Apply a filter to the grid's datasource
                grid.dataSource.filter({ field: "SubscriptionValidStatus", operator: "eq", value: true });
                // Set hasBound = true so this won't be triggered again...
                hasBound = true;
            }
        }
    </script>