How to display percentages in table along with numeric filters ?

[Dinesh]

I am using strings to display percentages and filter options show the options corresponding to strings but now I want the filter options to show the numeric ones 

The first attached screenshot shows the numeric filter dropdown, and the 2nd screenshot containing percentages show the alphabetic filter dropdown 

[Nikolay]

Hello Dinesh,

Thank you for clarifying your scenario. Since you are currently storing percentages as strings, the Grid treats these columns as text and displays string-based filter options. To display numeric filter options (like "greater than", "less than", etc.), you need to:

• Store percentage values as numbers in your data source (e.g., use 0.25 for 25%).
• Format the column to display these numbers as percentages in the Grid.
• Set the column type to "number" so the filter options are numeric.

Here is a concise example of how to configure this:

$("#grid").kendoGrid({
    columns: [
        {
            field: "percentage",
            title: "Percentage",
            format: "{0:p2}", // Shows as percentage with 2 decimals
            filterable: {
                ui: function(element) {
                    element.kendoNumericTextBox({
                        format: "p2",
                        decimals: 2
                    });
                }
            }
        }
    ],
    dataSource: {
        data: [
            { percentage: 0.12 }, // 12%
            { percentage: 0.33 }  // 33%
        ],
        schema: {
            model: {
                fields: {
                    percentage: { type: "number" }
                }
            }
        }
    },
    filterable: true
});

Key Points:

• The Grid will display numbers as percentages, but filtering will use numeric operators.
• If you need to change the default decimal precision in the filter, use the filterMenuInit event and update the NumericTextBox settings.

Regards,
Nikolay
Progress Telerik