更改剑道数字过滤器格式

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

只需设置列格式：

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

Answer 3

可以在这样的列上的过滤设置格式：

  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 4

设置过滤列

column.filterable = { 
 
    ui: numberFilter, 
 
    cell: { 
 
     template: numberFilter, 
 
    } 
 
}; 
 

 
function numberFilter(args) { 
 
    var element = args instanceof jQuery ? args : args.element; 
 
    element.kendoNumericTextBox({ 
 
     format: "n0" 
 
    }); 
 
}

Answer 5

在剑道NumericTextBox，格式时使用它没有聚焦到输入的内容进行格式化。 你有tu使用小数du格式输入时，它的重点。 例如这里是显示总是整数NumericTextbox（asp.net）：

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

希望它会帮助别人。

Answer 6

什么Palani库马尔说还插入分隔符，即它将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 7

我有同样的问题和columns.Bound（X => x.Property）.Filterable（X => x.UI（ “numericFilter”））;没有为我工作。捎带关闭泽维尔约翰的回答我用columns.filterable.cell.template解决我的问题，因为Telerik的文档状态：

columns.filterable.ui字符串|小部件的功能

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

此功能不支持具有其值选项设置的列。 如果filterable.mode设置为'row'，则应使用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>