Blazor용 FlexGrid 행 세부 정보
페이지 정보
작성자 GrapeCity
작성일 2020-12-30 14:51 조회 5,258회
댓글 0건
본문
관련링크
Blazor용 FlexGrid에서는 표 형식 데이터가 Excel과 유사한 눈금으로 표시됩니다. 또한 정보를 효율적으로 표시하기 위해 여러 가지 기능을 지원합니다.
그 중 한 가지는 RowDetails라는 기능으로, 세부 정보 섹션의 각 레코드에 추가 데이터를 표시할 때 사용자 정의 템플릿을 사용해 유연성을 제공합니다.
이 템플릿에는 모든 HTML 또는 Blazor 컨트롤이 포함될 수 있습니다.
본 문서에서는 FlexGrid 내부의 RowDetails를 사용해 추가 정보를 표시하는 두 가지 방법에 관해 설명합니다.
RowDetails에서 HTML을 사용하는 방법
1단계: Blazor 웹 어셈블리 프로젝트 생성
VS2019에서 Blazor 웹 어셈블리 프로젝트를 생성합니다.
2단계: 스타일 리소스 항목 추가
wwwroot에서 Index.html을 열고 헤드 태그 안에 다음과 같은 스타일 리소스를 추가합니다.
<link rel="stylesheet" href="~/_content/C1.Blazor.Core/styles.css" /> <link rel="stylesheet" href="~/_content/C1.Blazor.Grid/styles.css" /> <link rel="stylesheet" href="~/_content/C1.Blazor.ListView/styles.css"/> <link rel="stylesheet" href="~/_content/C1.Blazor.Input/styles.css" /> <link rel="stylesheet" href="~/_content/C1.Blazor.DataPager/styles.css"/>
본문 태그 안에 다음과 같은 스크립트를 추가합니다.
<script src="~/_content/C1.Blazor.Core/scripts.js"></script> <script src="~/_content/C1.Blazor.Input/scripts.js"></script> <script src="~/_content/C1.Blazor.Grid/scripts.js"></script>
3단계: FlexGrid 추가
Id, FirstName, LastName, Country, City, Address, PostalCode와 같은 공개 속성이 포함된 Customer 클래스가 있다고 가정하겠습니다.
각 행의 세부 정보 섹션에 Country, City, Address, PostalCode를 표시하고자 합니다.
이러한 데이터를 표시하도록 눈금을 구성하려면 Index. razor 페이지를 열고 상단의 @page 지시문을 제외한 모든 코드를 삭제하십시오.
FlexGrid 컨트롤을 추가하여 Id, FirstName, LastName을 표시하도록 구성해 보겠습니다.
<FlexGrid IsReadOnly="true" AutoGenerateColumns="false" HeadersVisibility="GridHeadersVisibility.All" ItemsSource="customers" Style="@("max-height:50vh")">
<FlexGridColumns>
<GridColumn Binding="Id" Width="80" />
<GridColumn Binding="FirstName" Width="GridLength.Star" />
<GridColumn Binding="LastName" Width="GridLength.Star" />
</FlexGridColumns>
</FlexGrid>4단계: FlexGrid 구성
이제 FlexgridDetailProvider를 추가하여 Country, City, Address, PostalCode를 표시할 수 있습니다.
시작하려면 FlexGridBehaviors 태그를 추가한 후 그 안에 FlexgridDetailProvider를 추가합니다.
FlexgridDetailProvider에서 세부 데이터를 표시할 템플릿을 정의할 수 있습니다.
전체 FlexGrid 구성은 다음과 같습니다.
<FlexGrid IsReadOnly="true" AutoGenerateColumns="false" HeadersVisibility="GridHeadersVisibility.All" ItemsSource="customers" Style="@("max-height:50vh")">
<FlexGridColumns>
<GridColumn Binding="Id" Width="80" />
<GridColumn Binding="FirstName" Width="GridLength.Star" />
<GridColumn Binding="LastName" Width="GridLength.Star" />
</FlexGridColumns>
<FlexGridBehaviors>
<FlexGridDetailProvider TItem="Customer" Height="130" DetailVisibilityMode="detailVisibilityMode">
<div>
<div>Country: @context.Country</div>
<div>City: @context.City</div>
<div>Address: @context.Address</div>
<div>PostalCode: @context.PostalCode</div>
</div>
</FlexGridDetailProvider>
</FlexGridBehaviors>
</FlexGrid>TItem이 Customer로 설정되어 있다는 점에 유의하십시오. 이 경우 세부 정보 바인딩 정보가 추출됩니다.
이 작업을 통해 컨텍스트 및 해당 속성 이름을 사용한 세부 정보 요소의 데이터 바인딩이 가능합니다.
5단계: 고객의 데이터 컬렉션 생성
이 단계에서는 눈금이 바인딩되어 있는 고객의 데이터 컬렉션을 생성하는 코드를 다음과 같이 추가할 것입니다.
@code {
ObservableCollection<Customer> customers;
GridDetailVisibilityMode detailVisibilityMode = GridDetailVisibilityMode.ExpandMultiple;
protected override void OnInitialized()
{
customers = Customer.GetCustomerList(100);
}
}이것이 FlexGrid가 RowDetails를 사용하도록 구성하는 데 필요한 전부입니다.
RowDetails에서 FlexGrid를 사용하는 방법
행 세부 정보를 사용하는 두 번째 방법은 RowDetails 내에 컨트롤을 표시하는 것입니다.
여기에서는 FlexGrid를 사용하는 방법에 대해 알아보겠습니다.
중첩된 FlexGrid를 사용해 마스터-상세 데이터를 표시하는 방법을 배워보겠습니다.
1단계: REST API에서 데이터 가져오기
또 다른 페이지를 프로젝트에 추가합니다.
다음과 같이 @Code 섹션에서 REST API의 Customers 및 Orders 데이터를 가져오고 LINQ를 사용해 CustomerID 열에 따라 관계형 데이터 컬렉션을 생성할 것입니다.
@code {
private Order[] orders;
private Customer[] customers;
private C1DataCollection<Order> collectionView;
private C1DataCollection<CustomerWithOrders> model;
protected override async Task OnInitializedAsync()
{
orders = await Http.GetFromJsonAsync<Order[]>("https://gc-demo-dataservice.azurewebsites.net/northwind/api/v1/Orders");
customers = await Http.GetFromJsonAsync<Customer[]>("https://gc-demo-dataservice.azurewebsites.net/northwind/api/v1/Customers");
var query = customers.Select(c => new CustomerWithOrders
{
CustomerID = c.CustomerID,
CompanyName = c.CompanyName,
Country = c.Country,
Orders = orders.Where(o => o.CustomerID == c.CustomerID).ToList()
});
model = new C1DataCollection<CustomerWithOrders>(query.ToList());
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
}
{
public string CustomerID { get; set; }
public string CompanyName { get; set; }
public string Country { get; set; }
}
public class CustomerWithOrders : Customer
{
public List<Order> Orders { get; set; }
}
}2단계: FlexGrid 선언
이제 다음과 같이 FlexGrid를 선언해 Customer 데이터를 표시하고 두 번째 FlexGrid로 행 세부 정보를 구성하여 관련된 Orders를 표시할 수 있습니다.
<FlexGrid ItemsSource="model" AutoGenerateColumns="false" HeadersVisibility="GridHeadersVisibility.All" Style="@("max-height:50vh")" >
<FlexGridColumns>
<GridColumn Binding="CustomerID" Width="80" />
<GridColumn Binding="CompanyName" Width="GridLength.Star" />
<GridColumn Binding="Country" Width="GridLength.Star" />
</FlexGridColumns>
<FlexGridBehaviors>
<FlexGridDetailProvider TItem="CustomerWithOrders" Height="130" DetailVisibilityMode="GridDetailVisibilityMode.ExpandMultiple">
<FlexGrid ItemsSource="@context.Orders" AutoGenerateColumns="false" HeadersVisibility="GridHeadersVisibility.Column" Style="@("height:100%")">
<FlexGridColumns>
<GridColumn Binding="OrderID" Width="80" />
<GridColumn Binding="OrderDate" Width="GridLength.Star" />
<GridColumn Binding="ShipCity" Width="GridLength.Star" />
<GridColumn Binding="Freight" Width="80" />
</FlexGridColumns>
</FlexGrid>
</FlexGridDetailProvider>
</FlexGridBehaviors>
</FlexGrid>FlexGridDetailProvider의 TItem은 CustomerWithOrders 유형이며, 컨텍스트는 Orders를 세부 정보 FlexGrid에 사용할 수 있게 해줍니다.
전망: 단순 데이터 시나리오 향상
현재 행 세부 정보 구현은 단순 데이터 시나리오에 도움이 됩니다.
요구 시 중첩된 세부 정보를 표시하려면 상세히 표시될 관련 데이터의 부모 행에 대한 비동기 API 및 추가 정보가 FlexGridDetailProvider에 필요합니다.
이러한 경우를 지원하기 위해 올해 예정된 2020 v3 릴리스에 API를 추가하는 작업을 하고 있습니다.
FlexGrid와 작동 중인 기타 모든 컨트롤은 Blazor 를 확인하십시오.
댓글목록
등록된 댓글이 없습니다.
