Personalization settings

Personalization settings are a function that automatically or manually customizes the interface according to the user's preferences and usage patterns.

The functions used for personalization include layout, column hiding, fixing, filtering, and sorting.

Users can adjust them directly from the settings menu or easily personalize them through automatic recommendations during initial setup.

The personalization settings demo is an example that uses variables to help with understanding.

Since personalization information is not managed in the grid, you must directly prepare the logic or storage method for information management.

When processing the visible property when using a column group, use the visible of layout.

If you change the settings such as column fixation, filter, and height using the grid's context menu and click the Add Personalization button, the layout will be added.

Loading RealGrid...

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([], []);
  } 
}

Validation passed Order of event occurrence