ComponentOne 2019 v3 버전 부터, FlexGrid for WinForms에 새로운 기능인 "상세 행(Row detail)"이 도입되었습니다. 이 기능을 통해 사용 가능한 화면 크기에 비해, 표시할 정보가 큰 경우 (또는 개발자가 몇 개의 필드에 대한 정보를 자세히 표시하려는 경우) 정보를 세부 행 컨테이너를 사용하여 표시할 수 있습니다. 이 행 컨테이너는 모든 레이아웃에 모든 컨트롤을 포함하도록 사용자 지정할 수 있습니다.

이 기능을 통해 개발자는 정보를 계층(layer)별로 표시할 수 있습니다. 계층(Layer) 단위란,  일부 기본 정보가 Normal/Regular 행을 통해 표시될 수 있고, 세부 정보는 세부 행 컨트롤을 통해 표시될 수 있음을 의미합니다.

이 확장을 통해 FlexGrid의 각 행은 이제 최종 사용자가 상호 작용할 수있는 각기 다른 정보 계층을 제공할 수 있습니다.

FlexGrid WinForms 상세 행(Row Detail) 개요

C1FlexGrid 상세 행(Row Detail) 기능을 사용하면 FlexGrid 열에 맞추기에는 너무 큰 컨텐츠를 표시할 수 있습니다. 또한 이 기능을 사용하여 FlexGrid의 확장 가능한 영역에서 인라인 편집과 같은 추가 편집 지원을 제공할 수 있습니다. 최종 사용자는 행을 세부적으로 확장/축소하여 세부 내용을 표시/숨길 수 있습니다.

새로운 API

이 기능에 새로 추가 된 API 요소는 다음과 같습니다.
 

• RowDetailProvider : 이 속성은 표시할 세부 컨트롤을 만드는 대리자 메서드를 가져오거나 설정합니다. 기본값은 null입니다.

• RowDetailsVisibilityMode : 디테일(Detail) 컨트롤이 표시될 시기를 지정하는 값을 가져 오거나 설정합니다. 속성 유형은 RowDetailsVisibilityMode 열거이며 다음 값으로 표시됩니다.

  • VisibleWhenSelected : 상세 행 컨트롤은 선택된 행에 대해서 만 표시됩니다.
  • 축소 : 상세(Detail) 컨트롤이 표시되지 않습니다.

• AreRowDetailsFrozen : 상세 행 정보를 C1FlexGrid 컨트롤 내용과 함께 가로로 스크롤 할지 여부를 지정하는 bool 값을 가져 오거나 설정합니다. 기본값은 true입니다.

• RowDetailsApplying 이벤트 : C1FlexGrid의 데이터 소스에 있는 각각의 데이터 객체가 RowDetailProvider 속성에 할당되는 동안 발생합니다. 이벤트 인수에는 해당 데이터 소스의 데이터 객체를 나타내는 DataObject 속성이 포함됩니다 

• IC1FlexGridRowDetail 인터페이스 :이 인터페이스는 FlexGrid의 상세 행에서 모든 컨트롤을 사용할 수 있습니다. 이 인터페이스에는 3 가지 메소드가 있습니다.

  • Setup : 데이터 바인딩 또는 상세 행 컨트롤의 기타 특성을 설정하는 데 사용됩니다.
  • UpdateSize : 상세(Detail) 컨트롤은 이 메소드로 크기를 업데이트할 수 있습니다.
  • Removing : 상세(Detail) 컨트롤울 제거하기 전에 자원을 해제하는 데 사용됩니다. 만약 Setup 메소드가 어떠한 리소스를 초기화하지 않은 경우, 이 메소드의 body(본문)은 비어있을 수 있습니다.

이러한 API 요소 외에도 상세 행 기능은 두 개의 내장 제어를 제공하며 FlexGrid에서 세부 제어로 모든 사용자 정의 제어를 사용할 수 있습니다. 아래를 통해, 살펴봅니다.

내장 행 세부 사항 제어 사용

상세 행 기능은 C1InputPanelRowDetail 및 C1FlexGridRowDetail 제어의 두 가지 다른 행 세부 사항 구현을 지원합니다. 이러한 컨트롤은 UserControl에서 파생되며, 해당 컨트롤 컬렉션에 C1InputPanel/C1FlexGrid를 포함합니다.

