BlazorDatasheet Cell 에 숫자 입력만 허용하기

BlazorDatasheet Cell 에 숫자 입력만 허용하기

 

BlazorDatasheet Cell 에 숫자 입력만 허용하기 위해서는 sheet.Validators 에 NumberValidator 를 이용하면 됩니다.

간단하게 아래와 같이 코드를 추가해주면 됩니다.

sheet.Validators.Add(new ColumnRegion(2), new NumberValidator(true));

위와같이 처리하고 화면에서 숫자말고 문자를 입력하는 경우 아래처럼 오류 창이 표시되며 편집이 마무리 되지 않습니다.

전체코드

@page "/counter"
@using BlazorDatasheet.Core.Validation
@using BlazorDatasheet.Edit.DefaultComponents
@using BlazorDatasheet.Render

@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<Datasheet Sheet="sheet" CustomCellTypeDefinitions="CustomTypes" />
<br />
<br />

@code {
    private Sheet sheet = new Sheet(0, 0);
    private Dictionary<string, CellTypeDefinition> CustomTypes { get; } = new();

    protected override void OnInitialized()
    {
        // button type 추가
        CustomTypes.Add("button", CellTypeDefinition.Create<TextEditorComponent, ButtonRenderer>());
        base.OnInitialized();
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            TestBinding();
            StateHasChanged();
        }

        base.OnAfterRender(firstRender);
    }

    private void TestBinding()
    {
        sheet.ScreenUpdating = false;
        sheet.Commands.PauseHistory();
        sheet.BatchUpdates();

        sheet = new Sheet(0, 0);

        // 제품 데이터 리스트
        List<Product> products = new List<Product>
        {
            new Product { Name = "Laptop", Price = 1200, Quantity = 5 },
            new Product { Name = "Keyboard", Price = 50, Quantity = 20 },
            new Product { Name = "Mouse", Price = 30, Quantity = 15 }
        };

        sheet = new Sheet(products.Count, typeof(Product).GetProperties().Count());

        // 데이터를 object[][] 배열로 변환
        object[][] values = products
            .Select(p => new object[] { p.Name, p.Price, p.Quantity })
            .ToArray();

        sheet.Cells.SetValues(0, 0, values);

        // 콤보에 사용될 데이터
        var names = new SourceValidator(new List<string> { "Laptop", "Keyboard", "Mouse" }, false);
        // 첫 번째 컬럼의 모든 셀을 "select" 타입으로 변경
        sheet.Cells.SetType(new ColumnRegion(0), "select");
        // 해당 컬럼에 SourceValidator 추가
        sheet.Validators.Add(new ColumnRegion(0), names);

        // button
        sheet.Cells.SetType(new ColumnRegion(1), "button");

        // number 만 허용
        sheet.Validators.Add(new ColumnRegion(2), new NumberValidator(true));

        sheet.EndBatchUpdates();
        sheet.Commands.ResumeHistory();
        sheet.ScreenUpdating = true;
    }

    private class Product
    {
        public string? Name { get; set; }
        public double Price { get; set; }
        public int Quantity { get; set; }
    }
}