ComponentOne의 FlexGrid는 엑셀처럼 인라인 편집 스타일을 제공합니다. 이를 통해 그리드에 표시된 데이터와 유효성 검사 등의 수행할 수 있는 기타 작업을 더 쉽게 편집할 수 있습니다.

그러나 경우에 따라 정상적인 편집이 불가능하거나 어려울 수 있습니다. 예를 들어 터치 장치나 작은 크기의 장치의 경우 키보드가 화면의 거의 절반을 차지하기 때문에 그리드를 직접 편집하는 것이 불편합니다. 또한 사용자는 그리드만 스크롤하려는 경우에 실수로 셀 편집을 시작할 수도 있습니다.

이러한 시나리오의 경우 FlexGrid에 대한 편집 폼을 만들 수 있습니다. 이 폼은 C1 입력 컨트롤을 사용하여 사용자에게 풍부한 편집 경험을 제공하고 터치, 논터치 장치에서 훨씬 더 쉽게 처리할 수 있습니다. FlexGrid의 각 행에 대해 작업 버튼을 만들 수 있습니다.

버튼을 클릭하면 사용자가 입력 컨트롤을 사용하여 행의 데이터를 편집할 수 있는 폼이 열립니다.

FlexGrid 만들기

1. 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; }
   }

이 클래스의 다양한 속성은 다른 컨트롤로 편집할 수 있습니다.

1. 이제 데이터를 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>&nbsp;Edit</button>
             </CellTemplate>
         </GridColumn>
     </FlexGridColumns>
   </FlexGrid>

FlexGrid의 셀 내부에 사용자 정의 HTML을 추가하기 위해 CellTemplate 컴포넌트를 어떻게 사용했는지 주목하십시오. 컨텍스트 변수에는 렌더링 중인 행의 현재 항목이 포함되어 있습니다. 나중에 EditItem 메서드를 추가할 것입니다.

1. 이제 데이터로 그리드를 초기화합니다. 이 문서에서는 임의 데이터를 사용했습니다.

   private List<Customer> customers;
   protected override void OnInitialized()
   {
         this.customers = SampleData.GetCustomers(10);
   }

Blazor의 OnInitialized callback을 사용하여 데이터 소스를 설정했습니다.

C1Window를 사용하여 편집 폼 만들기

C1Window는 이번 릴리스에서 ComponentOne Blazor에 추가된 새로운 컨트롤입니다. 이는 웹 페이지에 모달을 표시하는 데 사용할 수 있습니다. 이 컨트롤은 편집 폼을 모달 팝업으로 표시합니다. C1Window 컨트롤을 추가하려면 이 링크를 클릭하세요.

1. C1Window 컨트롤 및 해당 참조를 추가합니다.

   <C1Window @ref="resultPopup" Style="@("width: 50%")" IsModeless="false">
         <PopupHeader>
             Edit Item
         </PopupHeader>
         <PopupContent>
               <!-- C1 Input controls -->
         </PopupContent>
   </C1Window>
   ​
   @code {
   ​
       public C1Window resultPopup;
   }

resultPopup 변수를 사용하여 팝업을 표시하거나 숨길 수 있습니다.

1. 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를 추가했습니다.

1. 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 변수를 생성합니다.

편집 및 저장 작업 구현

1. 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 이벤트에 대한 이벤트 리스너를 반환합니다.

1. 업데이트를 저장하거나 저장하지 않고 팝업을 닫는 메서드를 추가합니다. 이 메서드는 업데이트된 데이터를 저장할지 여부를 나타내는 부울(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 키를 눌러 프로젝트를 빌드하고 실행합니다. 웹 페이지가 표시되면 작업 열에서 편집 버튼을 사용할 수 있습니다.

샘플은 여기에서 다운로드할 수 있습니다.

Blazor Explorer 데모 | Blazor 문서 

---

지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!

• ComponentOne 공식 홈페이지
• ComponentOne 튜토리얼 및 샘플
• ComponentOne Q&A
• ComponentOne FAQ

• 
• 
• 
•