개인화 설정

개인화 설정은 사용자의 취향과 사용 패턴에 따라 인터페이스를 자동 또는 수동으로 맞춤 설정하는 기능입니다.

개인화에 사용되는 기능으론 레이아웃, 컬럼 숨기기, 고정, 필터, 정렬 등이 가능합니다.

사용자는 설정 메뉴에서 직접 조정하거나, 초기 설정 시 자동 추천을 통해 쉽게 개인화할 수 있습니다.

개인화 설정 데모는 이해를 돕기위해 변수를 활용한 예제입니다.
개인화 정보는 그리드에서 관리하지 않기에 정보관리를 할 수 있는 로직이나 저장방법은 직접 마련해야 합니다.
컬럼 그룹 사용시에 visible 속성 처리시에는 layout의 visible을 사용합니다.

그리드의 컨텍스트 메뉴를 사용해서 컬럼 고정, 필터, 높이 등의 설정을 변경 후 개인화 추가 버튼을 클릭하면 레아웃이 추가됩니다.

var personalizedList = {};
 
//개인화 추가
function addPersonalizedList() {
  const select = document.getElementById('personalizedList');
 
  const option = document.createElement('option');
  option.value = 'user' + userCount;
  option.text = '사용자' + userCount;
 
  select.appendChild(option);
  userCount++;
 
  //컬럼 필터 정보 
  var filterColumns = [];
  for(var i = 0; i < gridView.getColumns().length; i++){
      if(gridView.columnByName(gridView.getColumns()[i].name).autoFilter){
          filterColumns.push(gridView.getColumns()[i].name)
      }
  }
  //각 컬럼 필터 목록
  var activeColumnFilters = []
  for(var j = 0; j < filterColumns.length; j++){
      var filterList = gridView.getActiveColumnFilters(filterColumns[j]);
      activeColumnFilters.push(filterList)
  }
 
  const selectedValue = option.value;
  personalizedList[selectedValue] = {
    columns: gridView.getColumns(),
    layout: gridView.saveColumnLayout(),
    rowGroup: gridView.getGroupFieldNames(),
    sort: gridView.getSortedFields(),
    colFixed: gridView.fixedOptions.colCount,
    rowFixed: gridView.fixedOptions.rowCount,
    rowHeight: gridView.displayOptions.rowHeight,
    filterColumns: filterColumns,
    activeColumnFilters: activeColumnFilters
  };
 
  select.value = option.value
}
 
//개인화 변경시
function selectChange(){
  var layout = personalizedList[document.getElementById('personalizedList').value];
 
  //레이아웃
  gridView.setColumnLayout(layout.layout);
 
  //고정
  gridView.fixedOptions.colCount = layout.colFixed;
  gridView.fixedOptions.rowCount = layout.rowFixed;
 
  //행 그룹핑
  gridView.groupBy(layout.rowGroup);
  //행 높이
  gridView.displayOptions.rowHeight = layout.rowHeight;
 
  //필터
  for(var i = 0; i < gridView.getColumns().length; i++){
    gridView.columnByName(gridView.getColumns()[i].name).autoFilter = false;
  }
  if(layout.filterColumns){
    for(var i = 0; i < layout.filterColumns.length; i++){
      gridView.columnByName(layout.filterColumns[i]).autoFilter = true;
    }
  }
 
  //정렬
  var sortFields = []
  var sortDirs = []
  if(layout.sort){
    for(var j = 0; j < layout.sort.length; j++){
      sortFields.push(layout.sort[j].orgFieldName);
      sortDirs.push(layout.sort[j].direction);
    }
    gridView.orderBy(sortFields, sortDirs);
  }else{
    gridView.orderBy([], []);
  } 
}

유효성 검사 통과 이벤트 발생 순서