Changing the format of a kendo numeric filter

Question

I use custom swap and sort in a kendo grid. For one of my columns, I get a numeric text field. When I insert a value into a numeric text field, it is integer, but as the focus is removed from the filter text field, it is converted to decimal. For example, if I entered 32, it remains 32, but as the focus is removed, the value becomes 32.00. But I want this value to remain 32.

Therefore, anyone can help me solve the problem.

Answer 1

You can set as below

columns.Bound(x => x.Property).Filterable(x => x.UI("NumericFilter")); <script type="text/javascript"> function NumericFilter(control) { $(control).kendoNumericTextBox({ "format": "n0", "decimals": 0 }); } </script> 

Or use the extension method

 columns.NumericColumn(x => x.Property); public static GridBoundColumnBuilder<TModel> NumericColumn<TModel, TValue>(this GridColumnFactory<TModel> Column, Expression<Func<TModel, TValue>> Expression) where TModel : class { return Column.Bound(Expression).Filterable(x => x.UI("NumericFilter")); } 

Answer 2

I had the same problem and columns.Bound (x => x.Property) .Filterable (x => x.UI ("numericFilter")); didn't work for me. Piggy backsliding from Xavier John replied that I used columns.filterable.cell.template to fix my problem, as the telerik documentation reads:

columns.filterable.ui String | Function

The widget role data attribute used in the filter menu, or the JavaScript function that initializes this widget.

This function is not supported for columns that have their values ​​set. If filterable.mode is set to "row", use columns.filterable.cell.template to configure input.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.filterable.ui

Here is my code

  @(Html.Kendo().Grid<UnsoldStockBO.USS_STOCK>() .Name("searchGrid") .Columns(columns => { columns.Bound(c => c.CyAbbrev); columns.Bound(c => c.UssCrop).Filterable(filter => filter.Cell(c => c.Template("IntegerFilter"))); columns.Bound(c => c.TtAbbrev); columns.Bound(c => c.PtAbbrev); columns.Bound(c => c.UssInternalGrade); columns.Bound(c => c.SuggestedPrice).Format("{0:c2}").Filterable(filter => filter.Cell(c => c.Template("NumericFilter"))); columns.Bound(c => c.UssCtPricePerKilo).ClientTemplate("#:kendo.toString(UssCtPricePerKilo, 'c', Culture)#").Filterable(filter => filter.Cell(c => c.Template("NumericFilter"))); columns.Bound(c => c.UssNetKilos).Format("{0:n}").Filterable(filter => filter.Cell(c => c.Template("NumericFilter"))); columns.Bound(c => c.UssWriteDownCount).Format("{0:n0}").Filterable(filter => filter.Cell(c => c.Template("IntegerFilter"))); columns.Command(command => { command.Edit().HtmlAttributes(new { @title = "Quick Edit" }); command.Custom("EditStock").HtmlAttributes(new { @title = "Edit" }); command.Destroy().HtmlAttributes(new { @title = "Delete" }); }).HtmlAttributes(new { @nowrap = "nowrap" }); }) .Mobile() .ToolBar(toolbar => toolbar.Custom().Text("Add Stock").Action("Create", "Stock").Name("AddStock")) .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation("This record will be permanently deleted and cannot be recovered. Are you sure?")) .Filterable(ftb => ftb.Mode(GridFilterMode.Row)) .Sortable() .Pageable() .Events(e => e.DataBound("onDataBound").Cancel("onCancel")) .NoRecords("No records found.") .Resizable(resize => resize.Columns(true)) .DataSource(dataSource => dataSource .WebApi() .ServerOperation(true) .PageSize(30) .Events(events => events.Error("error_handler").Sync("sync_handler")) .Model(model => { model.Id(p => p.UssId); model.Field(c => c.CyAbbrev).Editable(false); model.Field(c => c.UssCrop).Editable(false); model.Field(c => c.TtAbbrev).Editable(false); model.Field(c => c.PtAbbrev).Editable(false); model.Field(c => c.UssInternalGrade).Editable(false); model.Field(c => c.SuggestedPrice).Editable(false); }) .Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "webapi", action = "UnsoldStock_Get", userId = ((UnsoldStockBO.PSI_USER)Session["USS_User"]).UUid }))) .Update(update => update.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "webapi", action = "UnsoldStock_Update", userName = ((UnsoldStockBO.PSI_USER)Session["USS_User"]).UUserName })).Type(HttpVerbs.Post)) .Destroy(destroy => destroy.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "webapi", action = "UnsoldStock_Delete", id = "{0}", userName = ((UnsoldStockBO.PSI_USER)Session["USS_User"]).UUserName })).Type(HttpVerbs.Delete)) ) ) <script type="text/javascript"> function IntegerFilter(args) { args.element.kendoNumericTextBox({ format: "#", decimals: 0, spinners: false }); } function NumericFilter(args) { args.element.kendoNumericTextBox({ spinners: false }); } </script> 

Answer 3

Set the filter column as

 column.filterable = { ui: numberFilter, cell: { template: numberFilter, } }; function numberFilter(args) { var element = args instanceof jQuery ? args : args.element; element.kendoNumericTextBox({ format: "n0" }); } 

Answer 4

What Palani Kumar said is still inserting delimiters, that is, he will convert 12345 to 12.345; so I recommend the following edited code if you want to get clean numbers without formatting (no separators, no decimal points, etc.).

 columns.Bound(x => x.Property).Filterable(x => x.UI("numericFilter")); <script type="text/javascript"> function numericFilter(control) { $(control).kendoNumericTextBox({ format: "#", decimals: 0 }); } </script> 

Answer 5

You can set the format in the filter in the column as follows:

  field: "TaskId", title: "TaskId", width: 80, filterable: { ui: function (element) { element.kendoNumericTextBox({ format: "n0" }); } } 

Update This is javascript version. here is my complete defragmentation of the grid:

  $("#uxRunningTasksGrid").kendoGrid({ dataSource: runningTasksDataSource, height: $(document).height() - 280, autoBind: true, filterable: true, sortable: true, pageable: false, reorderable: true, resizable: true, columns: [{ command: { text: "Details", click: openDetails }, title: " ", width: 80 }, { field: "TaskId", title: "TaskId", width: 80, filterable: { ui: function (element) { element.kendoNumericTextBox({ format: "n0" }); } } } ] }; 

Answer 6

For the asp.net core grid: columns.Bound(c => c.Expenditure).Format("{0:#,###.00}").Width(75);

Answer 7

Just set the column format:

 c.Bound(x => x.ColumnName).Format("{0:#}"); 

Answer 8

Kendo's NumericTextBox format is used to format input content when it is not focused. You can use Decimals du to enter input when it is focused. For example, here is a NumericTextbox (asp.net), always showing an integer:

 @(Html.Kendo().NumericTextBox<decimal>() .Name("Total") .Format("n0") .Decimals(0) ) 

Hope this helps someone.