2017년에 미국에서 대기업 고객 중 한 분께서 여러 행을 클릭하여 선택할 수 있도록 모든 그리드 행에 "선택기" 체크박스를 추가해 달라고 요청했습니다. 그들은 내장 된 ListBox 선택 모드를 사용하고 싶지 않았습니다. 개발팀은 그들을 위해 샘플을 만들었습니다.

2018년 유럽에서도 대기업 고객 중 한 분이 비슷한 요청을 했지만 추가적인 사항이 있었습니다. 그룹 머리글 행에도 체크박스가 있어 사용자가 한 번에 전체 그룹을 선택할 수 있도록 원했습니다. 개발팀은 원본 샘플을 개선하여 사본을 전달하였습니다.

2019년 일본에서 대기업 고객 중 한 분도 같은 요청을 했습니다. 전 세계의 3개 대기업이 이를 원한다면 많은 고객이 이를 원할 것이라고 생각하여 Wijmo 개발팀은 샘플을 업그레이드하고 그것을 공식 Wijmo 모듈인 wijmo.grid.selector로 만들기로 결정하였습니다.

FlexGrid의 설치 공간을 최대한 작게 유지하기 위해 이 기능을 별도의 모듈로 구현하기로 결정했습니다.

wijmo.grid.selector 모듈에는 두 개의 클래스가 포함되어 있습니다 :

• Selector : 이 클래스는 셀에 체크박스를 추가하여 FlexGrid 열을 사용자 정의합니다. 체크박스는 사용자가 행의 isSelected 속성을 토글하도록 표시하고 허용합니다. 그룹 머리글 행이 있으면 해당 체크박스가 그룹의 모든 항목에 대해 선택된 상태를 표시하고 토글합니다. 모든 행에 대한 선택을 토글하기 위해 추가 체크박스가 열 머리글에 추가됩니다.

• BooleanChecker : 이 클래스는 그룹 행과 열 머리글에 체크박스를 추가하여 부울 필드에 바인딩 된 일반 데이터 열을 사용자 정의합니다. 이 체크박스는 그룹 또는 전체 그리드의 모든 항목에 대한 부울 속성 값을 전환하는 데 사용됩니다.

Selector 및 BooleanChecker 생성 :

import { Selector, BooleanChecker } from '@grapecity/wijmo.grid.selector';
 import { FlexGrid } from '@grapecity/wijmo.grid';
 import { CollectionView, DataType, Aggregate } from '@grapecity/wijmo';

 window.onload = function () {

     // create the grid
     let theGrid = new FlexGrid('#theGrid', {
         itemsSource: getData()
     });

     // create the Selector on the first row header column
     let selector = new Selector(theGrid); 

     // add BooleanCheckers to all bound Boolean columns
     theGrid.columns.forEach(col => {
         if (col.dataType == DataType.Boolean) {

             // set aggregate to show checkboxes on group header rows
             col.aggregate = Aggregate.First;

             // create the BooleanChecker on the column
             new BooleanChecker(col);
         }
 });

Selector 생성자는 FlexGrid 또는 Column 매개변수를 갖습니다. 그리드를 전달하면 Selector가 그리드의 첫 번째 행 헤더 열(표준 기본값)에 연결됩니다. 특정 열을 전달하면 해당 열이 대신 사용됩니다. BooleanChecker는 부울 필드에 바인딩 된 열을 지정하는 매개변수를 갖습니다.

결과는 다음과 같습니다.

열 머리글의 체크박스를 사용하면 모든 행을 선택하거나 선택 해제할 수 있습니다. 그룹 머리글 행의 그룹은 전체 그룹을 선택하고 일반 데이터 행의 그룹은 개별 행을 선택합니다.

셀에 바인딩 된 값을 변경하는 항목을 선택하는 것을 제외하고 부울 열의 체크박스에 동일한 로직이 적용됩니다.

선택된 셀이 어떻게 선택되지 않은 행에 속하는지 알아보겠습니다. Selector가 그리드의 selectionMode 속성을 SelectionMode.Cell로 설정하기 때문에 가능한데, 이 설정을 통해 사용자는 행의 isSelected 속성에 영향을 주지 않고 마우스나 키보드로 선택 항목을 이동할 수 있습니다. 다른 selectionMode를 사용하려면 Selector를 만든 후 설정해야 합니다.

Selector는 일반적으로 그리드의 첫 번째 열에 적용되지만, 꼭 그래야 하는 것은 아닙니다. 일반 데이터 열에도 적용할 수 있으며 그리드에 행 머리글 셀이 없는 경우 특히 유용합니다.

FlexGrid 선택기 데모 :

• FlexGrid 선택기 JavaScript 데모
• FlexGrid 선택기 Angular 데모
• FlexGrid 선택기 React 데모
• FlexGrid 선택기 Vue 데모