기본 제공 컨트롤은 ComponentOne for WinForms 패키지에서 사용 가능한 새 어셈블리 'C1.Win.C1FlexGrid.RowDetails.4.5.2.dll'을 통해 노출됩니다. 따라서 이러한 기본 제공 컨트롤을 사용하고 하는 경우, 프로젝트에서 새 상세 행(Row Detail) 어셈블리를 참조해야합니다.

이 어셈블리(assembly)는 추가로 FlexGrid 어셈블리 'C1.Win.C1FlexGrid.4.5.2.dll'을 참조해야합니다.

C1InputPanelRowDetail

C1InputPanelRowDetail 컨트롤을 사용하여 C1FlexGrid 데이터를 인라인 편집 할 수 있습니다.

C1InputPanelRowDetail 컨트롤을 사용하는 최소 코드는 다음과 같습니다.

// code above this line initializes DataSet with filled "Customers" DataTable
flexGrid.DataSource = dataSet;
flexGrid.DataMember = "Customers";
flexGrid.RowDetailProvider = (g, r) => new C1InputPanelRowDetail();

C1FlexGridRowDetail

C1FlexGridRowDetail 컨트롤을 사용하여 C1FlexGrid 컨트롤에 대한 Master-Detail(마스터-디테일) 시나리오를 지원할 수 있습니다.

C1FlexGridRowDetail을 사용하는 최소 코드는 다음과 같습니다.

// code above this line initializes DataSet with filled "Customers" and "Orders" DataTables
dataSet.Relations.Add("Customers_Orders",
dataSet.Tables["Customers"].Columns["CustomerID"],
dataSet.Tables["Orders"].Columns["CustomerID"]);

flexGrid.DataSource = dataSet;
flexGrid.DataMember = "Customers";

flexGrid.InitRowDetailProvider = (g, r) => new C1FlexGridRowDetail();
flexGrid.AreRowDetailsFrozen = false;

상세 행(Row Detail) 한 단계 더 발전시키기 : 상세 행 컨트롤로 FlexChart 사용

상세 행(Row Detail) 기능은 내장 컨트롤인 C1InputPanelRowDetail 및 C1FlexGridRowDetail을 상세 행의 컨트롤로써 제공할, 뿐만 아니라, 사용자 정의 컨트롤도 사용할 수 있습니다. 사용자 정의 컨트롤을 표시하려면 IC1FlexGridRowDetail 인터페이스를 구현해야 합니다. 예를 들어, C1Label을 사용하려는 경우, C1Label 컨트롤에서 컨트롤을 상속하고 필요한 인터페이스 멤버를 구현할 수 있습니다.

그리드에서 세부 컨트롤로 사용자 지정 컨트롤을 사용하는 방법을 더 잘 이해하려면, 아래의 레퍼런스를 참고해볼 수 있습니다.

행 세부 사항-구현해보기

해당 섹션에서는 간단하게, 다양한 글로벌 지표에 대해 정기적으로 정보를 보여줄 수 있는 응용 프로그램을 만들어 보고자 합니다.

단일 컨트롤은 이러한 데이터를 나타낼 수 없지만 새로운 상세 행 기능이 있는 FlexGrid는 이를 쉽게 구현할 수 있도록 도와줍니다. 

구현을 다음 부분으로 나눌 것입니다.

• FlexGrid 설정
• FlexChart에 대한 데이터 설정
• FlexChart를 사용하여 사용자 정의 세부 행 제어 작성
• FlexGrid에서 FlexChart를 세부 제어로 사용

FlexGrid 설정

프로젝트에서 FlexGrid를 사용하는 것은 매우 쉽습니다. C1FlexGrid를 VS 도구상자에서 Windows Form으로 끌어다 놓기 만하면, C1.Win.C1FlexGrid.RowDetails.4.5.2 dll에 대한 참조가 추가되고 FlexGrid의 인스턴스가 생성됩니다.

인디케이터(indicator) 목록 및 해당 정보를 표시하기 위해, FlexGrid에는 원하는 방식의 다양한 데이터 소스를 사용할 수 있습니다. 

