telerik - Kendo UI Grid 的过滤器未对指定列执行

Question

这是我的 MVC View 代码:-

<div id="reportsDb">
  <div id="grid"></div>
  <script type="text/x-kendo-template" id="template">
    <div class="toolbar" id="template" >
      <label class="Status-label" for="Status">Show reports by status:</label>
      <input type="search" id="Status" style="width: 150px"/>
    </div>
  </script>
  <script>
    $(document).ready(function () {
      var path = ""
      dataSource = new kendo.data.DataSource({

        transport: {
          read: {
            url: "@Url.Action("Report_Read", "Report")",
            dataType: "json",
            type: "Get",
            contentType: "application/json"
          }

        },

        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,

        pageSize: 10,
        schema: {
          model: {
            id: "RequestId",
            fields: {
              IPAddress: { type: "string" },
              RequestQuetime: { type: "date" },
              RequestPicktime: { type: "date" },
              RequestRespondTime: { type: "date" },
              StatusType: { type: "string" },
              RequestTimeDifference: { type: "datetime", format: "{0:hh:mm:ss}" },
              RequestPickDifference: { type: "datetime", format: "{0:hh:mm:ss}" }
            }
          }
        }
      });

      var grid =  $("#grid").kendoGrid({
        dataSource: dataSource,
        sortable: true,
        pageable: true,
        filterable: {
          extra: false,
          operators: {
            string: {
              startswith: "Starts with",
              eq: "Is equal to",
              neq: "Is not equal to"
            }
          }
        },
        toolbar: kendo.template($("#template").html()),
        height: 430,

        columns: [
          { field: "IPAddress", title: "IP address", width: 100, filterable: true },
          { field: "RequestQuetime", title: "Que time", width: 100, filterable: false },
          { field: "RequestPicktime", title: "Pick time", width: 110, filterable: false },
          { field: "RequestRespondTime", title: "Respond time", width: 100, filterable: false },
          { field: "StatusType", title: "status", width: 110, filterable: { ui: statusFilter } },
          { field: "RequestTimeDifference", title: "Time difference", width: 110, filterable: false },
          { field: "RequestPickDifference", title: "Pick difference", width: 110, filterable: false }
        ]
      });

      function statusFilter(element) {
        element.kendoDropDownList({
          dataSource: {
            transport: {
              read: {
                url: "@Url.Action("RequestStatus_Read", "Report")",
                dataType: "json",
                type: "Get",
                contentType: "application/json"
              }
            }
          },
          dataTextField: "Text",
          dataValueField: "Value",
          optionLabel: "--Select Value--"
        });
      }
    });
  </script>
</div>

下面是 Controller 的操作方法:-

public ActionResult Report_Read()
{
  return Json(_oRepository.GetReports().ToList(), JsonRequestBehavior.AllowGet);
}

I want to apply filtering on StatusType filed and for that I have bound this filed with dropdownlist.

我的问题是，当我尝试通过从下载中选择一种状态来进行过滤时，它什么也不做。

我正在按照这个例子工作:

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

Answer 1

从您的代码来看，除了 Controller 读取操作之外，一切似乎都很好。现在，如果当您从 GridView 应用过滤器时调用 Controller ，那么您这边唯一需要的更改如下:

 public JsonResult Report_Read([DataSourceRequest] DataSourceRequest request)
 {          
    return Json(_oRepository.GetReports().ToList().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
 }

---

编辑:

如果您不使用 Kendo.MVC，那么您有两种过滤选项:

选项 1:客户端过滤
-> 您需要在读取时获取所有数据，以便在应用过滤时您拥有所有数据，如果数据源不大，这是最好的选择，因为它可以保存不需要的 Controller 过滤请求。
-> 首先认为您需要做的是订阅网格的 filterMenuInit() 并添加以下脚本进行客户端过滤。 代码:

    filterMenuInit: function(e) {
     if (e.field == "name") {
          alert("apply Filter");
          var filter = []
          ... // Generate filters
          grid.dataSource.filter(filters);
      }
    }

For detailed example: Extact from Kendo Examples

选项 2:服务器端过滤
-> 我对此不太了解，但是当我搜索过滤选项时，我遇到了以下问题，该问题很好，但对于我的应用程序来说有点复杂。但我认为你可以使用它。

JS Fiddle Sample

详细说明请引用下面的链接。

Reference: JS Kendo UI Grid Options