BlazorDatasheet Cell 에 Button 표시하기

BlazorDatasheet Cell 에 Button 표시하기

 

BlazorDatasheet 에서 Cell 에 Button을 표시하기 위해서는 BaseRenderer 를 이용하여 ButtonRenderer 를 만들어 CustomCellType 을 정의해 사용하면 됩니다.

먼저 ButtonRenderer.razor 파일을 추가합니다.

@inherits BlazorDatasheet.Render.BaseRenderer

<MudButton Variant="Variant.Filled"
           Style="background-color: lightgray; color: black;border-radius: 0;height:100%;box-shadow: none;"
           FullWidth="true" OnClick="OpenDialog">@Text</MudButton>

@code {
    private string Text => Cell.Value?.ToString() ?? "";

    private async Task OpenDialog()
    {
    }
}

MudBlazor 를 이용해 MudButton 으로 만들었고 style 로 버튼의 모양을 정의했습니다.

화면에서는 아래와 같이 사용합니다.

@page "/"
@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);

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

        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; }
    }
}

위 코드를 보면 알수 있듯이 button cell type 을 "button" 으로 정의한 후

SetType 을 이용해 컬럼 영역에 "button" Type 을 지정합니다.

 

결과