여기에서는 데모를 위해 가장 간단한 데이터 소스인, DataTable을 사용합니다.

DataTable dataTable = new DataTable();
dataTable.Columns.Add("Indicator Code", typeof(string));
dataTable.Columns.Add("Indicator Type", typeof(string));
dataTable.Columns.Add("Indicator Name", typeof(string));

이제 DataSource 속성을 사용하여 그리드를 DataTable에 바인딩하십시오.

flexGrid.DataSource = dataTable;

다음 이미지는 이 단계를 완료한 후, 그리드에 로드된 데이터를 보여줍니다.

FlexChart에 대한 데이터 설정

추세를 시각화하기 위해, FlexChart를 얼마나 쉽게 사용자 지정 세부 컨트롤로 사용할 수 있는지 보여주기 위해, 월드뱅크(WorldBank)에 게시된 '인구 증가', '메탄 방출' 등과 같은 몇 가지 주요 지표에 대한 데이터를 사용할 것입니다. 이러한 지표의 경우, 2003년부터 2018년까지 지난 15년간 데이터를 표본으로 추출했습니다.

FlexChart에 이 데이터를 반영하려면, 차트를 바인딩할 수 있는 데이터의 청사진이 필요합니다. 이를 위해 다음과 같은 몇 가지 클래스를 만듭니다.

public class Country
{
     public string CountryName { get; set; }
     public string CountryCode { get; set; }
     public List<DataItem> ListOfValues { get; set; }
     public Country()
     {
          CountryName = "";
          CountryCode = "";
          ListOfValues = new List<DataItem>();
     }
}
public class DataItem
{
     public string Year { get; set; }
     public double Value { get; set; } 
}

FlexChart를 사용하여 사용자 정의 상세 행(Row Detail) 컨트롤 작성

FlexChart를 포함하는 사용자 정의 제어를 작성하려면, IC1FlexGridRowDetail 인터페이스를 구현해야 합니다. 이를 위해, UserControl을 작성하고 C1FlexChart를 끌어다 놓으십시오. 또한 지표 값을 분석해야하는 국가를 선택하기 위해 ComboBox를 배치하십시오.

다음 이미지는 사용자 정의 컨트롤의 모양을 보여줍니다.

이제 FlexChart를 설정해야 합니다. 이 작업은 인터페이스에 있는 'Setup' 메소드를 재정의하여 수행할 수 있으며, 세부 제어를 표시해야 하는 행의 색인을 표시합니다.

public void Setup(C1FlexGrid parentGrid, int rowIndex)
{
      var bs = new BindingSource();
      bs.DataSource = parentGrid.DataSource as DataTable;
      bs.Position = parentGrid.Rows[rowIndex].DataIndex;
      indicatorName = parentGrid[rowIndex, 3].ToString();

      cmbCountry.SelectedValueChanged += new EventHandler(CmbCountry_SelectedValueChanged);

세부 정보를 표시해야 하는 표시기(indicator)를 알면 아래와 같이 바인딩 차트를 시작할 수 있습니다. 

private void CmbCountry_SelectedValueChanged(object sender, EventArgs e)
{
       var selectedCountryData = DataLoader.Import(indicatorName, cmbCountry.SelectedItem as string);
       flexChart1.ChartType = ChartType.LineSymbols;
       flexChart1.DataSource = selectedCountryData.ListOfValues;
       flexChart1.Binding = "Value";
       flexChart1.BindingX = "Year";
       flexChart1.Series.Add(new Series());
}

FlexGrid에서 FlexChart를 상세 컨트롤로 사용

FlexGrid에서 사용자 정의 생성 상세(Detail) 컨트롤을 사용하려면, 아래에 표시된 것처럼 대리자 메서드를 정의하고, RowDetailProvider 속성에 할당하면 됩니다.

flexGrid.RowDetailProvider = (g, r) => new DetailRowContainer();
flexGrid.RowDetailsVisibilityMode = RowDetailsVisibilityMode.Collapsed;

상세 행 제어는 제한된 공간에 표시할 수 있는, 큰 데이터를 표시하는 데 도움이 됩니다. 또한, 복잡한 부품을 세부 행에 배치하여 뷰의 복잡성을 줄이는 데 도움이 됩니다.