
# Context Menu

`ContextMenu` refers to the menu displayed when you right-click in the grid area.

#### Context menu settings

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "40",
    header: {
      text: "Age"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    header: {
      text: "Product ID"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    header: {
      text: "Investment Country"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "40",
    header: {
      text: "Payment Count"
    }
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "40",
    header: {
      text: "Remaining Count"
    }
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "40",
    numberFormat: "0.00",
    header: {
      text: "Interest Rate"
    }
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Payment Amount"
    }
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Maturity Amount"
    }
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Current Balance"
    }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

gridView.setContextMenu([
  {
    label: "Menu1",
    children: [{
      label: "This is submenu1."
    }, {
      label: "This is submenu2."
    }]
  },
  {
    label: "Menu2"
  },
  {
    label: "-"
  },
  {
    label: "ExcelExport"
  }
]);
```

You can set the context menu using [GridView.setContextMenu()](/refs/Class/GridBase#setcontextmenu).

```js
gridView.setContextMenu([
     {
       label: "Menu1",
       children: [{
          label: "This is submenu1."
       }, {
           label: "This is submenu2."
       }]
     },
     {
       label: "Menu2"
     },
     {
       label: "-" // Insert menu separator.
     },
     {
       label: "ExcelExport"
     }
   ]);
```

#### Callback function that occurs when calling the context menu

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "40",
    header: {
      text: "Age"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    header: {
      text: "Product ID"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    header: {
      text: "Investment Country"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "40",
    header: {
      text: "Payment Count"
    }
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "40",
    header: {
      text: "Remaining Count"
    }
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "40",
    numberFormat: "0.00",
    header: {
      text: "Interest Rate"
    }
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Payment Amount"
    }
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Maturity Amount"
    }
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Current Balance"
    }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

gridView.setContextMenu([
  {
    label: "Menu1"
  },
  {
    label: "Menu2"
  },
  {
    label: "-"
  },
  {
    label: "ExcelExport"
  }
]);

gridView.onContextMenuPopup = function(grid, x, y, elementName) {
  return elementName.cellType != "header";
};
```

