C# Blazor RadzenGrid 체크박스 추가하기

C# Blazor RadzenGrid 체크박스 추가하기

 

RadzenGrid 에서 체크박스를 사용하는 방법입니다.

RadzenGrid 에서는 SelectionMode 를 Multiple로 해도 체크박스는 생기지 않습니다.

수동으로 체크박스를 추가하고 내부 로직을 처리해야합니다.

아래는 체크박스를 수동으로 처리한 코드입니다.

@page "/radzengrid"

<RadzenCard class="m-4" style="display: flex; align-items: center; gap: 0.5rem">
    <RadzenCheckBox @bind-Value=@allowRowSelectOnRowClick Name="CheckBox1" />
    <RadzenLabel Text="Allow row select on row click" Component="CheckBox1" />
    <RadzenButton Text="Clear selected rows" Click="@(args => selectedEmployees = null)" />
</RadzenCard>
<RadzenDataGrid @ref="grid" AllowRowSelectOnRowClick="@allowRowSelectOnRowClick" AllowFiltering="true" FilterPopupRenderMode="PopupRenderMode.OnDemand" 
                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowPaging="true" PageSize="4"
                AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="200px"
                SelectionMode="DataGridSelectionMode.Multiple" @bind-Value=@selectedEmployees class="m-4">
    <Columns>
        <RadzenDataGridColumn TItem="Employee" Width="60px" Sortable="false" Filterable="false">
            <HeaderTemplate>
                <RadzenCheckBox TabIndex="-1" TriState="false" TValue="bool?" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "Select all items" }})"
                                Value="@(selectedEmployees == null || selectedEmployees?.Any() != true ? false : !employees.All(i => selectedEmployees.Contains(i)) ? null : employees.Any(i => selectedEmployees.Contains(i)))"
                                Change="@(args => selectedEmployees = args == true ? employees.ToList() : null)" />
            </HeaderTemplate>
            <Template Context="data">
                <RadzenCheckBox TabIndex="-1" TriState="false" Value="@(selectedEmployees != null && selectedEmployees.Contains(data))" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "Select item" }})"
                                TValue="bool" Change=@(args => { if(!allowRowSelectOnRowClick) { grid.SelectRow(data); }}) />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Employee" Property="Name" Title="Name" />
        <RadzenDataGridColumn TItem="Employee" Property="Age" Title="Age" />
        <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Title="Employee ID" />
        <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" />
        <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
    </Columns>
</RadzenDataGrid>
@code {
    bool allowRowSelectOnRowClick = true;
    IEnumerable<Employee> employees;
    IList<Employee> selectedEmployees;
    RadzenDataGrid<Employee> grid;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        employees = GetEmployees();
    }

    private List<Employee> GetEmployees()
    {
        List<Employee> employees = new List<Employee>();

        employees.Add(new Employee() { Name = "A", Age = 10, EmployeeID = "001", HireDate = DateTime.Parse("2001-02-04"), Country = "서울" });
        employees.Add(new Employee() { Name = "B", Age = 19, EmployeeID = "002", HireDate = DateTime.Parse("2001-01-06"), Country = "서울" });
        employees.Add(new Employee() { Name = "C", Age = 20, EmployeeID = "003", HireDate = DateTime.Parse("2001-09-14"), Country = "서울" });
        employees.Add(new Employee() { Name = "D", Age = 14, EmployeeID = "004", HireDate = DateTime.Parse("2001-06-30"), Country = "서울" });

        return employees;
    }


    public class Employee
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string EmployeeID { get; set; }
        public DateTime HireDate { get; set; }
        public string Country { get; set; }
    }
}

 

위 코드를 보면 알수 있듯이 Column 정의시 HearderTemplate 으로 헤더의 CheckBox 를 정의하고  Template 을 이용해 내용 부분의 CheckBox 를 정의합니다.

전체 체크박스의 체크 여부는 전체 데이터에서 체크된 내용을 확인해 일부만 체크된 경우 - 로 표시 하고 모두 체크된 경우 체크로 표시합니다. 

결과

 

Allow row select on row click 를 체크한 경우 row 클릭시 체크박스가 체크됩니다.