Kendo Grid自定义客户端侧过滤

时间:2016-07-26 08:30:35

标签: kendo-grid

我在Kendo Grid上进行客户端过滤时遇到问题。 我正在使用ASP.NET MVC 4.5。我想在客户端进行过滤(以减少服务器跳闸),并且只对网格数据进行过滤。

请建议,我们如何根据在文本框中输入的搜索值和点击按钮获取数据过滤器。

以下是我用于示例演示的源代码。

@using Kendo.Mvc.UI
@model IEnumerable<DemoApp.Controllers.StudentsGrid>
<link rel="stylesheet" href="~/Scripts/Kendo/Css/kendo.common.css" />
<link rel="stylesheet" href="~/Scripts/Kendo/Css/kendo.default.min.css" />
<input type="button" value="Search" id="btnSearch" />
FirstName
<input id="txtFirstName" />
LastName
<input id="txtLastName" />
@(
Html.Kendo().Grid<DemoApp.Controllers.StudentsGrid>(Model).Name("Grid")
.Columns(columns =>
  {
      columns.Bound(p => p.FirstName);
      columns.Bound(p => p.LastName);
  })
  .Filterable()
  .DataSource(ds => ds
    .Ajax()
    .ServerOperation(false)
    )
)
<script src="~/Scripts/Kendo/kendo.all.min.js"></script>
<script src="~/Scripts/Kendo/kendo.aspnetmvc.min.js"></script>
<script>

  $(function () {
    //set culture of the Kendo UI
    kendo.culture("en_GB");


    $("#btnSearch").click(function () {

      grid = $("#grid").data("kendoGrid");
      var ds = grid.dataSource;
      ds.filter([

          {
              "field": "FirstName",
              "operator": "startswith",
              "value": $("#firstName").val()
          }
      ]);


    });
  });
</script>

我总是得到&#34; null&#34;来自以下代码的值

    grid = $("#grid").data("kendoGrid");
      var ds = grid.dataSource;

此致

1 个答案:

答案 0 :(得分:2)

谢谢大家。

我可以设法识别问题。这是愚蠢的,我把网格名称从#grid输入到#Grid