RealGrid2 튜토리얼
그리드 조작하기

그리드 조작하기

이전 단계 데이터 채우고 가져오기에서는 그리드에 데이터를 채우고 가져오는 방법에 대해 알아보았습니다. 이번 단계에서는 데이터가 채워진 그리드를 조작하는 여러가지 방법에 대해 알아보겠습니다.

소팅 Sorting

RealGrid2에는 특별한 코딩이나 별도의 개발없이 사용자가 직접 그리드의 헤더영역을 클릭하여 데이터를 정렬할 수 있는 소팅 기능을 포함하고 있습니다.

사용자 조작

사용자가 컬럼의 헤더를 클릭하여 해당 컬럼을 정렬하려면 GridView의 SortingOptions에 enabled 속성이 true이고 해당 컬럼 Header의 sortable속성도 true여야 합니다. 두 속성 모두 기본값이 true이기 때문에 코드를 변경하지 않았다면 기본적으로 데이터가 채워진 다음 헤더를 클릭하면 정렬이 가능합니다.

프로그래 조작

프로그래밍적으로 데이터 컬럼을 정렬하려면 GridView의 orderBy() 함수를 사용하면 됩니다.

orderBy 함수의

  • 첫 번째 인자는 정렬을 위한 컬럼의 이름
  • 두 번째 인자는 정렬방식
  • 세 번째 인자는 대소문자 구분 유형

입니다.

아래 예는 성별과 나이컬럼을 각각 오름차순, 내림차순으로 정렬하는 예 입니다.

gridView.orderBy(
  ['Gender', 'Age'],
  ['ascending', 'descending'],
  ['insensitive', 'insensitive']
);

소팅에 대해 더 많은 샘플은 데이터 정렬가이드를 참고하세요.

그룹핑 Grouping

그룹핑은 RealGrid2의 강력한 기능중 하나로 사용자의 필요에 맞게 데이터를 묶어주는 시각화 기능입니다.

사용자 조작

사용자가 직접 그룹핑할 컬럼을 지정하도록 하려면 Group Panel을 보이도록 옵션을 수정해야 합니다.

gridView.setGroupPanel({ visible: true });

이렇게 하면 아래 데모화면 처럼 Group Panel 이 표시되고 컬럼 헤더를 드래그 해서 그 위헤 올리면 해당 컬럼으로 그룹을 잡을수 있습니다.

아래 데모에서 성별 컬럼의 헤더를 드래그 해서 Group Panel 에 올려보세요.

프로그램 조작

프로그래밍 적으로 데이터를 그룹핑하려면 GridView의 groupBy() 함수를 사용합니다.

groupBy 함수의

  • 첫 번째 인자는 그룹잡을 컬럼 이름 배열
  • 두 번째 인자는 정렬 여부
  • 세 번째 인자는 정렬시 정렬 방법

입니다.

gridView.groupBy(['Gender'], true, 'ascending');

그룹핑에 대한 자세한 설명은 가이드에서

를 참고하세요.

필터링 Filtering

필터링은 DataProvider의 데이터중 조건에 맞는 데이터만 그리드에 표시하는 기능입니다.

사용자 수준

사용자가 직접 그리드에서 필터링을 하기위해서는

  • GridView가 필터링 가능하도록 FilteringOptions 옵션을 설정해야 하고

FilteringOptions의 enabled는 기본값이 true이며 setFilterOptions()함수로 설정을 변경할 수 있습니다.

gridView.setFilteringOptions({ enabled: true });

setColumnFilters 함수의

  • 첫 번째 인자는 설정 될 컬럼의 이름 또는 컬럼 객체
  • 두 번째 인자는 필터 객체의 배열, ColumnFilter 의 배열

입니다.

const filters = [
  {
    name: '남자',
    criteria: "value = '남'",
  },
  {
    name: '여자',
    criteria: "value = '여'",
  },
];
gridView.setColumnFilters('GenderColumn', filters);

사용자 수준의 필터링에 대한 정보는 가이드에서

부분을 참고하세요.

데이터 수준의 필터

데이터 수준에서 필터를 조작하기 위해서는 DataProvider의 setFilters() 함수로 데이터를 채우기전 필터를 지정 할 수 있습니다.

즉, 데이터 수준의 필터는 DataProvider에 데이터를 채우기 전에 조건을 설정해 두고 데이터를 채우는 과정에서 필터의 조건에 적합한 데이터만 채우게 되는 원리입니다.

provider.setFilters({ criteria: "value['Gender']='여'" });
 
// 데이터 채우기
provider.setRows([
  {
    KorName: "박영호",
    Gender: "남",
    Age: "71",
  },
  ...
]);

setFilters 함수의

  • 첫 번째 인자는 필터 설정값
  • 두 번째 인자는 필터들의 연산 조건 and 또는 or

선택 Selecting

그리드에서 셀들을 선택하는 방식은 SelectionStyle옵션 설정으로 수정할 수 있습니다. SelectionStyle은 DisplayOptions.selectionStyle() 함수로 변경이 가능합니다.

SelectionStyle은

  • BLOCK - 블록 형태로 선택
  • COLUMNS - 컬럼 단위로 선택
  • ROWS - 행 단위로 선택
  • SINGLE - 하나의 셀만 선택
  • SINGLE_COLUMN - 하나의 컬럼만 선택
  • SINGLE_ROW - 하나의 행만 선택
  • NONE - 선택 불가

등 7가지가 있습니다.

각 옵션에 대한 데모는 가이드의 선택 부분을 참고하세요.

데이터 채우고 가져오기그리드 편집하기