1
Infragistics Blazor 그리드
Grid 컨트롤은 테이블 형식 데이터를 표시하고 조작하기 위해 소프트웨어 개발에 사용되는 그래픽 사용자 인터페이스 요소입니다. 일반적으로 표 형식 또는 스프레드시트와 같은 구조화된 형식으로 데이터를 표시해야 하는 응용 프로그램에서 사용됩니다.
Infragistics Blazor Grid Controls는 C# 및 .NET을 사용하여 대화형 웹 애플리케이션을 빌드하기 위한 프레임워크인 Blazor와 함께 사용하도록 설계된 Grid 컨트롤의 특정 구현입니다.
Infragistics의 Blazor Grid Control은 개발자가 Blazor 애플리케이션에서 테이블 형식 데이터를 표시, 편집 및 관리할 수 있는 강력한 사용자 인터페이스 구성 요소입니다. 웹 애플리케이션에서 데이터 작업을 보다 효율적이고 사용자 친화적으로 수행할 수 있도록 다양한 기능을 제공합니다.
다음은 Infragistics Blazor Grid Controls가 일반적으로 제공하는 몇 가지 주요 기능입니다.
- Data Binding
Grid Control을 사용하면 컬렉션, 데이터베이스 및 웹 서비스를 포함한 다양한 데이터 소스에 쉽게 바인딩할 수 있습니다. 즉, 다양한 백엔드 시스템의 데이터를 표시하고 작업할 수 있습니다.
- 정렬 및 그룹화
사용자는 열 머리글을 클릭하여 데이터를 정렬할 수 있으며, 특정 열을 기준으로 데이터를 그룹화하여 계층적 보기를 만들 수도 있습니다.
- Filtering
사용자는 필터를 적용하여 데이터의 특정 하위 집합을 표시하여 정보를 더 쉽게 찾고 분석할 수 있습니다.
- Editing
그리드 컨트롤은 인라인 편집을 지원하므로 사용자가 그리드 내에서 직접 데이터를 수정할 수 있습니다. 이는 데이터 조작이 필요한 응용 프로그램에 특히 유용합니다.
- 선택 및 다중 선택
사용자는 그리드 내에서 하나 또는 여러 개의 행을 선택할 수 있으며, 선택한 데이터에 대한 삭제, 복사 또는 작업 수행과 같은 다양한 용도로 사용할 수 있습니다.
- 페이징
큰 데이터 집합을 처리하는 경우 Grid Control은 페이지 매김을 구현하여 페이지 간 탐색 옵션과 함께 한 번에 제한된 데이터 집합을 표시할 수 있습니다.
- 이벤트 및 이벤트 처리
컨트롤은 사용자 조작(예: 셀 또는 행 클릭)을 기반으로 이벤트를 생성하여 개발자가 사용자 지정 논리로 이러한 이벤트에 응답할 수 있도록 합니다.
- Templates
개발자는 사용자 지정 템플릿을 만들어 Grid의 모양과 레이아웃을 제어할 수 있습니다.
- Exporting Data
사용자는 추가 분석 또는 보고를 위해 그리드에서 Excel, PDF 또는 CSV와 같은 다양한 형식으로 데이터를 내보낼 수 있습니다.
- 스타일링 및 테마 지정
개발자는 색 구성표, 글꼴 및 레이아웃과 같은 항목을 포함하여 Grid의 모양을 사용자 지정할 수 있습니다.
- 접근성 및 현지화
이 컨트롤은 장애가 있는 사용자가 사용할 수 있도록 접근성을 염두에 두고 설계되었습니다. 또한 다국어 응용 프로그램에 대한 지역화도 지원합니다.
3
Infragistics Blazor 그리드 시작하기
Blazor 프로젝트에 대해 Infragistics Grid에서 사용하는 단계는 다음과 같습니다.
Step 1: Create a Blazor project
2 단계 : 프로젝트 이름 지정
3 단계 : Infragistics Blazor 패키지 설치
패키지 관리자 콘솔을 다음 명령으로 사용합니다.
설치 패키지 IgniteUI.Blazor
또는 NuGet 패키지 관리자 GUI를 사용하여 패키지를 검색하고 설치할 수 있습니다.
Infragistics 라이선스 Nuget 피드를 추가해야 합니다.
4 단계 : Program.cs 파일을 열고 builder를 호출하여 Ignite UI for Blazor 서비스를 등록합니다. Services.AddIgniteUIBlazor 함수는 아래 이미지와 같습니다.
Step 5: Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file
6 단계 :_Host.cshtml 페이지로 이동하여 부트스트랩.css 파일을 등록합니다.
<link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="스타일시트" />
7 단계 : Index.razor 페이지로 이동하여 Grid를 로드하는 코드를 작성합니다.
@page "/"
<PageTitle>Index</PageTitle입니다>
<h3>Infragistics Blazor 그리드</h3>
<br />
<div class="컨테이너 수직">
<div class="컨테이너 세로 채우기">
<IgbGrid Id="그리드" 자동 생성="false" 데이터="@dataSource">
<IgbColumn 너비 = "50 %"필드 = "id"/ >
<IgbColumn 너비 = "50 %"필드 = "이름"/ >
</IGB그리드>
</div입니다>
</div입니다>
@code
{
List<Employee> dataSource = new List<Employee>
{
신입 사원 { Id = "1", Name = "James" },
신입 사원 { Id = "2", Name = "John" },
신입 사원 { Id = "3", Name = "Robert" },
};
public class Employee
{
공개 문자열 ID { get; set; }
공개 문자열 이름 { get; set; }
}
}
Step 8: Run the application
