如何使用剃须刀在剑道实现自定义分类器
本文关键字：实现 自定义 分类器 何使用 剃须刀 | 更新日期: 2023-09-27 18:26:00
我正试图在剑道网格中实现一个自定义比较，以便数字与列中的文本一起正确排序。
cshtml页面是使用mvc包装器razor标记-编写的
@(Html.Kendo().Grid<dynamic>().Name("grid")
.Columns(a =>
{
a.Bound("colA").Width("6%");
a.Bound("colB").Width("14%");
a.Bound("colC").Title("numbers and text").Width("5%");
foreach (var issue in LookupHelper.GetFailures().Where(b => b.Source != "Other"))
a.Bound("Issue_" + issue.Id.ToString()).Title(issue.Description).Width("7%");
})
.DataSource(a => a.Ajax().Batch(true)
.Model(b => b.Id("colA"))
.PageSize(20)
.Sort(b => b.Add("colA").Ascending())
.ServerOperation(false)
)
.Events(a => a.Change("grid.change").DataBound("grid.change"))
.Pageable()
.Resizable(a => a.Columns(true))
.Selectable()
.Sortable(a => a.SortMode(GridSortMode.MultipleColumn))
.Filterable()
telerik页面表示目前还不支持http://www.telerik.com/forums/custom-sort-example-for-mvc-wrappers
因此，我想使用标记和字符串替换来用包含自定义排序函数的列定义来替换列定义。
有什么办法吗？
我试过.toHtmlString（），但网格不渲染，只显示字符串。
感谢
ok我通过用JS格式重写它并仍然使用Razor标记动态生成列来解决这个问题。
这有助于混合Razor和Javascript代码
<script type="text/javascript">jQuery(function () {
jQuery("#wims-grid-surveillance").kendoGrid({
change: wimsDashboard.changeSurveillance,
dataBound: wimsDashboard.changeSurveillance,
columns: [
{ title: "Well", "width": "5%", "field": "Well", "filterable": {}, "encoded": true },
{ title: "Type", "width": "5%", "field": "Type", "filterable": {}, "encoded": true },
{ title: "Pot.", "width": "3%", format: "{0:n0}","field": "Potential", "filterable": {}, "encoded": true },
{ title: "Status", "width": "4%",
"template": "'u003cdiv style='u0027vertical-align: top;cursor: pointer;text-align: center;font-size: 300%;color: #=StatusFlag#'u0027 onclick='u0027wimsPage.bf.openWindow('u0022/eplant/dll/eplant.dll?Display&page_id=2121&WELL=#=Well#'u0022,'u0022#=Well#'u0022, 'u0022/eplant/images/custom_images/WIMS-16x16.png'u0022,'u0022#=Well# - Well Integrity BF Display'u0022);'u0027 'u003e'u25CF'u003c/div'u003e",
"field": "Status",
"filterable": {
extra:false,
operators: {
string:{ contains: "Is"}
},
ui: function (el){
el.kendoDropDownList({
dataSource: [{value:"111",text:"Open"},{value:"0",text:"Shut"}],
dataTextField: "text",
dataValueField: "value",
optionLabel: "--Select Value--",
cell: {operator: "contains"}
});
}
},
"encoded": true,
sortable: {
compare: function (a, b) {
a = (a.Status.split("1").length - 1);
b = (b.Status.split("1").length - 1);
return a<b ? -1 : a==b ? 0 : 1;
}
} },
{ title: "Oper. Status", "width": "4%", "field": "OpStatus", "filterable": { extra:false,
operators: {
string:{ eq: "Is"}
},
ui: function (el){
el.kendoDropDownList({
dataSource: [{value:"Shut In",text:"Shut In"},{value:"Cont. Oper.",text:"Cont. Oper."}],
dataTextField: "text",
dataValueField: "value",
optionLabel: "--Select Value--",
cell: {eq: "Is"}
});
}}, "encoded": true },
{ title: "Active Case", "width": "8%", "field": "Case", "filterable": {}, "encoded": true },
{ title: "Sev.", "width": "3%", "field": "Severity", "filterable": {}, "encoded": true },
{ title: "Days to expiry",
attributes: { "class": "vline" },
width: "4%",
template: "#if (DaysToExpiry == '0') {# <div style='color: #=DaysToExpiryFlag#'>Expired</div> #} else if(DaysToExpiry==null) {##} else {##=DaysToExpiry##}#",
field: "DaysToExpiry",
filterable: {},
encoded: true
}
@foreach (var issue in LookupHelper.GetFailureLocations().Where(b => b.Source != "Other"))
{
<text>
,{ "title": "@issue.Description",
"attributes": { "class": "visible-wide" },
"width": "5%",
"template": "<div class='input-block-level' style='color:transparent; background-color: #if(Issue_@issue.Id == 5){##=dashboardFailureColour.text##}else if (Issue_@issue.Id == 4) {##=dashboardCategory1Colour.text##} else if (Issue_@issue.Id == 3) {##=dashboardCategory2Colour.text##} else if (Issue_@issue.Id == 2) {##=dashboardCategory3Colour.text##} else if (Issue_@issue.Id == 1) {##=dashboardNonApplicableColour.text##} else if (Issue_@issue.Id === 0) {##=dashboardInvalidAttributeColour.text##}else{#none#}#;'>#if(Issue_@issue.Id != null){##=Issue_@issue.Id##}#</div>",
"field": "Issue_@issue.Id",
"filterable": {
extra:false,
operators: {
string:{ eq: "Is"}
},
ui: function (el){
el.kendoDropDownList({
dataSource: [
{ 'value': 0, text:'Error' },
{ 'value': 1, text:'OK' },
{ 'value': 2, text:'Cat3' },
{ 'value': 3, text:'Cat2' },
{ 'value': 4, text:'Cat1' },
{ 'value': 5, text:'Fail' }
],
dataTextField: "text",
dataValueField: "value",
optionLabel: "--Select Value--",
cell: {operator: "eq"}
});
}
},
"encoded": true
}
</text>
}
],
"pageable": { "buttonCount": 10 },
"sortable": { "mode": "multiple" },
"selectable": "Single, Row",
"filterable": true,
"resizable": false,
"scrollable": false,
"dataSource": {
"transport": {
"prefix": "",
"read": {
"url": ""}
},
"pageSize": 20,
"page": 1,
"total": 0,
"type": "aspnetmvc-ajax",
"sort": [{ "field": "Well", "dir": "asc"}],
"schema": {
"data": "Data",
"total": "Total",
"errors": "Errors",
"model": { "id": "Well", "fields": {
"Severity":{"type":"number"},
"Potential":{"type":"number"},
"DaysToExpiry":{"type":"number"},
"Issue_1":{"type":"number"},
"Issue_2":{"type":"number"},
"Issue_3":{"type":"number"},
"Issue_4":{"type":"number"},
"Issue_5":{"type":"number"},
"Issue_6":{"type":"number"},
"Issue_7":{"type":"number"}
}
}
},
"batch": true
}
});
$.fx.off = true;
})；
</script>