FlexGrid는 항상 고급 Excel 스타일 편집 기능을 기본으로 제공해 왔습니다. 기본 설정된 기능은 다음과 같습니다.

1. 셀 내부 편집

2. 빠른 편집

3. (데이터 맵을 통한) 목록 기반 편집

4. 체크박스 편집(부울 셀 용도)

5. 유효성 검사 지원

하지만 많은 고객이 사용자 정의 컨트롤을 셀 편집기로 사용하여 편집 환경을 개선하고 사용자 정의하기를 원했습니다. 이러한 요구 사항을 충족하기 위해 interop 모듈에 템플릿 편집 기능을 추가했고 Pure JS 응용 프로그램을 위한 CustomGridEditor 샘플을 만들었습니다.

CustomGridEditor 샘플은 많이 사용되었지만, 단지 샘플이었고 찾기 어려웠으며 유지 관리가 잘 안 되었고 그리드와 제대로 통합되지 않아 사용하기가 어려웠습니다. 또한 빠른 편집에 대한 IME 지원이 없어 중국, 일본, 한국 같은 나라에서 사용하기가 까다로웠습니다.

열 편집기의 새로운 기능

2020 v2 릴리스에서는 FlexGrid의 Column 클래스에 editor 속성을 추가하여 이 문제를 해결했습니다.

이 새로운 editor 속성에 힘입어 할 수 있는 작업은 다음과 같습니다.

1. 열에 대해 어떤 Wijmo 컨트롤도 편집기로 사용 가능

2. 일반 개체 모델을 사용하여 편집기를 완전히 사용자 정의

3. 여러 열에 대해 단일 컨트롤을 편집기로 사용

4. 편집 모드가 아닐 때 드롭다운 버튼을 자동으로 표시

열 편집기는 그리드와 완전히 통합되며 CollectionView 기반 유효성 검사에 대한 지원과 완전한 IME 지원이 함께 제공됩니다.

열 편집기는 일반 Wijmo 컨트롤이므로 개체 모델이 강력하고 친숙하여 새로 학습할 것이 없습니다. 또한 몇 가지 강력한 컨트롤이 있어, 그중에서 선택할 수 있습니다.

다음과 같이 선택한 프레임워크에서 사용자 정의 편집기의 라이브 데모를 실행해 보십시오.

• JavaScript 그리드 사용자 정의 편집기 데모

• Angular 그리드 사용자 정의 편집기 데모

• React 그리드 사용자 정의 편집기 데모

• Vue 그리드 사용자 정의 편집기 데모

사용자 정의 편집기의 일반 사용 사례

열 편집기에 InputDate를 사용하는 방법

제가 가장 선호하는 열 편집기 사용 사례는 데이터 입력입니다. 기본적으로 그리드에서는 사용자가 열의 서식에 따라 구문 분석된 문자열인 날짜를 편집할 수 있습니다. 이 메서드는 잘 작동하며 빠르고 안전한 데이터 입력을 가능케 합니다.

하지만 버튼을 클릭하여 달력에서 날짜를 선택하고 싶은 경우도 있을 수 있습니다. 그러한 경우 InputDate 컨트롤을 셀 편집기로 사용할 수 있습니다.

예:

import { DataType } from '@grapecity/wijmo';  
 import { InputDate } from '@grapecity/wijmo.input';  
 import { FlexGrid } from '@grapecity/wijmo.grid';
​
 // create the grid  
 let theGrid = new FlexGrid('#theGrid', {  
     itemsSource: getData()  
 });
​
 // create an InputDate to use as a cell editor   
 let theInputDate = new InputDate('#theInputDate');
​
 // assign the editor to all date columns  
 theGrid.columns.forEach(col => {  
     if (col.dataType == DataType.Date) {  
         col.editor = theInputDate;  
     }  
 });

결과는 다음과 같습니다.

사용자는 여전히 자신의 선택에 따라 날짜를 직접 입력할 수 있지만, 이제 드롭다운 버튼을 클릭하여 달력을 표시한 후 월과 연도를 선택하고 한 번의 클릭으로 날짜를 선택하는 것도 가능해졌습니다.

