BlazorDatasheet Cell 에 Tooltip 적용하기

BlazorDatasheet Cell 에 Tooltip 적용하기

 

셀의 내용에 마우스를 올렸을 때 추가 정보를 보여주는 방법을 알아봅니다.

간단한 Custom CellType과 Renderer를 이용해 셀에 Tooltip을 표시할 수 있습니다.

 

TooltipCellRenderer 정의

먼저  Renderer 를 정의합니다.

TooltipCellRenderer.razor

@using BlazorDatasheet.Core.Data
@using BlazorDatasheet.Render
@inherits BlazorDatasheet.Render.BaseRenderer

<div title="@tooltipText" style="min-height: 1em; cursor: help;">
    @if (!string.IsNullOrWhiteSpace(Cell.Value?.ToString()))
    {
        <MudText>@Cell.Value</MudText>
    }
    else
    {
        <MudText>&nbsp;</MudText>
    }
</div>

@code {
    private string tooltipText;

    protected override void OnInitialized()
    {
        base.OnInitialized();
    }

    protected override void OnParametersSet()
    {
        if (string.IsNullOrWhiteSpace(Cell.Value?.ToString()))
        {
            tooltipText = "No Data";
        }
        else
        {
            tooltipText = Cell.Value?.ToString() ?? "";
        }
    }
}

 

• title 속성을 이용해 마우스 오버 시 Tooltip을 표시합니다.
• 값이 비어 있으면 "No Data"를 표시합니다.
• 공백인 경우 <MudText>&nbsp;</MudText> 이렇게 해줘야 데이터가 없어도 tooltip 이 표시됩니다.

 

Custom CellType 정의

새로운 CellType 인 tooltip 타입을 추가하고, 특정 컬럼에 적용하도록 설정합니다.

<Datasheet Sheet="sheet" CustomCellTypeDefinitions="CustomTypes"  Virtualise="true">
</Datasheet>
    
@code {
    private Sheet sheet = new Sheet(0,0);
    private Dictionary<string, CellTypeDefinition> CustomTypes { get; } = new();

    protected override void OnInitialized()
    {
        CustomTypes.Add("button", CellTypeDefinition.Create<TextEditorComponent, ButtonRenderer>());
        
        // Tooltip Celltype 정의
        CustomTypes.Add("tooltip", CellTypeDefinition.Create<TextEditorComponent, TooltipCellRenderer>());
    }
    
    protected override void OnAfterRender(bool firstRender)
    {

        sheet.ScreenUpdating = false;
        sheet.Commands.PauseHistory();
        sheet.BatchUpdates();

        // 제품 데이터 리스트
        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.SetType(new ColumnRegion(1), "button");

        // Tooltip Celltype 적용
        sheet.Cells.SetType(new ColumnRegion(2), "tooltip");

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

        if (firstRender)
        {
            TestBinding();
            StateHasChanged();
        }

        base.OnAfterRender(firstRender);
    }
    
    private class Product
    {
        public string Name { get; set; }
        public double Price { get; set; }
        public int Quantity { get; set; }
    }
}

결과

마우스를 올리면 Tooltip이 표시됩니다.

- 입력된 값 표시

- 데이터 없는 경우 No Data 표시