muddatagrid

muddatagrid 에서 drag 로 여러 cell 을 선택 할수 있도록 처리하는 방법


MudDataGrid에서 마우스 드래그를 통해 여러 셀을 선택할 수 있도록 처리하는 방법은 MudTable과 유사한 접근 방식을 사용해야 합니다. 아래는 MudDataGrid에서 드래그하여 셀 선택을 가능하게 하는 예제입니다.

Blazor 페이지 (Razor 파일):

razor
Wrap
Copy
@page "/cell-selection-datagrid"
@inject IJSRuntime JSRuntime

<MudDataGrid T="Item" Items="@Items" Class="cell-selection-datagrid">
    <Columns>
        @foreach (var property in typeof(Item).GetProperties())
        {
            <PropertyColumn Property="@property.Name" />
        }
    </Columns>
</MudDataGrid>

@code {
    public class Item
    {
        public string Column1 { get; set; }
        public string Column2 { get; set; }
        public string Column3 { get; set; }
    }

    private List<Item> Items = new List<Item>
    {
        new Item { Column1 = "A1", Column2 = "B1", Column3 = "C1" },
        new Item { Column1 = "A2", Column2 = "B2", Column3 = "C2" },
        new Item { Column1 = "A3", Column2 = "B3", Column3 = "C3" }
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initializeCellSelection");
        }
    }
}
CSS (App.css 또는 페이지 내 스타일):

css
Wrap
Copy
.cell-selection-datagrid .mud-table-cell {
    border: 1px solid #ddd;
    cursor: pointer;
}

.cell-selection-datagrid .selected {
    background-color: #cce5ff;
}
JavaScript (wwwroot/index.js 또는 다른 JS 파일에 추가):

javascript
Wrap
Copy
function initializeCellSelection() {
    let isDragging = false;
    let startCell;
    let endCell;

    document.addEventListener('mousedown', function(event) {
        if (event.target.closest('.mud-table-cell')) {
            isDragging = true;
            startCell = event.target.closest('.mud-table-cell');
            endCell = startCell;
            updateSelection(startCell, endCell);
        }
    });

    document.addEventListener('mousemove', function(event) {
        if (isDragging && event.target.closest('.mud-table-cell')) {
            endCell = event.target.closest('.mud-table-cell');
            updateSelection(startCell, endCell);
        }
    });

    document.addEventListener('mouseup', function() {
        isDragging = false;
    });

    function updateSelection(start, end) {
        let cells = document.querySelectorAll('.mud-table-cell');
        cells.forEach(cell => cell.classList.remove('selected'));

        let startRow = start.closest('tr').rowIndex;
        let endRow = end.closest('tr').rowIndex;
        let startCol = Array.from(start.closest('tr').cells).indexOf(start);
        let endCol = Array.from(end.closest('tr').cells).indexOf(end);

        let minRow = Math.min(startRow, endRow);
        let maxRow = Math.max(startRow, endRow);
        let minCol = Math.min(startCol, endCol);
        let maxCol = Math.max(startCol, endCol);

        for (let i = minRow; i <= maxRow; i++) {
            let row = document.querySelector('.cell-selection-datagrid tbody').rows[i];
            for (let j = minCol; j <= maxCol; j++) {
                row.cells[j].classList.add('selected');
            }
        }
    }
}
설명:
Blazor 페이지에서는 MudDataGrid를 사용하여 데이터를 표시하고, 각 셀에 스타일을 적용할 수 있도록 Class 속성을 추가합니다.
CSS는 셀의 기본 스타일과 선택된 셀의 스타일을 정의합니다. 여기서 .mud-table-cell 클래스를 사용하여 각 셀을 대상으로 합니다.
JavaScript는 마우스 이벤트를 감지하여 셀 선택을 관리합니다. mousedown, mousemove, mouseup 이벤트를 통해 드래그 시작, 진행, 종료를 처리하고, updateSelection 함수는 선택된 영역의 셀에 'selected' 클래스를 추가해 시각적으로 강조합니다.
이 방법을 통해 MudDataGrid에서 드래그하여 여러 셀을 선택할 수 있게 됩니다.