[Blazor] 버튼 클릭할 경우 XML 파일 열기(1) - Telerik에서 sorting 가능한 버튼 생성

버튼을 클릭하면 어떤 경로에 있는 xml 파일을 열어보자

 

우선 나는 Blazor로 프로젝트를 진행중이고, UI로는 Telerik을 사용하고 있다.

이 상황에서 내가 해야할 것은 Telerik Grid 안에 db 내용으로 button을 만들고, 그 버튼을 클릭할 경우

그 db 내용과 일치하는 파일명의 xml을 열어야 했다.

 

결과를 가지고 다시 설명하자면

아래의 화면에서 DCN No. 컬럼에 DB에 있는 dcn_no 내용을 이용하여 버튼을 생성하고,

이 버튼을 클릭할 경우 특정 폴더에 있는 dcn_no.xml 파일을 열 것이다.

업무 프로젝트이기 때문에 지저분하게 내용을 가린 점 이해 부탁드립니다,, ㅠ

 

여기서 내가 헤맸었던 2가지 포인트는 아래와 같다.

1. Telerik의 button UI를 이용하니 깔끔하게 버튼이 생성됐지만 sorting 기능이 안 먹힘

2. xml 파일 열기

 

순서대로 하나씩 알아가보자.

 

 

1. Telerik을 이용한 button을 생성하는데 sorting도 되게 구현하기

우선 Telerik에는 button UI가 있다.

Blazor Button Demos - Overview | Telerik UI for Blazor

 

이 Button UI를 이용하여 Telerik Grid에 버튼을 구현했더니 문제없이 생성은 되지만,

sorting 기능이 수행되지 않았다.

찾아보니 TelerikButton은 sorting 기능을 지원하지 않는다고 한다.

<GridColumn Width="50px" Title="DCN No.">
        <Template>
            @{
                W_DCN currItem = context as W_DCN;
                <TelerikButton OnClick="@(() => XML_Load(currItem.DCN_NO))">@currItem.DCN_NO</TelerikButton>
            }
        </Template>
</GridColumn>

 

그래서 Telerik의 GridColumn 안에 일반 button을 넣고 CSS를 TelerikButton과 유사하게 수정했다.

<GridColumn Field="@nameof(W_DCN.DCN_NO)" Width="50px" Title="DCN No." Lockable="true">
    <Template >
        @{ 
            W_DCN currItem = context as W_DCN;
            <button class="btn_dcnno" @onclick="(() => XML_Load(currItem.DCN_NO))">@currItem.DCN_NO</button>
        }
    </Template>
</GridColumn>

.btn_dcnno {
    padding: 4px 8px;
    margin: auto;
    color: #424242;
    background-color: #f5f5f5;
    background-image: linear-gradient(raba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    align-content: center;
    font-size: 14px;
    text-align: center;
    align-items: center;
    gap: 4px;
}

 

그랬더니 Telerik UI와 이질감도 들지 않으면서 sorting 기능도 잘 작동한다.

다음 포스팅에서는 Button을 생성했으니 XML file을 열어보겠다.