Filter for “UnitPrice” and “ProductID” column

问题

I wanted to filter UnitPrice and ProductID. This is the sample, you want more using the jsfiddle link. Check this jsfiddle for more detail & work my program in that

//change event

$("#category").keyup(function () {
  var selecteditem = $('#category').val();
  var kgrid = $("#grid").data("kendoGrid");
  selecteditem = selecteditem.toUpperCase();
  var selectedArray = selecteditem.split(" ");
  if (selecteditem) {
});
    var orfilter = { logic: "or", filters: [] };
    var andfilter = { logic: "and", filters: [] };
    $.each(selectedArray, function (i, v) {
      if (v.trim() == "") {
      }
      else {
        $.each(selectedArray, function (i, v1) {
          if (v1.trim() == "") {
          }
          else {
            orfilter.filters.push({ field: "ProductName", operator: "contains", value:v1 },
            { field: "QuantityPerUnit", operator: "contains", value:v1});
              andfilter.filters.push(orfilter);
              orfilter = { logic: "or", filters: [] };
            }

        });
      }
    });
    kgrid.dataSource.filter(andfilter);
  }
  else {
    kgrid.dataSource.filter({});
  }

});

回答1:

Please try with the below code snippet.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example" class="k-content">
        <div id="grid"></div>
        <div class="toolbar">
            <label class="category-label" for="category">Show products by category:</label>
            <input type="search" id="category" style="width: 230px" />
            <input id="reset" type="button" value="Reset" />
            <input id="reset1" type="button" value="ORLOGIC" />
        </div>
    </div>



    <script>
        $(document).ready(function () {

            var grid = $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.kendoui.com/service/Northwind.svc/Products"
                    },
                    pageSize: 7,
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true
                },

                sortable: true,
                pageable: true,
                columns: [
                    {
                        field: "ProductID",
                        width: 100
                    },
                    {
                        field: "ProductName",
                        title: "Product Name"
                    },
                    {
                        field: "UnitPrice",
                        title: "Unit Price",
                        width: 100
                    },
                    {
                        field: "QuantityPerUnit",
                        title: "Quantity Per Unit"
                    }
                ]
            });


            //change event
            $("#category").keyup(function () {
                var selecteditem = $('#category').val();
                var kgrid = $("#grid").data("kendoGrid");


                var gridListFilter = { filters: [] };
                var gridDataSource = kgrid.dataSource;
                gridListFilter.logic = "or";   // a different logic 'and' can be selected
                gridListFilter.filters.push({ field: "ProductID", operator: "eq", value: parseInt(selecteditem) });
                gridListFilter.filters.push({ field: "UnitPrice", operator: "eq", value: parseInt(selecteditem) });

                gridDataSource.filter(gridListFilter);
                gridDataSource.read();
            });

            $('#reset').click(function () {
                //not working yet
                $('#category').val('');
                $("#grid").data("kendoGrid").dataSource.filter([]);
            });

            //Or LOGIC HERE... DOESN'T WORK
            $('#reset1').click(function () {
                $("#grid").data("kendoGrid").dataSource.filter({
                    logic: "or",
                    filters: [
                        {
                            field: "ProductName",
                            operator: "eq",
                            value: "Chang"
                        },
                        {
                            field: "QuantityPerUnit",
                            operator: "contains",
                            value: "box"
                        }
                    ]
                });

            });
        });

    </script>
</body>
</html>

Let me know if any concern.

来源：https://stackoverflow.com/questions/31802898/filter-for-unitprice-and-productid-column

标签

filter

kendo-ui

telerik

kendo-grid