Format Kendo grid column filter for percentages

问题

I have a kendo grid and my datasource data returns number with unknown decimal places. So I'm using a parse function on the datasource to compensate for that.

DefaultMonoCPP: {
    editable: false,
    type: "number",  
    parse: function(e) {
        return  kendo.parseFloat(kendo.toString(e,"p4")); 
    }
}

Now when I filter, I don't want it to automatically multiply the percentage by 100. So I have filterable set on the columns.

    {
        field: "DefaultMonoCPP",
        title: "Mono Cost",
        format: '{0:p4}',
        filterable: {
            ui: function(e) {
                e.kendoNumericTextBox({
                    //format: "{0:p4}",
                    //format: "p4",
                    format: "##.0000 \\%",
                    decimals: 4
                });
            }
        }
    }

But this messes up the filtered number (1.2700% => 1.27). So filtering fails.

JSFiddle for clarification: http://jsfiddle.net/dmathisen/mecny50f/

Is there any way to have both the parse and filterable work correctly together?

回答1:

My suggestion would be to format the numeric textbox as a percentage and set the step to 0.01 so that it increments/decrements 1% at a time. If you're worried about the user typing in a percentage as a whole number, handle it in the change event.

e.kendoNumericTextBox({
    format: '{0:p4}',
    step: 0.01,
    decimals: 4,
    change: function () {
        var val = this.value();
        if (val > 1) {
            this.value(val / 100);
            this.trigger("change");
        }
    }
});

JSFiddle

来源：https://stackoverflow.com/questions/30631294/format-kendo-grid-column-filter-for-percentages