Question

我有这个kendoGrid，它正在为列使用一些自定义模板。我将可过滤标记设置为true，但过滤器仅显示在“名称”列下，而不显示在使用自定义模板的任何列下。任何人都可以告诉我如何在使用自定义列模板时过滤这些列吗？

filterable: true,
columns: [
       { field: "Name", title: "Name", width: "100px" },
       { template: kendo.template($("#SiteAccess-template").html()), title: "Site access", filterable: true },
       { template: kendo.template($("#EmployeeStatus-template").html()), title: "Employee status", width: "100px", filterable: true },

我的模板，如果你需要看到它：

<script id="EmployeeStatus-template" type="text/x-kendo-template">
# if (IsClearedEmployee) {#
    Cleared Employee, 
#} if (IsEmployee) {#
    Employee 
#}#</script>

Answer 1

要在列上启用过滤器，您必须指定该列的字段。

参见示例http://jsbin.com/yekabi/1/edit?html,js,output

Answer 2

下面的代码帮助对任何自定义模板列进行排序。

这是我可以在angularjs中研究了很多天后写的解决方法。

sortable: {
  compare: function (a, b) {
     return  sortCustomTemplate(a, b, gridName);
     }
 },

function sortCustomTemplate(a, b, gridName) {
    let grd = $("#" + gridName).data("kendoGrid");
    if (grd) {
        const field = grd.dataSource.sort()[0]["field"];
        const orignaltemp = grd["columns"].find(x => x['field'] === field)["template"];
        const aTemp = orignaltemp.replace(/dataItem/g, `a`);
        const bTemp = orignaltemp.replace(/dataItem/g, `b`);
        const aTemplate = kendo.template(aTemp);
        const bTemplate = kendo.template(bTemp);
        $('#' + gridName).append('<div type="hidden" id ="aDiv"></div>');
        $('#' + gridName).append('<div type="hidden" id ="bDiv"></div>');
        $("#aDiv").html(aTemplate({ field: a[field] }));
        $("#bDiv").html(bTemplate({ field: b[field] }));
        var nameA = eval($("#aDiv").text()).toUpperCase();
        var nameB = eval($("#bDiv").text()).toUpperCase();
        $("#aDiv").remove();
        $("#bDiv").remove();
        if (nameA < nameB) {
            return -1;
        }
        if (nameA > nameB) {
            return 1;
        }
        return 0;
    }
}

使用自定义列模板时，Kendo网格不允许我过滤列

2 个答案: