컨텍스트 메뉴

컨텍스트메뉴(ContextMenu)는 그리드 영역에서 마우스 오른쪽 버튼을 클릭하였을때 표시되는 메뉴를 말합니다.

컨텍스트 메뉴 설정

GridView.setContextMenu()를 사용하여 컨텍스트 메뉴를 설정할 수 있습니다.

gridView.setContextMenu([
    {
      label: "Menu1",
      children: [{
         label: "submenu1 입니다."
      }, {
          label: "submenu2 입니다."
      }]
    },
    {
      label: "Menu2"
    },
    {
      label: "-" // menu separator를 삽입합니다.
    },
    {
      label: "ExcelExport"
    }
  ]);

컨텍스트 메뉴 호출시 발생하는 콜백함수

현재 GridView.onContextMenuPopup()에는 아무것도 설정되어 있지 않기 때문에 그리드의 어느 영역에서나 마우스 오른쪽 버튼을 클릭하게되면 컨텍스트 메뉴가 팝업 됩니다.
만약 onContextMenuPopup()에서 false를 리턴하게 되면 컨텍스트 메뉴 호출이 취소됩니다.
헤더영역에서 호출시 팝업되지 않게 설정해보도록 하겠습니다.

gridView.onContextMenuPopup = function(grid, x, y, elementName) {
  //헤더셀 영역에서는 컨텍스트 메뉴 실행하지 않음
  return elementName.cellType != "header";
};

컨텍스트 메뉴를 클릭시 발생하는 콜백함수

컨텍스트 메뉴를 클릭하면 GridView.onContextMenuClicked()가 발생합니다. 이 콜백 함수에서 각 메뉴에 대한 기능정의를 할 수 있습니다.

gridView.onContextMenuItemClicked = function(grid, item, clickData) {
    alert(
        "Context menu가 클릭됐습니다: " + item.label + "\n" + JSON.stringify(clickData)
    );
    if (item.label == "ExcelExport") {
        grid.exportGrid({
        type: "excel",
        target: "local"
        });
    }
};

동적 컨텍스트 메뉴

컬럼 헤더와 데이터 셀 영역에 다른 컨텍스트 메뉴와 동작들로 구성한 예제입니다.

var toggle = false;
function setContextMenu(grid) {
   grid.onContextMenuItemClicked = function (grid, item, clickData) { 
       if (item.tag == "excel") {
           grid.exportGrid({
               type: "excel",
               target: "local",
               fileName: "gridExportSample.xlsx"
           });
       } else if (item.tag == 'filter' && clickData.column) {
           createColumnFilter(grid, clickData.column);
       } else if (item.tag == 'visibleTrue') {
           var columns = grid.getColumns();
 
           for (var i in columns) {
               grid.setColumnProperty(columns[i].name, "visible", true);
           }
           toggle = false;
           setHeaderCellContextMenu(grid, toggle);
       } else if (item.tag == 'visibleFalse') {
           grid.setColumnProperty(clickData.column, "visible", false);
 
           toggle = true;
           setHeaderCellContextMenu(grid, toggle);
       } else if (item.tag == 'fixedCol') {
           var count = grid.layoutByColumn(clickData.column).root.vindex + 1;
           grid.setFixedOptions({ colCount: count });
       } else if (item.tag == 'fixedRow') {
           var count = clickData.itemIndex + 1;
           grid.setFixedOptions({ rowCount: count });
       } else if (item.tag == 'fixedCancel') {
           grid.setFixedOptions({ colCount: 0, rowCount: 0 });
       };
   }
 
   grid.onContextMenuPopup = function (grid, x, y, elementName) {
       if (elementName.cellType == 'header') {
           setHeaderCellContextMenu(grid, toggle);
       } else if (elementName.cellType == 'data') {
           setDataCellContextMenu(grid);
       } else {
           return false;
       }
   };
 
   setDataCellContextMenu(grid);
}
 
function setHeaderCellContextMenu(grid, val) {
   var contextMenu = [{
       label: '엑셀 내보내기',
       tag: 'excel'
   }, {
       label: '필터 만들기',
       tag: 'filter'
   }, {
       label: "-"
   }, {
       label: '컬럼 숨기기',
       tag: 'visibleFalse'
   }, {
       label: '컬럼 모두 보이기',
       tag: 'visibleTrue',
       enabled: val
   }];
 
   grid.setContextMenu(contextMenu);
}
 
function setDataCellContextMenu(grid) {
   var contextMenu = [{
       label: '엑셀 내보내기',
       tag: 'excel'
   }, {
       label: "-"
   }, {
       label: '열 고정',
       tag: 'fixedCol'
   }, {
       label: '행 고정',
       tag: 'fixedRow'
   }, {
       label: '고정 취소',
       tag: 'fixedCancel'
   }];
 
   grid.setContextMenu(contextMenu);
}
 
function setHeaderCellContextMenu(grid, val) {
   var contextMenu = [{
       label: '엑셀 내보내기',
       tag: 'excel'
   }, {
       label: '필터 만들기',
       tag: 'filter'
   }, {
       label: "-"
   }, {
       label: '컬럼 숨기기',
       tag: 'visibleFalse'
   }, {
       label: '컬럼 모두 보이기',
       tag: 'visibleTrue',
       enabled: val
   }];
 
   grid.setContextMenu(contextMenu);
}
 
function setDataCellContextMenu(grid) {
   var contextMenu = [{
       label: '엑셀 내보내기',
       tag: 'excel'
   }, {
       label: "-"
   }, {
       label: '열 고정',
       tag: 'fixedCol'
   }, {
       label: '행 고정',
       tag: 'fixedRow'
   }, {
       label: '고정 취소',
       tag: 'fixedCancel'
   }];
 
   grid.setContextMenu(contextMenu);
}
 
function createColumnFilter(grid, colName) {
    var fieldName = grid.getColumnProperty(colName, "fieldName");
    var distinctValues = dataProvider.getDistinctValues(fieldName);
    var filters = [];
 
    for (var i = 0; i < distinctValues.length; i++) {
        filters.push({ name: distinctValues[i], criteria: "value = " + "'" + distinctValues[i] + "'" });
    }
 
    grid.setColumnFilters(colName, filters);
}
 
setContextMenu(grid);

체크바와 데이터 필드의 연결 토스트 메시지 창