ComponentOne ASP.NET MVC 및 MVC Core Edition의 최신 릴리스에 여러 가지 새로운 기능과 개선 사항이 추가되었습니다. 여기서는 FlexGrid 컨트롤에 추가된 새로운 기능에 대해 알아보겠습니다.

정렬 유형 속성을 사용하여 여러 열 정렬

이 릴리스 전에는 FlexGrid에서 AllowSorting 속성을 True로 설정하는 방법을 통해 단일 열 정렬만 가능했습니다. 이 릴리스에서는 C1.Web.Mvc.Grid.AllowSorting 형식의 SortingType 속성이 새로 추가되었습니다. 이 속성을 사용하여 FlexGrid에 대한 정렬을 정의할 수 있습니다.

위 이미지에서 FlexGrid는 먼저 Name 열에 따라 정렬되고 그다음에는 Sales 열에 따라 정렬됩니다. 글리프를 정렬한 후 숫자가 어떻게 표시되는지 보십시오. 숫자는 해당 열에서 수행된 정렬의 수준을 나타냅니다.

여러 열 정렬을 수행하려면 SortingType 속성을 AllowSorting.MultiColumn으로 설정합니다.

<c1-flex-grid sorting-type="MultiColumn">
…… 
</c1-flex-grid> 

SortingType 속성의 기본값은 이전 버전과 동일한 동작이 이루어지는 AllowSorting.SingleColumn입니다.

참고: FlexGrid의 AllowSorting 속성은 더 이상 사용되지 않습니다.

AllowPinning 속성을 사용하여 열 고정

고정하려는 경우 FrozenColumns 속성을 사용할 수 있습니다. 이 속성은 코드 숨김에서 올바로 작동하지만, UI를 사용하여 열을 고정시켜야 하는 경우에는 버튼 클릭과 같은 사용자 작업에서 이 속성을 설정할 수 있습니다.

또한 FlexGrid의 뒤쪽 끝에 있는 열을 고정하려는 경우 사용자는 열을 시작 부분으로 옮긴 다음에 고정시켜야 하지만, 다수의 열이 있는 그리드에서는 이것이 매우 지루한 작업입니다.

이런 시나리오에서 사용할 수 있는 것이 AllowPinning 속성입니다.

이것은 열 머리글에 핀을 추가하는 부울 형식의 속성으로서, 이 핀을 클릭하면 해당 열(true로 설정된 경우)이 고정됩니다.

위 이미지에서는 ID, Start 및 Product 열이 고정되어 있습니다. 열 고정을 허용하려면 AllowPinning 속성을 true로 설정하기만 하면 됩니다.

<c1-flex-grid allow-pinning="true"> 
…… 
</c1-flex-grid>  

데모를 보려면 열 고정 페이지를 방문하십시오. 

계층 구조 열을 추가하여 열 그룹화

계층 구조 열은 이 릴리스에 새로 추가된 기능으로서, 이 기능을 사용하여 확장 또는 축소되는 열 그룹을 만들 수 있습니다.

계층 구조 열을 만들면서 열 레이아웃을 정의하는 방법으로 열을 그룹화할 수 있습니다.

<c1-flex-grid id="colGroupsFlexGrid" auto-generate-columns="false">       
…… 
<c1-flex-grid-column header="Performance" align="center" collapse-to="YTD"> 
<c1-flex-grid-column binding="YTD" format="p2" class="main-column"></c1-flex-grid-column> 
<c1-flex-grid-column binding="M1" format="p2"></c1-flex-grid-column> 
<c1-flex-grid-column binding="M6" format="p2"></c1-flex-grid-column> 
<c1-flex-grid-column binding="M12" format="p2"></c1-flex-grid-column> 
</c1-flex-grid-column> 
</c1-flex-grid> 

위 코드 조각에서는 4개의 하위 열이 있는 Performance 열이 생성되었습니다. CollapseTo 속성이 Performance 열에서 어떻게 사용되는지 확인하십시오. 이 속성은 열 그룹을 축소하는 경우 표시될 하위 열을 결정합니다.

