我有这个kendoGrid,它正在为列使用一些自定义模板。我将filterable标签设置为true,但是过滤器仅显示在Name列下,而不显示在使用自定义模板的任何列下。谁能告诉我在使用自定义列模板时如何过滤这些列?
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>
要在列上启用过滤器,必须指定该列的字段。
下面的代码帮助对任何自定义模板列进行排序。
这是一种解决方法,经过研究,我能够在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;
}
}