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

Answer 1

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

Answer 2

function applyFilter() {

    var filters = [], item_filters = [], brand_filters = [], invoice_id = null;
    var item_nested_filter = { logic: 'or', filters: item_filters };
    var brand_nested_filter = { logic: 'or', filters: brand_filters };

    var gridData = $("#invoicelistgrid").data("kendoGrid");
    var invoiceId = $("#invoiceidsearch").data("kendoDropDownList").value();    
    var itemId = $("#itemsearch").data("kendoDropDownList").value();
    var brandId = $("#brandsearch").data("kendoDropDownList").value();    
    var partyId = $("#party-dropdown").data("kendoDropDownList").value();

    if (partyId !== "") {
        filters.push({ field: "party_id", operator: "eq", value: parseInt(partyId) });
    }

    if (invoiceId !== "") {
        filters.push({ field: "invoice_id", operator: "eq", value: parseInt(invoiceId) });
    }

    if (itemId !== "") {
        for (var i = 0; i < gridData.dataSource._data.length; i++) {
            var data = gridData.dataSource._data[i].tb_invoice_lines;
            for (var j = 0; j < data.length; j++) {
                if (parseInt(itemId) === parseInt(data[j].item_id)) {
                    item_filters.push({ field: "invoice_id", operator: "eq", value: parseInt(data[j].invoice_id) });
                } else {
                    invoice_id = data[j].invoice_id;
                }
            }
        }
        if (item_filters.length > 0) {
            filters.push(item_nested_filter);
        } else {
            filters.push({ field: "invoice_id", operator: "eq", value: parseInt(invoice_id) });
        }
    }

    if (brandId !== "") {
        for (var k = 0; k < gridData.dataSource._data.length; k++) {
            var brand_data = gridData.dataSource._data[k].tb_invoice_lines;
            for (var l = 0; l < brand_data.length; l++) {
                console.log("Grid item id = " + brand_data[l].brand_id);
                if (parseInt(brandId) === parseInt(brand_data[l].brand_id)) {
                    brand_filters.push({
                        field: "invoice_id",
                        operator: "eq",
                        value: parseInt(brand_data[l].invoice_id)
                    });
                } else {
                    invoice_id = brand_data[l].invoice_id;
                }
            }
        }
        if (brand_filters.length > 0) {
            filters.push(brand_nested_filter);
        } else {
            filters.push({ field: "invoice_id", operator: "eq", value: parseInt(invoice_id) });
        }
    }

    console.log(filters);

    gridData.dataSource.filter({
        logic: "and",
        filters: filters
    });
}

Answer 3

Check your rendered html for string you have in td and string you are filtering

1. Look if your td has any other code than the string you are trying to filter. If the case is there is some other html code inside td like a span or a div, then you have to refactor your code to make sure you have content only in td.
2. Make sure you trim your string inside td.
3. Try contains instead of equal to. if this works them the issue should be extran text/html or triming.