처음에는 모든 열이 확장된 상태로 표시됩니다. 그러나 IsCollapsed 속성을 사용하여 초기 상태를 축소된 상태로 변경할 수 있습니다. 그 값을 true로 설정하면 해당 열이 축소된 상태로 표시됩니다.

<c1-flex-grid-column header="Performance" align="center" collapse-to="YTD" is-collapsed="true"> 
<c1-flex-grid-column binding="YTD" format="p2" class="main-column"></c1-flex-grid-column> 
<c1-flex-grid-column binding="M1" format="p2"></c1-flex-grid-column> 
<c1-flex-grid-column binding="M6" format="p2"></c1-flex-grid-column> 
<c1-flex-grid-column binding="M12" format="p2"></c1-flex-grid-column> 
</c1-flex-grid-column> ​

데모를 보려면 열 그룹 페이지를 방문하십시오. 

셀 템플릿을 사용하여 열 사용자 정의

이 릴리스에서는 템플릿 유형 문자열로 알려진 ColumnBase 클래스에 새로운 속성이 추가되었습니다. 이 속성은 단순하지만 ItemFormatter 또는 FormatItem 이벤트에 대한 강력한 대안입니다. 열의 특정 셀을 서식 지정하는 방법에 대한 정보가 포함된 문자열이 이 속성에 제공될 수 있습니다. 예를 들어 아래 코드 조각을 참조하세요.

@{       
const string upTmpl = @"<div class='diff-${value > 0 ? 'up' : 'down'}'<span>${value}:${col.format}</span><span style='font-size:120%' class='wj-glyph-${value > 0 ? 'up' : 'down'}'></span></div>"; 
}

이것은 데이터를 기반으로 각 열 셀을 서식 지정하기 위해 다양한 컨텍스트 변수 및 조건을 사용하는 템플릿의 예입니다. 템플릿 속성을 정의하는 동안 설정하여 이 열을 열의 템플릿으로 추가합니다.

<c1-flex-grid> 
… 
<c1-flex-grid-column binding="Profit" header="Profit" width='*' template="@upTmpl" is-read-only="true" format="c2"></c1-flex-grid-column> 
</c1-flex-grid>

​

특정 셀을 서식 지정하는 데 사용할 수 있는 여러 가지 컨텍스트 변수가 제공됩니다. 각 변수에 대한 자세한 설명을 보려면 이 링크를 따라가십시오.

위 템플릿은 다음과 같은 출력을 생성합니다.

데이터를 기반으로 Profit 열의 각 셀이 어떻게 사용자 정의되는지 확인하십시오. 음수 값은 빨간색, 양수 값은 초록색으로 표시됩니다.

새 FlexGridSearch 컨트롤을 사용하여 검색

대부분의 경우 FlexGrid에 표시되는 데이터는 너무 큽니다. 따라서 이 릴리스에는 FlexGrid 검색을 더 쉽게 해주는 FlexGridSearch 컨트롤이 새로 추가되었습니다. 이 컨트롤은 지우기 버튼이 있는 단순한 검색 상자처럼 보입니다.

FlexGridSearch 컨트롤을 다른 컨트롤처럼 추가할 수 있습니다. 정의하는 동안 FlexGrid 컨트롤의 ID를 그리드 매개 변수로 제공하여 FlexGrid를 바인딩합니다.

<c1-flex-grid id="grid"> 
… 
</c1-flex-grid> 
<c1-flex-grid-search id="search" grid="grid" delay="500"></c1-flex-grid-search>  

검색 텍스트를 강조하는 데 사용되는 기본 CSS 클래스는 ‘wj-state-match'입니다.

그러나 CssMatch 속성을 사용하여 기본 클래스를 재정의할 수 있습니다.

