MudBlzaor MudDataGrid 에서 입력 가능한 셀 만들기

MudBlzaor MudDataGrid 에서 입력 가능한 셀 만들기

 

MudDataGrid 에서 CellTemplate 을 이용하면 Cell 에 여러 컨트롤을 올려서 사용할 수 있습니다.

사용자가 데이터를 직접 입력하고 수정할 수 있는 그리드를 만드는 방법을 알아봅니다.

MudDataGrid 에는 Colums 테그를 이용해 각 컬럼을 정의할 수 있습니다.

기본 PropertyColumn이 아닌 TemplateColumn을  사용하면 커스텀한 컬럼정의가 가능합니다. 

CellTemplate에 MudTextField 적용하여 입력가능한 Cell 이 되도록합니다.

<MudDataGrid T="ConditionItem" Items="_conditions" Dense="true">
    <Columns>
        <TemplateColumn>
            <HeaderTemplate>
                <div style="text-align: center; width: 100%;">Value</div>
            </HeaderTemplate>
            <CellTemplate>
                <MudTextField @bind-Value="context.Item.Value" Margin="Margin.Dense" 
                              Style="margin: 0; padding: 0; height: 20px; line-height: 20px;" />
            </CellTemplate>
        </TemplateColumn>
    </Columns>
</MudDataGrid>

MudTextField Style 정의는 MudTextField 가 Cell 안에 들어가면 행 높이가 높아져 높이를 줄이기 위한 내용입니다.

 

결과

MudTextField 는 Validation, OnFocus(입력 시작), OnBlur(입력 종료) 를 이용하여 입력값에 대한 핸들링도 가능합니다.