두 개의 Datasheet 간 클릭 이동 연동하기 - BlazorDatasheet

두 개의 Datasheet 간 클릭 이동 연동하기 - BlazorDatasheet

 

두 개의 Datasheet를 나란히 배치하고, 오른쪽 시트에서 셀을 클릭하면 왼쪽 시트의 선택 셀 위치에 값이 채워지는 기능을 구현하는 방법입니다.

목표 : 오른쪽 시트의 셀을 클릭하면, 왼쪽 시트의 선택된 위치에 해당 값 복사

@page "/clickmovedatasheet"
@rendermode InteractiveServer

<MudGrid Spacing="2" Style="height: 100vh;">
    <!-- 왼쪽 시트 -->
    <MudItem xs="6">
        <div style="overflow:auto;">
            <Datasheet Sheet="leftsheet" Virtualise="true" />
        </div>
    </MudItem>

    <!-- 오른쪽 시트 -->
    <MudItem xs="6">
        <div style="overflow:auto;">
            <Datasheet Sheet="rightsheet" Virtualise="true" />
        </div>
    </MudItem>
</MudGrid>


@code {
    // ✅ Product 클래스 정의
    // 각 상품은 이름, 가격, 수량, 빈 필드 3개(테스트용)를 가진다.
    public class Product
    {
        public string Name { get; set; } = string.Empty;
        public string Empty1 { get; set; } = string.Empty;
        public string Empty2 { get; set; } = string.Empty;
        public string Empty3 { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Quantity { get; set; }
    }

    // ✅ Datasheet 인스턴스 2개 선언
    // 왼쪽 시트(leftsheet)와 오른쪽 시트(rightsheet)
    private Sheet leftsheet = new Sheet(0, 0);
    private Sheet rightsheet = new Sheet(0, 0);

    protected override void OnAfterRender(bool firstRender)
    {
        // 처음 렌더링될 때만 실행 (중복 초기화 방지)
        if (firstRender)
        {
            // 테스트용 Product 리스트 생성
            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 }
            };

            // ────────────────────────────────────────────────────────────────
            // 왼쪽 시트 초기화
            // ────────────────────────────────────────────────────────────────

            // 화면 업데이트 및 기록 일시 중지
            leftsheet.ScreenUpdating = false;
            leftsheet.Commands.PauseHistory();
            leftsheet.BatchUpdates();

            // Product 속성 수만큼 열(column)을 가진 시트 생성
            leftsheet = new Sheet(products.Count, typeof(Product).GetProperties().Length);

            // Product 데이터를 object[][] 형태로 변환 (Datasheet가 받는 포맷)
            object[][] leftData = products.Select(p => new object[]
            {
                p.Name, p.Price, p.Empty1, p.Empty2, p.Empty3, p.Quantity
            }).ToArray();

            // 시트에 데이터 주입
            leftsheet.Cells.SetValues(0, 0, leftData);

            // 배치 업데이트 종료 및 화면 갱신 재개
            leftsheet.EndBatchUpdates();
            leftsheet.Commands.ResumeHistory();
            leftsheet.ScreenUpdating = true;

            // ────────────────────────────────────────────────────────────────
            // 오른쪽 시트 초기화
            // ────────────────────────────────────────────────────────────────

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

            // 오른쪽 시트는 2열(Name, Price)만 사용
            rightsheet = new Sheet(products.Count, 2);

            // 오른쪽 시트에 표시할 데이터 구성
            object[][] rightData = products.Select(p => new object[]
            {
                p.Name, p.Price
            }).ToArray();

            // 시트에 데이터 채우기
            rightsheet.Cells.SetValues(0, 0, rightData);

            // 업데이트 마무리
            rightsheet.EndBatchUpdates();
            rightsheet.Commands.ResumeHistory();
            rightsheet.ScreenUpdating = true;

            // 화면 갱신 강제 트리거
            StateHasChanged();

            // ────────────────────────────────────────────────────────────────
            // 오른쪽 시트 셀 선택 이벤트
            // ────────────────────────────────────────────────────────────────
            // 사용자가 오른쪽 시트의 셀을 클릭했을 때,
            // 해당 값(selected.Value)을 왼쪽 시트의 현재 선택된 위치(row, col)에 복사함.
            rightsheet.Selection.CellsSelected += (s, e) =>
            {
                // 현재 선택된 영역 정보 가져오기
                var selectedRange = rightsheet.Selection.Ranges.FirstOrDefault();
                if (selectedRange != null)
                {
                    // 선택된 셀 중 첫 번째 셀 값
                    var selected = e.Cells.FirstOrDefault();
                    if (selected == null) return;

                    // 왼쪽 시트의 현재 활성 셀 위치
                    int col = leftsheet.Selection.ActiveCellPosition.col;
                    int row = leftsheet.Selection.ActiveCellPosition.row;

                    // 범위 검증 후 값 복사
                    if (row >= 0 && col >= 0)
                    {
                        leftsheet.Cells.SetValue(row, col, selected.Value);
                    }
                }
            };
        }
    }
}

Selection.CellsSelected 이벤트를 이용해 셀영역이 하나이상인 경우 값을 가져와 설정해줍니다.

결과