<style>
.custom-state-match { 
background: #f4b41a; 
color: #143d59; 
font-weight: bold; 
} 
</style> 
<c1-flex-grid-search id="search" grid="grid" css-match="custom-state-match"></c1-flex-grid-search>  
​

데모를 보려면 FlexGridSearch 페이지를 방문하십시오.

TransposedGrid를 사용하여 행과 열 상호 교환

기본적으로 FlexGrid는 데이터 항목을 행으로 표시하고 항목의 속성을 각 열에 표시합니다. TransposedGrid에서는 역할이 그 반대입니다. 원래 FlexGrid 컨트롤의 확장인 새 컨트롤은 데이터 항목을 열로 표시하고 그 속성을 행으로 표시합니다.

아래 이미지에서 머리글이 행에 어떻게 표시되는지 그리고 실제 데이터가 열에서 어떻게 나타나는지 확인하십시오.

TransposedGrid 컨트롤 추가는 FlexGrid 추가와 거의 유사합니다. 기본적인 차이점은, FlexGrid에서는 데이터를 표시할 열을 정의하지만 TransposedGrid에서는 뒤바뀐 그리드 행을 정의한다는 것입니다(행과 열이 상호 교환되므로).

<c1-transposed-grid id="theTransposedGrid" auto-generate-rows="false" class="product-sheet-grid" is-read-only="true" headers-visibility="Row"> 
<c1-items-source source-collection="Model"></c1-items-source>
<c1-transposed-grid-row binding="Image" header=" " align="center" width="80"></c1-transposed-grid-row> 
<c1-transposed-grid-row binding="Name" header="Model" align="center" word-wrap="true"></c1-transposed-grid-row> 
<c1-transposed-grid-row binding="Rating" header="Rating" align="center" format="n1" width="130"></c1-transposed-grid-row> 
@* other rows *@ 
</c1-transposed-grid> 

​데모를 보려면 TransposedGrid 페이지를 방문하십시오.

CopyHeaders 속성을 사용하여 머리글 복사

이전에는 FlexGrid 컨트롤에서 복사 작업을 수행할 때마다 셀만 복사되었습니다. 하지만 CopyHeaders 속성을 사용하면 열 및/또는 행 머리글도 복사할 수 있습니다. 이 속성은 C1.Web.Mvc.Grid.CopyHeader 열거 유형입니다. CopyHeader에 값 설정. 열은 열 헤더를 데이터와 함께 복사합니다.

이것은 머리글 행을 수동으로 만들지 않고 그리드의 데이터를 복사하거나 Excel에 직접 붙여넣는 데 도움이 될 수 있습니다.

<c1-flex-grid copy-headers="Column"> 
… 
</c1-flex-grid> 

DefaultTypeWidth를 사용하여 열의 너비를 자동으로 조정

DefaultTypeWidth 속성을 사용하면 열을 자동 생성하면서 DataType을 기반으로 기본 너비를 할당할 수 있습니다. 이 속성은 IDictionary<string, int>의 인스턴스를 가져옵니다. 여기서 키는 문자열, 숫자 등의 데이터 유형이며 값은 해당 너비입니다. 그러나 태그에서 할당하는 동안에는 문자열의 데이터 유형 및 너비 쌍이 쉼표로 분리되어 제공될 수 있습니다.

@{  
  string widths = "Number,50,String,150";  
} 
<c1-flex-grid default-type-width="@widths" auto-generate-columns="true"></c1-flex-grid> 

이 속성은 열을 자동으로 생성하는 동안에만 작동한다는 점에 유의하십시오.

ComponentOne FlexGrid의 새로운 기능

이번 릴리스에서 FlexGrid에 추가된 핵심 기능에 대해 알아보았습니다. 이 게시글에서는 사소한 버그 수정 및 다른 컨트롤에 추가된 기능에 대해서는 다루지 않았습니다. 자세한 내용을 보려면 아래 변경 내역을 확인하십시오.

ComponentOne 2020 v1 릴리스 노트