how to implement custom sorter in kendo using razor

Question

I'm trying to implement a custom compare in a kendo grid so that numbers sort correctly along side the text in the column.

the cshtml page has been written using the mvc wrapper, razor markup -

 @(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()

the telerik page says it's not supported yet http://www.telerik.com/forums/custom-sort-example-for-mvc-wrappers

so i'd like to take the mark up and string substitute to replace the column definition with one including the custom sort function.

any ideas how to do this?

i've tried .toHtmlString() but then the grid doesnt render but only displays the string.

thanks

Answer 1

ok I solved this by re-writing it in JS format and using the Razor markup still to dynamically generate the columns.

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