[Blazor] Telerik Grid에서 중첩 클래스(Nested Class) 사용하기

원래 코드는 Grid에 하나의 Class 데이터를 뿌리는 것이었다.

그래서 다음과 같이 간단하게 구현할 수 있었다.

<TelerikGrid Data="@GridData" TotalCount="@Total_Voption" OnRead="@ReadItems_Voption"
             Sortable="true"
             SortMode="@SortMode.Single"
             Pageable="true"
             PageSize="10"
             Width="1600px"
             ScrollMode="@GridScrollMode.Scrollable">
    <GridColumns>
        <GridColumn Field="@nameof(V_OPTION_CAD.REP_TYPE)" Title="Rep. Type" Lockable="true" Width="200px" />
        <GridColumn Field="@nameof(V_OPTION_CAD.ALT)" Title="Alt." Lockable="true" Width="100px" />
        <GridColumn Field="@nameof(V_OPTION_CAD.REV)" Title="Rev." Lockable="true" Width="100px" />
        <GridColumn Field="@nameof(V_OPTION_CAD.Status)" Title="Status" Lockable="true" Width="200px" />
    </GridColumns>
</TelerikGrid>

@code
{
	public List<W_CAD> SourceData { get; set; }
    public List<W_CAD> GridData { get; set; }
    public int Total { get; set; } = 0;
    
    protected async override void OnInitialized()
    {
        SourceData = await ObjectService.GetCadList(DCT_NO, ENV_NO);
    }
    
    protected void ReadItems(GridReadEventArgs args)
    {
        var datasourceResult = SourceData.ToDataSourceResult(args.Request);
        GridData = (datasourceResult.Data as IEnumerable<W_CAD>).ToList();
        Total = datasourceResult.Total;

        StateHasChanged();
    }
}

 

ObjectService의 GetCadList 메소드는 DB에서 조건에 알맞는 데이터를 가져오는 메소드이다.

이 메소드를 통해 데이터 리스트를 가져온다.

 

ReadItems 메소드는 데이터가 많아 페이지수가 많을 경우,

한 페이지에 보여지는 데이터만 로드하여 performance를 최적화하는 메소드이다.

 

현 페이지에서 보여질 데이터만 GridData라는 변수에 저장하고

이 변수를 가지고 Grid를 생성한다.

내 GridData는 List<V_OPTION_CAD> 형으로 지정되어 있다.

따라서 GridData를 바인딩한 후 V_OPTION_CAD의 데이터를 각 컬럼의 값으로 뿌린다.

 

 

이 시점에서 돌발상황!!

첫번째 컬럼으로 INDEX NO를 추가해야 하는 상황이 생겼다.

V_OPTION_CAD는 db 모델로 이 클래스에 데이터를 추가할 수는 없다.

그래서 중첩 클래스를 사용하기로 했다.

 

CAD_INDEX라는 클래스 안에 기존의 V_OPTION_CAD 클래스는 내부 클래스(Nested Class)로 정의하고,

INDEX NO를 저장할 ROW_NUMBER 변수를 추가했다.

 

그리고 ReadItems 메소드에서 CAD_INDEX의 리스트인 Index_Option_List 변수에

V_OPTION_CAD 클래스의 데이터와 ROW_NUMBER 변수를 추가했고

Index_Option_List의 데이터를 GridData에 추가했다.

 

이 과정에서 가장 큰 문제는 Grid에 내부클래스의 값을 출력하는 것이었다.

원래는 "@nameof()"로 field값을 지정했는데

내부클래스의 값을 출력할 때는 nameof 없이 바로 [내부클래스.변수] 형식으로 사용해야 한다.

 

<TelerikGrid Data="@GridData" TotalCount="@Tota" OnRead="@ReadItems"
             Sortable="true"
             SortMode="@SortMode.Single"
             Pageable="true"
             PageSize="10"
             Width="1600px"
             ScrollMode="@GridScrollMode.Scrollable">
     <GridColumns>
        <GridColumn Field="@nameof(CAD_INDEX.ROW_NUMBER)" Title="#" Lockable="true" Width="50px" />
        <GridColumn Field="CAD.REP_TYPE" Title="REP. Type" Lockable="true" Width="200px" />
        <GridColumn Field="CAD.ALT" Title="Alt." Lockable="true" Width="100px" />
        <GridColumn Field="CAD.REV" Title="Rev." Lockable="true" Width="100px" />
        <GridColumn Field="CAD.Status" Title="Status" Lockable="true" Width="200px" />
    </GridColumns>
</TelerikGrid>

@code
{
	public List<W_CAD> SourceData { get; set; }
    public List<W_CAD> GridData { get; set; }
    public int Total { get; set; } = 0;
    public List<CAD_INDEX> Index_Option_List = new List<CAD_INDEX>();
    
	protected async override void OnInitialized()
    {
        SourceData = await ObjectService.GetCadList(DCT_NO, ENV_NO);
    }
    
    protected void ReadItems(GridReadEventArgs args)
    {
        var datasourceResult = SourceData.ToDataSourceResult(args.Request);

        List<V_OPTION_CAD> iteratableData = datasourceResult.Data.Cast<V_EG_CAD>().ToList();
        for(int i = 0; i < iteratableData.Count; i++)
        {
            Index_EG_List.Add(
                new CAD_INDEX
                {
                    CAD = iteratableData[i],
                    ROW_NUMBER = i + 1
                });
        }
        datasourceResult.Data = Index_Option_List;

        GridData = (datasourceResult.Data as IEnumerable<CAD_INDEX>).ToList();
        Total = datasourceResult.Total;

        StateHasChanged();
    }
        
    public class CAD_INDEX
	{
	    public V_OPTION_CAD CAD { get; set; }
     	public int ROW_NUMBER { get; set; }
   	}
}

 

 

 

<Reference>

GitHub - telerik/blazor-docs: Public Documentation for Telerik UI for Blazor components.