[Blazor] Telerik - TabStrip에서 호출한 razor Page reload하기(2) - Telerik 3.0 version

Telerik for Blazor가 3.0.0으로 업데이트 되면서 아주 많은 게 바꼈다.

그 중 내 프로젝트의 거의 모든 page의 Grid에서 쓰고 있던 TotalCount가 없어진 것과,

GridData와 OnRead 이벤트를 함께 사용할 수 없다는 게 에러의 주된 원인이었다.

텔레릭은 왜 하위 호환성을 완벽하게 무시하고 업데이트를 진행한 걸까,,, 부들부들

UI for Blazor 3.0.0

 

 

[Blazor] Telerik - TabStrip에서 호출한 razor Page Reload 하기

아무튼 저번에 해결했던 TabStrip에서 razor파일 호출하기는 제대로 동작하지 않는다,, 다시 수정해보자,,

지난 포스팅에서 정리한 최종 코드는 다음과 같다.

 

<TelerikGrid Data="@GridData" TotalCount="@Total" OnRead="@ReadItems"
             Sortable="true"
             SortMode="@SortMode.Single"
             Pageable="true"
             PageSize="10"
             Width="1600px"
             ScrollMode="@GridScrollMode.Scrollable">
    <GridColumns>
        <GridColumn Field="@nameof(W_CAD.DCN_NO)" Title="DCN No." Lockable="true" Width="100px" />
        <GridColumn Field="@nameof(W_CAD.DCT_NO)" Title="DCT No." Lockable="true" Width="150px" />
    </GridColumns>
</TelerikGrid>


@Code{
	[Parameter] public string DCT_NO { get; set; }
    [Parameter] public string ENV_NO { get; set; }

	public List<W_CAD> SourceData { get; set; }
    public List<W_CAD> GridData { get; set; }
    public int Total { get; set; } = 0;
    
    public DataSourceRequest CurrentRequest { get; set; }
    

	protected override async Task OnParametersSetAsync()
    {
        SourceData = await ObjectService.GetCadList(DCT_NO, ENV_NO);
        SetGridData();
    }
        
	protected void ReadItems (GridReadEventArgs args)
    {
        CurrentRequest = args.Request;
        SetGridData();
    }

    private void SetGridData()
    {
        if (CurrentRequest == null)
        {
            return;
        }

        var datasourceResult = SourceData.ToDataSourceResult(CurrentRequest);
        GridData = (datasourceResult.Data as IEnumerable<W_CAD>).ToList();
        Total = datasourceResult.Total;
    }
}

여기서 에러가 나는 부분은 TelerikGrid에서 Data와 TotalCount를 정의한 부분이다.

Telerik 문서를 보면 Data와 TotalCount는 OnRead 이벤트 메서드인 ReadItems() 메서드 안에서

args.Data, args.Total 변수를 이용하여 값을 지정해야 한다고 한다.

 

위의 코드를 잠깐 설명하자면 A라는 페이지의 TabStrip에서 W_CAD 페이지를 호출하는데 parameter를 넘겨 호출한다.

parameter로 호출된 W_CAD 페이지에서는 parameter가 바뀔 때마다 OnParametersSetAsync()메서드를 실행하고,

ReadItems는 W_CAD 페이지의 그리드가 변경될 때(필터, 정렬, 페이지) 실행된다.

 

 

위의 코드에서는 SetGridData() 메서드에서 GridData에 W_CAD 데이터를 저장하여 Grid를 reload했다.

하지만 Telerik 버전 3.0.0에서는 OnRead이벤트 메서드 안에서만 Grid의 데이터 변경이 가능하다.

그런데 OnRead 이벤트 메서드인 ReadItems()은 parameter가 변경될 때마다 실행되는 것이 아니라,

현재 페이지의 그리드 속성이 변경될 때마다 실행된다.

따라서 어떤 페이지의 TabStrip에서 해당 페이지를 호출할 때마다 새로운 데이터로 reload되지 않는다는 것이다.

그래서 그리드 ref를 사용하여 강제로 refresh 해주었다.

<TelerikGrid @ref="@GridRef" TItem="@W_CAD" OnRead="@ReadItems" //grid ref 및 TItem 선언
             Sortable="true"
             SortMode="@SortMode.Single"
             Pageable="true"
             PageSize="10"
             Width="1600px"
             ScrollMode="@GridScrollMode.Scrollable">
    <GridColumns>
        <GridColumn Field="@nameof(W_CAD.DCN_NO)" Title="DCN No." Lockable="true" Width="100px" />
        <GridColumn Field="@nameof(W_CAD.DCT_NO)" Title="DCT No." Lockable="true" Width="150px" />
    </GridColumns>
</TelerikGrid>


@Code{
	[Parameter] public string DCT_NO { get; set; }
    [Parameter] public string ENV_NO { get; set; }

	public List<W_CAD> SourceData { get; set; }
    public TelerikGrid<W_CAD> GridRef { get; set; }
   

	protected override async Task OnParametersSetAsync()
    {
        SourceData = await ObjectService.GetCadList(DCT_NO, ENV_NO);
        if(GridRef != null)
        {
        	await GridRef.SetState(GridRef.GetState()); //Grid 강제 refresh
        }
    }
        
	protected void ReadItems (GridReadEventArgs args)
    {
        var datasourceResult = SourceData.ToDataSourceResult(args.Request);
        args.Data = datasourceResult.Data; //Grid Data 변경
        args.Total = datasourceResult.Total;
    }
}

 

 

<Reference>

Blazor Grid - Manual Operations | Telerik UI for Blazor

Blazor Grid Refresh Data | Telerik UI for Blazor