[Blazor] Telerik Grid - GetState, SetState (Grid State 조작하기)

오늘의 미션은 Telerik Grid의 상태를 저장하고 설정하기

우선, 내 상황은 A 페이지에 Grid가 있고 Grid 안의 버튼을 클릭하면 B페이지로 이동한다.

B페이지에서 뒤로가기 버튼을 클릭하면 다시 A 페이지로 이동하게 되는데,

이 때 B페이지로 이동하기 전의 Grid 상태가 유지되었음 한다.

 

이게 A페이지이다.

A페이지에서 ViewDCT 버튼을 클릭하면 B페이지로 넘어간다.

 

B페이지는 이렇다.

B페이지에서 Click to go back 버튼을 클릭하면 다시 A 페이지로 넘어간다.

 

여기서 내가 하고싶은 건 A페이지 Grid의 필터, 페이지 등의 상태가

B페이지에서 A페이지로 넘어갔을 때도 변하지 않았음 하는 것이다.

 

Name이라는 필드에 오름차순 정렬을 주었고, 2페이지의 6번째 row를 클릭했다면,

B페이지에서 뒤로가기를 했을 때도 이 상태 그대로여야 한다는 것이다.

 

 

처음에는 이 예제를 참고해서 했더니 계속 Pre-Render 모드에서 JSinterop은

OnAfterRenderAsync 메소드에서만 실행가능 하다는 에러가 났다.

분명 OnAfterRenderAsync 메소드에서 JS 호출했는데,,

Blazor DataGrid Demos - Persist State | Telerik UI for Blazor

 

암튼 그래서 그냥 진짜 간단하게 하면 안돼?? 하는 심정으로

혼자 막 키보드 뚜들뚜들 했더니 너무 간단한 코드로 구현할 수 있었다.

<TelerikGrid @ref="@Grid">
</TelerikGrid>

@code
{
	TelerikGrid<W_DCN> Grid { get; set; }
}

우선, TelerikGrid 변수를 생성하고 Grid에 참조시킨다.

 

public GridState<W_DCN> GridState { get; set; } = null;

그리고 기존에 존재하는 Service에 GridState 변수를 하나 추가해준다.

 

@code
{
	protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            await Grid.SetState(DcnListService.GridState);
        }
    }
    
    private void DctPage_Load(string dcn_no) //View DCT 버튼을 클릭했을 경우 실행 함수
    {
        DcnListService.GridState = Grid.GetState();
        NavManager.NavigateTo("/dcnlist/" + dcn_no);
    }
}

A페이지에서 View DCT 버튼을 클릭할 경우 실행되는 함수에서

현재 Grid의 상태를 가져오는 GetState 속성을 사용하여 Service의 GridState변수에 데이터를 저장한다.

그리고 OnAfterRenderAsync 함수에서 Service 의 GridState 변수의 데이터를 이용하여 Grid의 상태를 SetState한다.

 

[Grid].SetState(gridstate) - Grid의 상태를 설정한다.

[Grid].GetState - Grid의 상태를 가져온다.

 

이렇게 하면 B페이지로 갔다가 다시 A페이지로 돌아왔을 때

기존의 grid 상태가 모두 반영되어 있는 것을 확인할 수 있다 !!