CODEWITHSUNDEEP
kendo-grid
Arayn
Arayn

Reputation: 1106

Kendo Grid Custom Client side filtering

I am facing issue while doing client side filtering on Kendo Grid. I am using ASP.NET MVC 4.5. I want to do filtering on client side(to reduce the server trip) and filtering will happen on the grid data only.

Please suggest, how can we get the data filter based on search value entered in text box and click of button.

Below is source code which I am using for sample demo.

@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>

I always get "null" value from below code

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

Regards

Upvotes: 2

Views: 3051

Answers (1)

Arayn
Arayn

Reputation: 1106

Thanks everyone.

I could manage to identify the issue. It was silly one, I had mistyped the grid name from #grid to #Grid

Upvotes: 2

Related Questions