Blazor FlexGrid DataGrid용 편집 폼 만들기
페이지 정보
작성자 GrapeCity 작성일 2021-08-13 10:00 조회 3,456회 댓글 0건본문
관련링크
ComponentOne의 FlexGrid는 엑셀처럼 인라인 편집 스타일을 제공합니다. 이를 통해 그리드에 표시된 데이터와 유효성 검사 등의 수행할 수 있는 기타 작업을 더 쉽게 편집할 수 있습니다.
그러나 경우에 따라 정상적인 편집이 불가능하거나 어려울 수 있습니다. 예를 들어 터치 장치나 작은 크기의 장치의 경우 키보드가 화면의 거의 절반을 차지하기 때문에 그리드를 직접 편집하는 것이 불편합니다. 또한 사용자는 그리드만 스크롤하려는 경우에 실수로 셀 편집을 시작할 수도 있습니다.
FlexGrid 만들기
FlexGrid용 편집 폼을 만들려면 먼저 FlexGrid를 만들고 데이터 소스에 바인딩해야 합니다. 는 Blazor 프로젝트를 만드는 방법과 FlexGrid를 만드는 방법에 대한 빠른 시작 방법을 제공합니다. Customer 클래스를 FlexGrid의 모델로 사용합니다.
public class Customer { public string ID { get; set; } public string Name { get; set; } public string Country { get; set; } public DateTime? LastOrderDate { get; set; } public int TotalOrders { get; set; } }
이 클래스의 다양한 속성은 다른 컨트롤로 편집할 수 있습니다.
이제 데이터를 FlexGrid에 바인딩합니다. 수동으로 열을 추가하고 작업 열도 추가합니다.
<FlexGrid @ref="theGrid" SelectionMode="GridSelectionMode.Row" DefaultColumnWidth="GridLength.Star" HeadersVisibility="GridHeadersVisibility.All" ItemsSource="customers" IsReadOnly="true" AutoGenerateColumns="false"> <FlexGridColumns> <GridColumn Binding="ID" /> <GridColumn Binding="Name" /> <GridColumn Binding="Country" /> <GridDateTimeColumn Binding="LastOrderDate" Format="MMM dd, yyyy" /> <GridNumericColumn Binding="TotalOrders" Format="n0" /> <GridColumn Header="Action" HorizontalAlignment="C1.Blazor.Core.C1HorizontalAlignment.Center"> <CellTemplate> @{ var item = (Customer)context; } <button @onclick="@EditItem(item)" class="btn btn-primary"><span class="oi-pencil oi"></span> Edit</button> </CellTemplate> </GridColumn> </FlexGridColumns> </FlexGrid>
FlexGrid의 셀 내부에 사용자 정의 HTML을 추가하기 위해 CellTemplate 컴포넌트를 어떻게 사용했는지 주목하십시오. 컨텍스트 변수에는 렌더링 중인 행의 현재 항목이 포함되어 있습니다. 나중에 EditItem 메서드를 추가할 것입니다.
이제 데이터로 그리드를 초기화합니다. 이 문서에서는 임의 데이터를 사용했습니다.
private List<Customer> customers; protected override void OnInitialized() { this.customers = SampleData.GetCustomers(10); }
Blazor의 OnInitialized callback을 사용하여 데이터 소스를 설정했습니다.
C1Window를 사용하여 편집 폼 만들기
C1Window는 이번 릴리스에서 ComponentOne Blazor에 추가된 새로운 컨트롤입니다. 이는 웹 페이지에 모달을 표시하는 데 사용할 수 있습니다. 이 컨트롤은 편집 폼을 모달 팝업으로 표시합니다. C1Window 컨트롤을 추가하려면 를 클릭하세요.
C1Window 컨트롤 및 해당 참조를 추가합니다.
<C1Window @ref="resultPopup" Style="@("width: 50%")" IsModeless="false"> <PopupHeader> Edit Item </PopupHeader> <PopupContent> <!-- C1 Input controls --> </PopupContent> </C1Window> @code { public C1Window resultPopup; }
resultPopup 변수를 사용하여 팝업을 표시하거나 숨길 수 있습니다.
PopupContent 컴포넌트 내부에 C1 입력 컨트롤을 추가합니다.
<div class="form-group"> <label>Name:</label> <C1TextBox @bind-Text="@nameCtl" Class="form-control" /> </div> <div class="form-group"> <label>Country:</label> <C1AutoComplete ItemsSource="@Countries" @bind-SelectedItem="@countryCtl" Class="form-control" /> </div> <div class="form-group"> <label>Last Order Date:</label> <C1DatePicker DropDownBehavior="DropDownBehavior.HeaderTap" DropDownStyle="@("left: 50%")" Style="@("width: 100%")" Format="MMM dd, yyyy" @bind-Value="@lastOrderCtl" /> </div> <div class="form-group"> <label>Total Orders:</label> <C1NumericBox Style="@("width: 100%")" @bind-Value="@ordersCtl" /> </div> <button class="btn btn-primary" @onclick="ClosePopup(true)">Save</button> <button class="btn btn-default" @onclick="ClosePopup(false)">Cancel</button>
이름 편집을 위한 C1TextBox, 적절한 국가 선택을 위한 C1AutoComplete, 마지막 주문 날짜를 설정하기 위한 C1DatePicker, 총 주문을 입력하기 위한 C1NumericBox를 추가했습니다.
C1AutoComplete의 바인딩된 변수와 데이터 소스를 추가합니다.
private List<string> Countries; private Customer EditingItem; private int ordersCtl; private DateTime? lastOrderCtl; private string nameCtl; private string countryCtl; protected override void OnInitialized() { this.customers = SampleData.GetCustomers(10); this.Countries = SampleData.Countries; }
위의 각 변수는 각각의 컨트롤에 바인딩됩니다. 컨트롤의 값이 변경될 때마다 변수도 동일한 값으로 업데이트되고 그 반대의 경우도 마찬가지입니다. 또한 현재 편집 중인 항목을 저장할 EditingItem 변수를 생성합니다.
편집 및 저장 작업 구현
EditItem 메서드를 구현합니다. 이 메서드는 동작 버튼 클릭 시 호출됩니다. 현재 행의 데이터 시간을 이 메서드에 전달할 수 있습니다. 그다음 바인딩된 모든 변수를 초기화하고 C1Window 컨트롤을 엽니다.
private Action<MouseEventArgs> EditItem(Customer item) { Action<MouseEventArgs> listener = (e) => { this.EditingItem = item; this.ordersCtl = this.EditingItem.TotalOrders; this.lastOrderCtl = this.EditingItem.LastOrderDate; this.nameCtl = this.EditingItem.Name; this.countryCtl = this.EditingItem.Country; this.resultPopup.Open(); }; return listener; }
이 메서드는 작업 버튼의 onclick 이벤트에 대한 이벤트 리스너를 반환합니다.
업데이트를 저장하거나 저장하지 않고 팝업을 닫는 메서드를 추가합니다. 이 메서드는 업데이트된 데이터를 저장할지 여부를 나타내는 부울(bool) 매개 변수를 사용합니다. 이 메서드는 EditingItem의 각 속성 값을 업데이트합니다.
private Action<MouseEventArgs> CommitItem(bool save) { Action<MouseEventArgs> listener = (e) => { if (save) { this.EditingItem.TotalOrders = this.ordersCtl; this.EditingItem.Name = this.nameCtl; this.EditingItem.LastOrderDate = this.lastOrderCtl; this.EditingItem.Country = this.countryCtl; } this.resultPopup.Close(); this.EditingItem = null; }; return listener; }
응용 프로그램 빌드 및 실행
F5 키를 눌러 프로젝트를 빌드하고 실행합니다. 웹 페이지가 표시되면 작업 열에서 편집 버튼을 사용할 수 있습니다.
샘플은 에서 다운로드할 수 있습니다.
|
지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.