원하는 대로 CSS 및 InputDate 서식 있는 개체 모델을 사용해 편집기를 사용자 정의할 수 있습니다.

열 편집기에 InputTime을 사용하는 방법

InputTime도 유용하게 쓰일 수 있습니다. InputDate와 비슷하지만, 사용자가 날짜 대신에 날짜 개체의 시간 부분을 편집할 수 있도록 합니다.

InputTime은 자동 완성 기능이 있는 드롭다운 목록을 제공하므로 사용자가 시간을 선택하기가 더 쉬워집니다.

예:

 import { InputTime } from '@grapecity/wijmo.input';  
 import { FlexGrid } from '@grapecity/wijmo.grid';
​
 // create the grid  
 let theGrid = new FlexGrid('#theGrid', {  
     itemsSource: getData()  
 });
​
 // create an InputTime to use as a cell editor   
 let theInputTime = new InputTime(document.createElement('div'), {  
     isEditable: true,  
     format: 't',  
     min: '7:00',  
     max: '22:00',  
     step: 30  
 });
​
 // assign the editor to the 'time' column  
 let col = theGrid.getColumn('time');  
 col.format = 't'; // short time format  
 col.editor = theInputTime;

결과는 다음과 같습니다.

편집기가 30분 간격으로 제공되는 최소~최대 값 범위의 목록을 어떻게 표시하는지 살펴보십시오. 사용자는 isEditable 속성을 true로 설정하여 목록에 없는 시간을 입력할 수 있습니다(예: "10:47").

InputDateTime 사용법

InputDateTime 컨트롤은 InputDate를 확장하여 날짜 개체의 시간 부분을 편집할 수 있도록 합니다. 타이핑 입력은 이렇게 많은 정보가 포함된 셀에서 오류를 범하기 쉬운 경향이 있어, 타이핑 입력보다는 이 방법이 훨씬 더 사용하기 편합니다.

예:

import { InputDateTime } from '@grapecity/wijmo.input';  
 import { FlexGrid } from '@grapecity/wijmo.grid';
​
 // create the grid  
 let theGrid = new FlexGrid('#theGrid', {  
     itemsSource: getData()  
 });
​
 // create an InputDateTime to use as a cell editor   
 let theInputDateTime = new InputDateTime(document.createElement('div'), {  
     timeMin: '7:00',  
     timeMax: '22:00',  
     timeStep: 30  
 });
​
 // assign the editor to the 'date' column  
 let col = theGrid.getColumn('date');  
 col.format = 'g'; // date and time  
 col.editor = theInputTime;
​

결과는 다음과 같습니다.

편집기에 두 개의 드롭다운 버튼이 날짜 선택에 하나, 시간 선택에 하나씩 있는지 확인하십시오.

데이터 맵이 없는 열에서 ComboBox를 사용하는 방법

ComboBox 컨트롤은 데이터 맵이 있는 열을 편집하는 데 사용되는 기본 선택기와 크게 다르지 않습니다. 그러나 더 풍부한 서식의 객체 모델을 제공하며 데이터 맵이 없는 열에서 사용할 수 있습니다.

예:

import { ComboBox } from '@grapecity/wijmo.input';  
 import { FlexGrid } from '@grapecity/wijmo.grid';
​
 // create the grid  
 let theGrid = new FlexGrid('#theGrid', {  
     itemsSource: getData()  
 });
​
 // create a ComboBox to use as a cell editor   
 let theComboBox = new ComboBox (document.createElement('div'), {  
     itemsSource: getCountries()  
 });
​
 // assign the editor to the 'country' column  
 theGrid.getColumn('country') = theComboBox;
​

결과는 다음과 같습니다.

열에 데이터 맵이 있는 경우 이것은 기본 제공 편집기에서 얻을 수 있는 것과 거의 동일합니다. 하지만 이 경우에는 컨트롤에 대한 액세스 권한이 있으므로 개체 모델 및 CSS를 사용해 컨트롤을 사용자 정의할 수 있습니다. 예를 들면 다음과 같이 일부 CSS를 사용해 여러 열 드롭다운을 만들 수 있습니다.

