Changing the kendo numeric filter format
You can set like 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 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"));
}
I was having the same issue and columns.Bound(x => x.Property).Filterable(x => x.UI("numericFilter")); was not working for me. Piggy backing off of Xavier John's answer I used columns.filterable.cell.template to fix my problem because telerik's documentation states:
columns.filterable.ui String |Function
The role data attribute of the widget used in the filter menu or a JavaScript function which initializes that widget.
This feature is not supported for columns which have their values option set. If filterable.mode is set to 'row', columns.filterable.cell.template should be used to customize the input.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.filterable.ui
Here's 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>