[Blazor] Tererik 사용하기
Blazor를 이용하여 웹개발을 진행하던 중 sort, filter, paging 등의 기능이 포함된 table이 요구되었다.
그래서 blazor grid를 찾아보던 중 가장 많이 사용되고 유명한 Tererik을 사용하게 되었다.
(참고로 나는 Blazor Server App을 사용했으며 이 포스팅은 Server App 기준으로 작성되었다.
혹시 Blazor WebAssembly App을 사용하는 사람은 아래의 Client-Side Tutorial을 참고하면 좋을 것 같다.)
그렇다면 Tererik은 어떻게 사용하는 걸까 !!??
1. Telerik UI for Blazor components 설치
Tererik UI for Blazor에는 무료인 Trial Version과 상업용 Commercial Version이 있다.
나는 무료인 Trial Version을 설치했다.
아래의 페이지에서 'Download Free Trial'을 클릭하고 회원가입 후 설치가 가능하다.
Native Blazor Components & Grid with 100+ features | Telerik UI for Blazor
Cut development time & cost with high-performing Blazor Grid and native, easy-to-customize UI components to cover any scenario. Every 6 weeks new component is added!
www.telerik.com
2. Blazor Project 생성하기
Visual Studio에서 Create a new project를 클릭한 후 [Blazor App]을 선택한다.
Blazor App에는 Blazor Server App과 Blazor WebAssembly App 두가지가 있다.
나는 Blazor Server App 프로젝트를 생성했다.
3. Blazor Project에 Tererik Component 추가하기
앞서 다운 받은 Tererik UI for Blazor Component를 설치한다.
여기서 중요한 것은 설치 도중 Set up Tererik NuGet package source를 선택해야 한다는 것이다.
이것을 선택하면 Tererik NuGet이 자동으로 구성된다.
그런 다음 Visual Studio로 돌아가 앞서 생성한 Blazor Project를 오른쪽 클릭하여
Manage NuGet Packages를 선택한다.
NuGet Manager에서 Browse 탭을 선택하고 Tererik.UI.for.Blazor.Trial을 검색하여 설치한다.
상업용 라이센스를 가지고 있다면 Tererik.UI.for.Blazor를 설치하면 된다.
NuGet을 설치한 후 Project의 ~/Pages/_Host.cshtml 파일에 telerik-blazor.js와 Theme stylesheet를 추가해준다.
아래의 코드에서 자신의 라이센스와 알맞은 소스를 붙여넣으면 된다.
<head>
<!--상업용 라이센스-->
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
<!-- Trial 라이센스 -->
<script src="_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js" defer></script> <!--Trial 라이센스-->
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" />
</head>
~/Startup.cs 파일을 열어 Tererik Blazor 서비스를 등록해준다.
namespace MyBlazorAppName
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
//more code may be present here
services.AddTelerikBlazor();
}
//more code may be present here
}
}
~/_Imports.razor 파일에 Blazor Component를 using 시켜준다.
@using Telerik.Blazor
@using Telerik.Blazor.Components
~/Shared/MainLayout.razor 파일에 다음의 내용을 추가한다.
@inherits LayoutComponentBase
<TelerikRootComponent>
@Body
</TelerikRootComponent>여기까지 했다면 Tererik을 적용할 모든 준비는 끝난 것이다.
4. View에 Tererik Component추가하기
~/Pages/Index.razor View파일에 Tererik Component를 추가한다.
<TelerikButton>Say Hello</TelerikButton>
다른 sample코드들은 아래의 page를 참고하면 된다.
Blazor Components Demos and Examples - Telerik UI for Blazor
The Grid allows you to browse, sort and edit tabular data.
demos.telerik.com
<Reference>
Server-Side Blazor(Blazor Server App) - Tutorial
First Steps with Server-Side Blazor | Telerik UI for Blazor
Open the main layout file (by default, the ~/Shared/MainLayout.razor file in the Blazor project), and add @layout TelerikLayout as the first line in the file. This will ensure that the TelerikRootComponent wraps all the content in MainLayout. Alternatively
docs.telerik.com
Client-Side Blazor(Blazor WebAssembly App) - Tutorial
First Steps with Client-Side Blazor | Telerik UI for Blazor
Open the main layout file (by default, the ~/Shared/MainLayout.razor file in the Blazor project), and add @layout TelerikLayout as the first line in the file. This will ensure that the TelerikRootComponent wraps all the content in MainLayout. Alternatively
docs.telerik.com