Ändern des Kendo-numerischen Filterformats

Question

Ich verwende benutzerdefinierte Paging und Sortierung im Kendo-Raster. Für eine meiner Spalten erhalte ich ein numerisches Textfeld. Wenn ich den Wert in numerisches Textfeld einfüge, ist es eine Ganzzahl, aber wenn der Fokus aus dem numerischen Textfeld des Filters entfernt wird, wird er in Dezimal umgewandelt. Zum Beispiel: wenn ich 32 eingegeben habe, bleibt es 32, aber wenn der Fokus entfernt wird, wird der Wert 32,00. Aber ich möchte, dass dieser Wert bleibt 32.

So kann mir bitte jemand mit der Lösung helfen.

Answer 1

Sie mögen

unter

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

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

} 
</script> 

Oder Verwendung Erweiterungsmethode einstellen

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

setzen Sie einfach das Spaltenformat:

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

Answer 3

Sie Format auf der filterbar auf der Säule wie folgt einstellen:

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

aktualisieren Dies ist die JavaScript-Version. hier meine komplette Gitter Defintion:

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

die Filtersäule als

Set

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

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

Answer 5

Auf Kendo NumericTextBox wird Format verwendet, um den Inhalt des Eingangs zu formatieren, wenn es nicht fokussiert ist. Sie müssen Decimals verwenden, um die Eingabe zu formatieren, wenn sie fokussiert ist. Zum Beispiel ist hier eine NumericTextbox (asp.net) zeigt immer integer:

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

Hoffe, dass es jemand helfen.

Answer 6

Was Palani Kumar hat gesagt, fügt immer noch Separatoren ein, das heißt es konvertiert 12345 zu 12.345; Daher empfehle ich den folgenden bearbeiteten Code für den Fall, dass Sie reine Zahlen ohne Formatierung (keine Trennzeichen, keine Dezimalstellen usw.) wollen.

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

Ich hatte das gleiche Problem und columns.Bound (x => x.Property) .Filterable (x => x.UI ("numericFilter")); funktionierte nicht für mich. Piggy backing off von Xavier John Antwort habe ich columns.filterable.cell.template mein Problem zu beheben, weil telerik der Dokumentation heißt es:

columns.filterable.ui String | Funktion

Die Rolle Datenattribut des Widgets verwendet im Filtermenü oder eine JavaScript-Funktion, die dieses Widget initialisiert.

Diese Funktion wird nicht für Spalten unterstützt, für die die Option "Werte" festgelegt wurde. Wenn filterable.mode auf 'row' gesetzt ist, sollte columns.filterable.cell.template verwendet werden, um die Eingabe anzupassen.

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

Hier ist mein 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>