Question

我在kendo网格中应用自定义分页和排序。对于我的一个专栏，我得到一个数字文本框。当我在数值文本框中插入值时，它是整数，但是当从过滤器数字文本框中删除焦点时，它将转换为十进制。例如：如果我输入32，它仍然是32，但是当焦点被移除时，该值变为32.00。但我希望这个值仍然是32。

所以任何人都可以帮我解决问题。

Answer 1

您可以设置如下

columns.Bound(x => x.Property).Filterable(x => x.UI("NumericFilter"));

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

}
</script>

或使用扩展方法

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

我遇到了同样的问题和columns.Bound（x =＆gt; x.Property）.Filterable（x =＆gt; x.UI（＆＃34; numericFilter＆＃34;））;不适合我。在Xavier John的回答中，我使用columns.filterable.cell.template来解决我的问题，因为telerik的文档声明：

columns.filterable.ui字符串|函数

过滤器菜单中使用的窗口小部件的角色数据属性或初始化该窗口小部件的JavaScript函数。


对于已设置其值选项的列，不支持此功能。     如果filterable.mode设置为＆＃39; row＆＃39;，则应使用columns.filterable.cell.template来自定义输入。

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

这是我的代码

    @(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

将过滤列设置为

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

Answer 4

Palani Kumar 所说的仍然插入分隔符，即它将12345转换为12,345;因此，如果您想要没有任何格式的纯数字（没有分隔符，没有小数点等），我建议使用以下编辑的代码。

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

您可以在列上的可过滤条件上设置格式，如下所示：

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

<强>更新这是javascript版本。这里是我完整的网格定义：

      $("#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

对于asp.net核心网格： columns.Bound(c => c.Expenditure).Format("{0:#,###.00}").Width(75);

Answer 7

只需设置列格式：

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

Answer 8

在Kendo NumericTextBox上，格式用于在输入未被聚焦时格式化输入内容。您可以使用Decimals du格式化输入。例如，这里是一个NumericTextbox（asp.net），显示始终为整数：

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

希望它会对某人有所帮助。

更改kendo数字过滤器格式

8 个答案: