Is there a way to format a grid filter input without decimals

0 Answers 169 Views
Filter Grid
Sean
Top achievements
Rank 1
Iron
Sean asked on 11 May 2022, 01:34 PM | edited on 11 May 2022, 10:57 PM

I have a grid filter on a column that doesn't allow decimals.  I tried the solution provided in this forum topic but it appears to only work when Mode(GridFilterMode.Row) is set but I have to use Mode(GridFilterMode.Menu).  Do you have a working example for the Mode(GridFilterMode.Menu) option to ensure that decimals don't show up in the input after you filter the grid and reopen the filter input menu or focus out of the filter input for the numeric text box?

code for the column in the grid:

columns.Bound(c => c.ProspectID).Title("ID").Sortable(true).Filterable(ftb => ftb.Cell(cell => cell.Template("customFilter"))).Format("{0:N0}");

 

Custom form to export the excel from a grid external html button:

<form class="grid-export" action="@Url.Action("CreateExcelFile")" method="POST">
     <input type="hidden" id="export-grid" name="grid" value="" />
     <input type="hidden" id="export-model" name="model" value="" />
     <input type="hidden" id="export-title" name="title" value="Prospects Export" />
     <input type="hidden" id="export-format" name="format" value="xlsx" />
     <input type="hidden" id="export-criteria" name="criteria" value="" />
     <button id="btnGridExport" type="submit" class="submitButtons secondary" onclick="exportExcel()">Export</button>
</form>

JavaScript code to align to that so far:

function exportExcel() {
    var grid = $("#prospectGrid").data("kendoGrid");
    $("#export-model").val(encodeURIComponent(JSON.stringify(grid.columns)));
    $("#export-grid").val("prospectGrid");
    closeGridExport();
}

function customFilter(args) {
    args.element.kendoNumericTextBox({
        decimals: 0,
        format: "n0"
    });
}

Thanks,

Sean

Yanislav
Telerik team
commented on 16 May 2022, 12:29 PM

Hello Sean, 

I recommend you to use the FilterMenuInit event of the Grid and change the format of the NumericTextBoxes within the filter container.

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: "#",
                        decimals: 0
                    })
                })
            }
        },

Here is an example that demonstrates the approach above : https://dojo.telerik.com/@anton.mironov/ezeXAmin

I hope this helps. 

 

No answers yet. Maybe you can help?

Tags
Filter Grid
Asked by
Sean
Top achievements
Rank 1
Iron
Share this question
or