Context Menu

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

Context menu settings

You can set the context menu using GridView.setContextMenu().

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

Currently, nothing is set in GridView.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.

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(). In this callback function, you can define functions for each menu.

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.

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)

Link checkbar to data field Toast message window