목록에서 AutoComplete을 사용하는 방법

AutoComplete 컨트롤은 ComboBox와 유사하지만 항목이 많은 목록에 더 적합하며 비동기 로드, 전체 텍스트, 사용자 정의 가능 검색 등에 대한 지원이 포함되어 있습니다.

InputNumber를 사용해 숫자 열을 편집하는 방법

InputNumber 컨트롤을 사용해 숫자 열을 편집할 수 있습니다. 기본 제공 편집기에 비해 몇 가지 장점이 있습니다.

1. 사용자가 형식이 지정된 값을 편집할 수 있습니다.

2. min 및 max 속성을 설정하여 편집 가능한 값의 범위를 제한할 수 있습니다.

3. step 속성을 사용해 증가/감소 버튼을 제공할 수 있습니다.

예:

import { InputNumber } from '@grapecity/wijmo.input';  
 import { FlexGrid } from '@grapecity/wijmo.grid';
​
 // create the grid  
 let theGrid = new FlexGrid('#theGrid', {  
     itemsSource: getData()  
 });
​
 // create an InputNumber to use as a cell editor   
 let theInputNumber = new InputNumber (document.createElement('div'), {  
     min: 0,  
     max: 1000,  
     format: 'n2'  
 });
​
 // assign the editor to the 'amount' column  
 theGrid.getColumn('amout') = theInputNumber;

결과는 다음과 같습니다.

기타 입력 컨트롤 사용법

위 단계에서는 editor 속성이 몇 가지 Wijmo 입력 컨트롤에서 어떻게 작동하는지 설명합니다. 다음과 같이 기타 여러 가지를 사용할 수 있습니다.

• InputColor: 팔레트에서 색을 선택하여 색을 입력

• MultiSelect: 배열에서 여러 항목 선택

• InputMask: 마스크를 활용해 편집

• You Own Controls: Wijmo의 Control 클래스를 확장하여 편집기를 만들 수 있습니다. 컨트롤에 value 또는 text 속성이 있는지 확인하십시오. 그러면 이 컨트롤을 사용하실 수 있습니다!

Bool(부울) 열 구현

새로운 편집기 속성 외에도 그리드 열에서 부울 값을 표시하는 데 사용되는 마크업이 변경되었음을 알아차리셨을 것입니다.

원래는 단순한 입력 요소를 사용했습니다. 지난 릴리스에서는 이것을 레이블 요소에 병합하고 입력 후 빈 범위를 추가했습니다.

<div class="wj-cell">  
     <label>  
         <input type="checkbox" class="wj-cell-check">  
         <span></span>  
     </label>  
 </div>

새로운 부울 셀은 기존 것과 비슷한 외관과 동작을 보이지만, CSS를 사용하여 스타일을 지정할 수 있습니다.

체크박스 및 라디오 버튼의 스타일을 지정하는 기술을 설명하는 블로그가 많이 있습니다. 이 기술은 인접한 요소가 있는 입력 요소에 의존하므로 ":before" 및 ":after" CSS 선택기(입력 요소에는 사용할 수 없음)를 사용할 수 있습니다.

예를 들어 아래의 CSS를 사용해 열의 체크박스를 "switch" 요소로 전환할 수 있습니다.

  .wj-cell.switch input[type=checkbox] { /* switch-style checkbox */  
     opacity: 0;   
     width: 100%;  
 }  
 .wj-cell.switch input[type=checkbox]+span {  
     pointer-events: none;  
     background: rgba(0, 0, 0, 0.4);  
 }  
 .wj-cell.switch input[type=checkbox]:checked+span {  
     background: #0085c7;  
 }  
 .wj-cell.switch input[type=checkbox]+span:before { /* switch track */  
     content: '';  
     display: block;  
     position: absolute;  
     left: 0; top: .45em; width: 2.5em; height: .75em;  
     border-radius: 1em;  
     background: rgba(0, 0, 0, .4);  
     opacity: .25;  
 }  
 .wj-cell.switch input[type=checkbox]:checked+span:before  
     background: inherit;  
 }  
 .wj-cell.switch input[type=checkbox]+span:after { /* switch thumb */  
     content: '';  
     position: absolute;  
     left: 0; top: 0.13em; width: 1.3em; height: 1.3em;  
     background: white;  
     border-radius: 1em;  
 }  
 .wj-cell.switch input[type=checkbox]:checked+span:after {  
     left: 1.25em;  
     background: inherit;  
 }
