Filter of Kendo UI Grid is not executed for specified column

Question

Here is my MVC view code :-

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

And below is the Action Method of 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.

And my problem is when I am trying to do filtering by selecting one of the status from download its doing nothing.

I am working according to this example:

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

Solution

From your code, everything seems fine except the Controller Read Action. Now if the controller is being called when you apply filter from the view on Grid then the only change required on your side is below:

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

---

EDIT:

If you don't use Kendo.MVC then you have two option to filtering:

Option 1: Client side filtering
-> You will need to get all the data at read time so when the filtering is applied you have all the data, which is best option if the data source is not large as it saves unwanted controller requests for filtering.
-> First think you need do is subscirbe to filterMenuInit() of grid and add the below Script for client side filtering. Code:

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

Option 2: Server side filtering
-> I don't have much idea about it, but whilst I was searching for my options to filtering I had came across the below Question which was good but a bit complex for my application. But I think you can use it.

JS Fiddle Sample

Please refer below Link for detailed explanation.

Reference: JS Kendo UI Grid Options

Comments

[Pawan]

D_Learning thanks for your answer.But i want to let you know i am working with the Kendo JS version.And i think DataSourceRequest class is on Kendo.MVC dll.

[adiga]

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.