Currently, nothing is set in [GridView.onContextMenuPopup()](/refs/Class/GridBase#oncontextmenupopup), so right-clicking anywhere in the grid will pop up a context menu.
If onContextMenuPopup() returns false, the context menu call is canceled.
Let's set it so that it does not pop up when called from the header area.

```js
gridView.onContextMenuPopup = function(grid, x, y, elementName) {
   //Do not run context menu in header cell area
   return elementName.cellType != "header";
};
```

#### Callback function that occurs when the context menu is clicked

Clicking on the context menu fires [GridView.onContextMenuClicked()](/refs/Class/GridBase#oncontextmenuitemclicked). In this callback function, you can define functions for each menu.

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "40",
    header: {
      text: "Age"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    header: {
      text: "Product ID"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    header: {
      text: "Investment Country"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "40",
    header: {
      text: "Payment Count"
    }
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "40",
    header: {
      text: "Remaining Count"
    }
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "40",
    numberFormat: "0.00",
    header: {
      text: "Interest Rate"
    }
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Payment Amount"
    }
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Maturity Amount"
    }
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Current Balance"
    }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

gridView.setContextMenu([
  {
    label: "Menu1"
  },
  {
    label: "Menu2"
  },
  {
    label: "-"
  },
  {
    label: "ExcelExport"
  }
]);

gridView.onContextMenuItemClicked = function(grid, item, clickData) {
  alert(
    "Context menu was clicked: " + item.label + "\n" + JSON.stringify(clickData)
  );
  if (item.label == "ExcelExport") {
    grid.exportGrid({
      type: "excel",
      target: "local"
    });
  }
};
```

```js
gridView.onContextMenuItemClicked = function(grid, item, clickData) {
     alert(
         "Context menu was clicked: " + item.label + "\n" + JSON.stringify(clickData)
     );
     if (item.label == "ExcelExport") {
         grid.exportGrid({
         type: "excel",
         target: "local"
         });
     }
};
```

#### Dynamic context menu

This is an example of different context menus and actions in the column header and data cell area.

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "40",
    header: {
      text: "Age"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    header: {
      text: "Product ID"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    header: {
      text: "Investment Country"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    },
    renderer: {
      type: "text"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "40",
    header: {
      text: "Payment Count"
    }
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "40",
    header: {
      text: "Remaining Count"
    }
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "40",
    numberFormat: "0.00",
    header: {
      text: "Interest Rate"
    }
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Payment Amount"
    }
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Maturity Amount"
    }
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Current Balance"
    }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

var toggle = false;

function setHeaderCellContextMenu(grid, val) {
  var contextMenu = [{
    label: 'Excel Export',
    tag: 'excel'
  }, {
    label: 'Create Filter',
    tag: 'filter'
  }, {
    label: "-"
  }, {
    label: 'Hide Column',
    tag: 'visibleFalse'
  }, {
    label: 'Show All Columns',
    tag: 'visibleTrue',
    enabled: val
  }];
  grid.setContextMenu(contextMenu);
}

function setDataCellContextMenu(grid) {
  var contextMenu = [{
    label: 'Excel Export',
    tag: 'excel'
  }, {
    label: "-"
  }, {
    label: 'Fix Column',
    tag: 'fixedCol'
  }, {
    label: 'Fix Row',
    tag: 'fixedRow'
  }, {
    label: 'Unfix',
    tag: 'fixedCancel'
  }];
  grid.setContextMenu(contextMenu);
}

gridView.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) {
    grid.columnByName(clickData.column).autoFilter = true;
  } 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 });
  }
};

gridView.onContextMenuPopup = function (grid, x, y, elementName) {
  if (elementName.cellType == 'header') {
    setHeaderCellContextMenu(grid, toggle);
  } else if (elementName.cellType == 'data') {
    setDataCellContextMenu(grid);
  } else {
    return false;
  }
};

setDataCellContextMenu(gridView);
```

```js
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: 'Export to Excel',
        tag: 'excel'
    }, {
        label: 'Create filter',
        tag: 'filter'
    }, {
        label: "-"
    }, {
        label: 'Hide column',
        tag: 'visibleFalse'
    }, {
        label: 'Show all columns',
        tag: 'visibleTrue',
        enabled: val
    }];

    grid.setContextMenu(contextMenu);
}

function setDataCellContextMenu(grid) {
    var contextMenu = [{
        label: 'Export to Excel',
        tag: 'excel'
    }, {
        label: "-"
    }, {
        label: 'Freeze Columns',
        tag: 'fixedCol'
    }, {
        label: 'Row Freeze',
        tag: 'fixedRow'
    }, {
        label: 'Unfreeze',
        tag: 'fixedCancel'
    }];

    grid.setContextMenu(contextMenu);
}

function setHeaderCellContextMenu(grid, val) {
    var contextMenu = [{
        label: 'Export to Excel',
        tag: 'excel'
    }, {
        label: 'Create filter',
        tag: 'filter'
    }, {
        label: "-"
    }, {
        label: 'Hide column',
        tag: 'visibleFalse'
    }, {
        label: 'Show all columns',
        tag: 'visibleTrue',
        enabled: val
    }];

    grid.setContextMenu(contextMenu);
}

function setDataCellContextMenu(grid) {
    var contextMenu = [{
        label: 'Export to Excel',
        tag: 'excel'
    }, {
        label: "-"
    }, {
        label: 'Freeze Columns',
        tag: 'fixedCol'
    }, {
        label: 'Row Freeze',
        tag: 'fixedRow'
    }, {
        label: 'Unfreeze',
        tag: 'fixedCancel'
    }];

    grid.setContextMenu(contextMenu);
}

function createColumnFilter(grid, colName)