​

이제 부울 열의 cssClass 속성을 "switch"로 설정하면 얻게 되는 결과는 다음과 같습니다.

스위치는 일반 체크박스와 비슷하게 작동합니다(실제로 그 위에 몇 가지 시각 효과가 표시되는 일반 체크박스입니다).

당사는 새 마크업으로 가능한 사용자 정의의 예시로만 스위치를 사용하고 있습니다. "최신 체크박스"가 아니므로 마구잡이로 사용해서는 안 됩니다.

스위치는 일부 상황에서 적절하게 쓰일 수 있습니다. 자세한 내용은 웹에서 체크박스와 토글 스위치 비교와 같은 문서를 확인하시기 바랍니다.

편집기 속성과 Interop 셀 템플릿 비교

Wijmo의 interop 모듈에서는 Angular, React, Vue 등 많이 사용되는 JavaScript 프레임워크를 지원합니다. 템플릿을 사용하는 사용자 정의 편집기는 언제나 지원되었습니다.

새로운 cellTemplate 및 editor 속성은 interop 모듈에서 제공하는 템플릿 기능과 겹칩니다. 선호도에 따라 둘 중의 하나를 사용하면 됩니다.

예를 들어, 다음은 Angular interop 모듈의 wjFlxGridCellTemplate 지시문을 사용하여 InputNumber 컨트롤을 편집기로 사용하는 경우입니다.

 <wj-flex-grid-column binding="downloads">  
     <ng-template wjFlexGridCellTemplate  
         [cellType]="'CellEdit'"  
         let-cell="cell">  
         <wj-input-number  
             [(value)]="cell.value"  
             [step]="1">  
         </wj-input-number>  
     </ng-template>  
 </wj-flex-grid-column> ​

다음은 새로운 editor 속성을 사용하는 경우입니다.

 <wj-input-number #inputNumber [step]="1">  
 </wj-input-number>

 <wj-flex-grid-column binding="downloads" editor="inputNumber">  
 </wj-flex-grid-column>

interop 템플릿을 사용할 때 얻을 수 있는 주요 이점은 다음과 같습니다.

1. 더 나은 프레임워크 통합과 더불어 마크업에서 바로 편집기를 정의할 수 있습니다.

2. 모든 셀 유형(편집기, 데이터, 행 및 열 머리글 등)에 대해 템플릿을 정의할 수 있습니다.

cellTemplate 및 editor 속성의 주요 장점은 다음과 같습니다.

1. 프레임워크 전체에 일관성을 제공합니다. 어떤 프레임워크와도 함께 사용할 수 있으며, 또는 프레임워크 없이 사용할 수도 있습니다.

2. 편집기를 손쉽게 다시 사용하고 여러 열에 적용할 수 있습니다.

사용자 정의 편집기의 지속적 발전

사용자 정의 편집기에 대한 지원은 오랫동안 당사의 할 일 목록에 포함되어 있었습니다. 사용자의 요청이 많았으며 오랫동안 interop 모듈을 통해 제공됐습니다. 이제 이 기능을 제공해 드리게 되어 매우 기쁩니다. 이를 통해 FlexGrid는 훨씬 더 강력한 성능과 유연성을 발휘하게 되었습니다.

마크업 개선 사항 및 cellTemplate 속성과 함께 편집기 속성은 모든 셀 유형에 폭넓고 사용하기 쉬운 사용자 정의 기능을 제공합니다.

이 기능을 충분히 활용하시길 바랍니다!