[Blazor] Telerik Grid의 DetailTemplate에 grid 추가하기

이런 식으로 Grid row를 확장하면 세부 그리드가 나타나도록 소스를 작성할 것이다.

 

<TelerikGrid Class="DcnList"
	     TItem="@MainModel"
             OnRead="@OnReadHandler"
             OnRowExpand="@OnRowExpandHandler"
             Pageable="true" PageSize="5" FilterMode="@GridFilterMode.FilterMenu" Sortable="true">
    <DetailTemplate>
        @{
            if(detail != null)
            {
                <table class="detail_table">
                    <tbody>
                        @for (int i = 0; i < detail.Count; i += 2)
                        {
                            <tr>
                                <th>@detail.Keys.ToList()[i]</th>
                                <td>@detail.Values.ToList()[i]</td>

                                @if (i + 1 < detail.Count)
                                {
                                    <th>@detail.Keys.ToList()[i + 1]</th>
                                    <td>@detail.Values.ToList()[i + 1]</td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>
            }
        }
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    async Task OnRowExpandHandler(GridRowExpandEventArgs args)
    {
        W_DCN item = args.Item as W_DCN;
        Dictionary<string, object> dcn = await DcnListService.GetDetail(item.DCN_NO);
        detail = dcn;
    }
}

<DetailTemplate>이 Grid를 확장했을 때 나타나는 부분이다. 이 부분에 Telerik Grid를 포함하여 나타낼

무언가를 넣어주면 된다.

 

Grid의 속성으로 OnRowExpand event를 추가해준다. 이 event는 Grid를 expand했을 때 실행되는 것으로

위의 코드에서는 grid를 expand했을 때 dictionary를 생성하여 이 dictionary를 사용하여 확장된 부분에 table을 만든다.

 

 

DetailTemplate의 +기호 컬럼의 style을 조절하고싶다면 아래와 같이 하면 된다.

<style>
    .DcnList .k-grid-content colgroup col:first-of-type,
    .DcnList .k-grid-header thead th:first-of-type,
    .DcnList .k-grid-header colgroup col:first-of-type{
        width: 12px;
        padding: 0 0 0 0;
    }

    .DcnList .k-grid-content td.k-hierachy-cell * {
        width: 12px;
        padding: 0 0 0 0;
    }
</style>

.DcnList는 TelerikGrid Class 이름으로 개인의 클래스명을 집어넣으면 된다.

이렇게 하면 +기호 컬럼의 width를 조절할 수 있다.

 

 

 

<Reference>

Blazor DataGrid Demos - Hierarchy | Telerik UI for Blazor

 

style 조절 Reference

Is there a grid setting to not show the expander column completely? in UI for Blazor | Telerik Forums