如何在剑道中使用剃须刀实现自定义分类器

Question

我试图在剑道网格中实现自定义比较，以便数字正确地沿列的文本排列。

的CSHTML页面已经被使用MVC包装写的，剃刀标记 -

@(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（）但网格不呈现，但只显示字符串。

感谢

Answer 1

好，我通过重写它JS格式，并使用剃刀标记还是动态生成的列解决了这个。

帮 - Mix Razor and Javascript code

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