Context Menu

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

Context menu settings

Loading RealGrid...

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

Loading RealGrid...

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.

Loading RealGrid...

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.

Loading RealGrid...

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