SMART datagrid v1.4 > Examples

Back  Forward

Grid Context Menu  Example

Browser의 contextmenu 이벤트를 가로채서 그리드를 위한 컨텍스트 메뉴를 표시할 수 있다. 

먼저 GridBase.setContextMenu 호출로 브라우저 컨텍스트 메뉴 대신 표시될 그리드 컨텍스트 메뉴를 설정한다. 또, GridBase.setDefaultContextMenu로 방금 등록한 메뉴를 기본 메뉴로 설정할 수 있다. 기본 메뉴는 setContextMenu를 호출할 때 메뉴를 지정하지 않으면 실행되는 메뉴다. 

Code -1
    var menu = grdMain.setContextMenu([{
        label: "Add Row",
        callback: function () {
            grdMain.insert();
        }
    },
        ...
    ]);
    grdMain.setDefaultContextMenu(menu);

메뉴를 정의하는 방법은 메뉴 개요 도움말을 참조한다. 

Grid - 1
rows

마우스가 클릭된 위치에 따라 다른 메뉴셋을 표시하거나, 또는 메뉴를 표시하지 않게 하려면 onContextMenuPopup 이벤트를 이용한다. 이 이벤트 핸들러에서 명시적으로 false를 리턴하면 메뉴가 표시되지 않고, 브라우저 컨텍스트 메뉴가 표시된다. 

또, 핸들러 내에서 GridBase.setContextMenu를 호출해서 표시될 메뉴를 변경할 수도 있다. 이 때 GridBase.registerPopupMenu를 통해 등록된 메뉴를 지정할 수 있다. 

Code -2
    grdMain.onContextMenuPopup = function (grid, x, y) {
        var index = grid.pointToIndex(x, y);

        if (index && index.column && index.column.name() == "LoanNumber") {
            // 임시 메뉴를 실행한다.
            grid.setContextMenu(menu2);
        } else if (index && index.column && index.column.name() == "Country") {
            // false를 리턴하면그리드 메뉴 대신 브라우저 메뉴가 실행된다.
            return false;
        } else if (index && index.column && index.column.name() == "Currency") {
            // registerPopupMenu()로 등록된 메뉴를 실행 시킨다.
            return grid.setContextMenu('menu1');
        } else {
            // default context 메뉴가 실행된다.
            grid.setContextMenu(null);
        }
    };

메뉴 항목이 클릭되면, 메뉴 항목에 callback이 설정된 경우 callback이 실행되고, 그렇지 않은 경우 GridBase.onContextMenuClicked 이벤트가 발생한다. 


소스보기 JSP 

See Also
메뉴 개요
GridBase.setContextMenu
GridBase.setDefaultContextMenu
GridBase.onContextMenuPopup
GridBase.onContextMenuClicked
GridBase.registerPopupMenu
GridBase.unregisterPopupMenu
GridBase.getPopupMenu
GridBase.pointToIndex
exportToExcel
Examples
Column Popup Menu