BlazorDatasheet Cell 값 변경 시 배경색 변경하기

BlazorDatasheet Cell 값 변경 시 배경색 변경하기

 

BlazorDatasheet Cell 값 변경 시 변경된 걸 표시하기 위해 배경색을 변경하는 방법을 알아봅니다.

sheet.Editor.BeforeEditAccepted 이벤트를 사용하여 처리가 가능합니다.'

BeforeEditAccepted 이벤트의 BeforeAcceptEditEventArgs 인자로 이전값과 현재 값을 알수 있어서

값을 비교하여 색을 변경하면 됩니다.

sheet.Editor.BeforeEditAccepted += (sender, e) =>
  {
      var prevCell = e.Cell;
      if (prevCell.Value != e.EditValue.Data)
      {
          sheet.SetFormat(new Region(e.Cell.Row, e.Cell.Col), new CellFormat() { BackgroundColor = "lightgray" });
      }
  };

위 코드를 보면 알 수 있듯이 e.Cell 에 이전 데이터 값이 있습니다.

e.Cell.Value 는 이전값이고 e.EditValue.Data 에는 변경된 값이 있어 비교 후

SetFormat 를 이용해 CellFormat 의 BackgroundColor 로 배경색을 변경하면 됩니다.

 

결과

 

전체코드

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

        // 셀 변경 시 이벤트로 값 변경 시 배경색 변경
        sheet.Editor.BeforeEditAccepted += (sender, e) =>
          {
              var prevCell = e.Cell;
              if (prevCell.Value != e.EditValue.Data)
              {
                  sheet.SetFormat(new Region(e.Cell.Row, e.Cell.Col), new CellFormat() { BackgroundColor = "lightgray" });
              }
          };
    }

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