Blazor コントロール
検証
コントロール > FlexGrid > データ操作 > データの編集 > 検証

Validation support for FlexGrid helps you to validate the data that you enter in the FlexGrid. Validation implements simple client-side validation which further improves the user experience without writing a bulk of validation code. In FlexGrid, validation can be done by handling the CellEditEnding event.

The GIF below shows the implementation of validation on the grid.

Data validation

 

The following code example demonstrates how to apply validations in a FlexGrid.

Razor
コードのコピー
@page "/validation"
@using BlazorIntro.Data
@using C1.Blazor.Core
@using C1.Blazor.Input
@using C1.Blazor.Grid
@using C1.DataCollection
@inject IJSRuntime JsRuntime
@inject WeatherForecastService ForecastService
<h1>FlexGrid Validation</h1>
<FlexGrid @ref="grid" AutoGenerateColumns="false" ItemsSource="forecasts"  CellEditEnding="OnCellEditEnding" >
     <FlexGridColumns>
         <GridColumn Header="Date" Binding="Date" Format="d"></GridColumn>
        <GridColumn Header="Temp C" Binding="TemperatureC" Format="n2"></GridColumn>
         <GridColumn Header="Temp F" Binding="TemperatureF"></GridColumn>
         <GridColumn Header="Summary" Binding="Summary"></GridColumn>
     </FlexGridColumns>
 </FlexGrid>
 @code {
     WeatherForecast[] forecasts;
     protected override async Task OnInitializedAsync()
     {
         forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
     }
     public FlexGrid grid;
     protected void OnCellEditEnding(object sender, GridCellEditEventArgs e)
     {
         var _originalValue = grid[e.CellRange.Row, e.CellRange.Column];
         int value;
         Int32.TryParse(((C1TextBox)grid.ActiveEditor).Text, out value);
         ValidationMessage _res = isValidValue(value, grid.Columns[e.CellRange.Column].Binding);
         if (_res != null && !(bool)_res.isVal)
         {
             e.Cancel = true;
             DisplayAlert(_res.Message);
             (grid.ActiveEditor as C1TextBox).Text = _originalValue.ToString();
         }
     }
    private ValidationMessage isValidValue(object value, string prop)
     {
        if (prop == "TemperatureC" && ((int)value < 20 || (int)value > 55))
         {
             return new ValidationMessage() { isVal = false, Message = "Value should be between 20 and 55!" };
         }
         return new ValidationMessage() { isVal = true };
     }
    class ValidationMessage
     {
         public bool isVal { get; set; }
         public string? Message { get; set; }
     }
    private Task<bool> DisplayAlert(string message)
     {
         return JsRuntime.InvokeAsync<bool>("alert", message).AsTask();
     }
 }