Wijmo FlexGrid 정렬(Sorting) 기능 정리

그리드를 사용할 때 가장 기본이 되면서도 가장 자주 사용하는 기능이 바로 정렬(Sorting)입니다.

사용자는 자연스럽게 컬럼 헤더를 클릭합니다.
그리고 오름차순, 내림차순으로 데이터가 바뀌기를 기대합니다.

FlexGrid는 이 기본 동작을 매우 안정적으로 지원합니다.
하지만 단순 클릭 정렬 이상의 기능도 제공합니다.

---

1. 기본 정렬 방식

FlexGrid는 기본적으로 컬럼 헤더 클릭 시
해당 컬럼 기준으로 정렬을 수행합니다.

grid.allowSorting = true;

기본값은 true입니다.

정렬 순서는 다음과 같습니다.

• 첫 클릭 → 오름차순
• 두 번째 클릭 → 내림차순
• 세 번째 클릭 → 정렬 해제

이 동작은 CollectionView 기반으로 수행됩니다.

---

2. 다중 컬럼 정렬

실무에서는 한 컬럼만 정렬하는 경우보다
여러 컬럼 기준으로 정렬하는 경우가 더 많습니다.

FlexGrid는 Shift 키를 이용한 다중 정렬을 지원합니다.

• 첫 컬럼 클릭
• Shift + 다른 컬럼 클릭

이 방식으로
복합 정렬이 가능합니다.

예를 들어:

• 부서 기준 정렬
• 같은 부서 내에서 이름 기준 정렬

같은 시나리오가 가능합니다.

---

3. 프로그래밍 방식 정렬

사용자 클릭이 아니라
코드에서 직접 정렬을 제어할 수도 있습니다.

let view = grid.collectionView; 
view.sortDescriptions.clear(); 
view.sortDescriptions.push( new wijmo.SortDescription('department', true) ); 
view.sortDescriptions.push( new wijmo.SortDescription('name', true) );

• 첫 번째 인자: 필드명
• 두 번째 인자: true(오름차순), false(내림차순)

이 방식은 초기 로딩 시 기본 정렬을 지정할 때 유용합니다.

---

4. 정렬 허용 여부 제어

모든 컬럼에 정렬을 허용할 필요는 없습니다.

grid.columns[0].allowSorting = false;

특정 컬럼의 정렬만 비활성화할 수 있습니다.

예를 들어:

• 체크박스 컬럼
• 액션 버튼 컬럼
• 계산 전용 컬럼

이런 경우 정렬은 오히려 혼란을 줄 수 있습니다.

---

5. 커스텀 정렬

문자열이지만 숫자처럼 정렬해야 하는 경우,
또는 특수한 비교 로직이 필요한 경우에는
sortConverter 또는 sortComparer를 활용할 수 있습니다.

예:

 

view.sortConverter = function(sd, item, value) { 
	if (sd.property === 'level') { 
		return parseInt(value.replace('Lv.', '')); 
     } 
     return value; 
 };

이 방식은
표시 형식과 실제 정렬 기준이 다를 때 유용합니다.