New to Kendo UI for jQuery? Download free 30-day trial

Change the Default Decimals Precision of a Numeric Column Filters in the Grid

Environment

Product Progress® Kendo UI® Grid for jQuery
Product Version Created with the 2017.3.913 version

Description

How can I change the default two decimals places in the numeric filters in a grid column?

Solution

To change the decimals precision:

  1. Subscribe for the filterMenuInit event of the Grid.
  2. In the filterMenuInit event handler, use setOptions method to set new values for the decimals and format configurations.
<div id="grid"></div>

<script>
    $("#grid").kendoGrid({
        columns: [{
                field: "name"
            },
            {
                field: "age"
            }
        ],
        filterable: true,
        filterMenuInit: function(e) {
            if (e.field == "age") {
                var ntbs = e.container.find("[data-role='numerictextbox']");
                ntbs.each(function(e) {
                    var ntb = $(this).data("kendoNumericTextBox");

                    ntb.setOptions({
                        format: "n3",
                        decimals: 3
                    })
                })
            }
        },
        dataSource: {
            data: [{
                    name: "Jane Doe",
                    age: 30.333
                },
                {
                    name: "John Doe",
                    age: 33.12
                }
            ],
            schema: {
                model: {
                    fields: {
                        age: {
                            type: "number"
                        }
                    }
                }
            }
        }
    });
</script>
In this article