Filterrow column input formatting

[Simon]

I cannot find any examples / documentation on how to format the column filtering input for Core ASP.net.

For example I have a column which is called ID. It is filterable but I want it formatted so that :
1 - It does not have the spinner

2 - After entering a value it does not reformat it from Integer to Decimal with a thousands separator. For example 1234 become 1,234.00 The current code I have is:

@(Html.Kendo().Grid<CIPHRChecks.Models.Order>()
            .Name("Grid")
            .HtmlAttributes(new { @class = "ChecksGrid" })
            .Columns(columns =>
            {
                columns.Bound(o => o.Id).Title("ID").Format("{0}").Width(200).Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
                columns.Bound(o => o.OrderDate).Title("Order Date").Format("{0:dd/MM/yyyy}").Width(80);
                columns.Bound(o => o.Source.Name).Title("Source").Width(80).Filterable(ftb => ftb.Multi(true).Search(true));

                columns.Bound(o => o.OrderStatus.Description).Title("Status").Width(200);
                columns.Bound(o => o.Service.Name).Title("Service").Width(200);
                columns.Bound(o => o.SourcePersonReference).Title("Reference").Width(120).Filterable(f => f.Multi(false).Cell(cell => cell.ShowOperators(false)));
                columns.Bound(o => o.SourcePersonDescriptor).Title("Descriptor").Width(200).Filterable(f => f.Multi(false).Cell(cell => cell.ShowOperators(false)));
            })
                .Pageable(p =>
            {
                p.PageSizes(new[] { 15, 25, 50 });
            })

            .Sortable(sortable => sortable
            .SortMode(GridSortMode.MultipleColumn))
            .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
            .Scrollable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Read", "Home")
            )
                .PageSize(15)
            )
)

[Alex Hajigeorgieva]

Hello, Simon,

To render the desired custom Filterable UI, we need to declare a template for the filterable cell and provide the required configurations to it.

https://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox/configuration/decimals

https://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox/configuration/format

The below snippet should provide you with both of the desired outcomes. Give this a try and let me know in case you have further questions:

columns.Bound(o => o.Id).Title("ID").Format("{0}").Width(200).Filterable(f => f.Cell(cell => cell.ShowOperators(false).Template("myFilterCell")));

<script>
    function myFilterCell(args) {
         args.element.kendoNumericTextBox({
             spinners: false,
             decimals:0,
             format: "{0:0}"
         });
    }
</script>

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Robert]

Is there any way to get this to continue to work if you use state persistence?

https://demos.telerik.com/aspnet-core/grid/persist-state

The accepted answer works fine if you don't click away, but if you come back and setOptions is called, it seems to go back to displaying the value with the default format.

e.g.
search for 14892

after setOptions it becomes 14,892.00

[Alexander]

Hi Robert,

Generally, "JSON.stringify()" cannot serialize function references (e.g. event handlers), so if stringification is used for the retrieved Grid state, all configuration fields, which represent function references, will be lost.

You have two options to avoid this limitation: use a custom implementation to serialize JavaScript functions, or add the function references back to the deserialized configuration object before passing it to the setOptions method.

In this regard, a possible recommendation would be to explicitly supplement the desired UI cell handler back to the Grid.

For the purposes of the demonstration, I have created a proof of concept example that is incorporated from the demo you linked.

Where I have added an additional template handler for one of the columns:

.Columns(columns =>
{
    columns.Bound(c => c.ContactName).Filterable(f => f.Cell(cell => cell.ShowOperators(false).Template("myFilterCell"))).Width(400);
})


<script>
    function myFilterCell(args) {
         args.element.kendoTextBox({
             enable: false
         });
    }
</script>

And the handler is passed back within the following layer of logic:

<script>
    function myFilterCell(args) {
         args.element.kendoTextBox({
             enable: false
         });
    }
    $(document).ready( function () {
        var grid = $("#grid").data("kendoGrid");

        $("#load").click(function (e) {
            e.preventDefault();
            var columns = grid.columns; // 1. Gather the columns.
            var options = localStorage["kendo-grid-options"];
            if (options) {
                var parsedOptions = JSON.parse(options); // 2. Parse the Grid options.
                columns.find(column => column.field == "ContactName").filterable.cell.template = myFilterCell; // 3. Reattach the template handler.

                parsedOptions.columns = columns; // 4. Add the altered columns to the parsed options.
                
                grid.setOptions(parsedOptions); // 5. Set the Grid's options.
            }
        });
    });
</script>

For your convenience, here is a Telerik REPL example that tackles the aforementioned approach:

• Telerik REPL for ASP.NET Core Example - notice that the template handler is passed back for the "ContactName" column field.

I hope this helps during your endeavors.

[Simon]

Perfect Thankyou