telerik - 未对指定列执行 Kendo UI Grid 的过滤器

Question

这是我的 MVC 视图代码：-

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

以下是控制器的操作方法：-

public ActionResult Report_Read()
{
  return Json(_oRepository.GetReports().ToList(), JsonRequestBehavior.AllowGet);
}

我想对 StatusType 文件应用过滤，为此我已将此文件与下拉列表绑定。

我的问题是当我试图通过从下载中选择一种状态来进行过滤时，它什么都不做。

我正在按照这个例子工作：

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

score 2 · Accepted Answer

从您的代码来看，除了控制器读取操作之外，一切似乎都很好。现在，如果在您从 Grid 的视图中应用过滤器时调用控制器，那么您需要的唯一更改如下：

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

编辑：

如果您不使用 Kendo.MVC，那么您有两个过滤选项：

选项 1：客户端过滤
-> 您需要在读取时获取所有数据，因此在应用过滤时您拥有所有数据，如果数据源不大，这是最佳选择，因为它可以保存不需要的控制器请求进行过滤.
-> 首先认为您需要订阅网格的 filterMenuInit() 并添加以下脚本以进行客户端过滤。 代码：

filterMenuInit: function(e) {
  if (e.field == "name") {
    alert("apply Filter");
    var filter = []
    ... // Generate filters
    grid.dataSource.filter(filters);
  }
}

详细示例：剑道示例中的摘录

选项 2：服务器端过滤
-> 我对此不太了解，但是在搜索过滤选项时，我遇到了以下问题，这很好，但对我的应用程序来说有点复杂。但我认为你可以使用它。

JS 小提琴示例

请参阅下面的链接以获取详细说明。

参考：JS Kendo UI 网格选项

score 0 · Accepted Answer

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
    });
}

score 0 · Accepted Answer

检查渲染的 html 中是否有 td 中的字符串和要过滤的字符串

查看您的 td 是否有任何其他代码，而不是您尝试过滤的字符串。如果情况是 td 中还有其他一些 html 代码，例如 span 或 div，那么您必须重构代码以确保仅在 td 中有内容。
确保在 td.td 中修剪你的字符串。
尝试包含而不是等于。如果这对他们有用，问题应该是extran text/html 或修剪。

telerik - 未对指定列执行 Kendo UI Grid 的过滤器

3 回答 3

Related

Reference