Ag-Grid 행에 메뉴 버튼을 추가하는 방법은 무엇입니까?

Question

ag-Grid Enterprise Vue를 사용하고 있습니다.

문서 에서 개별 셀 을 마우스 오른쪽 버튼으로 클릭하여 사용할 수있는 "컨텍스트 메뉴"를 활성화하는 방법을 확인합니다 .

대신 왼쪽 클릭 시 메뉴를 여는 버튼 ( 또는 모양 ) 이있는 특수 열 ( 오른쪽에 고정됨 )을 갖고 싶습니다 .⚙...

이를 활성화하려면 어떻게해야합니까? 문서에서 예제를 찾지 못했습니다.

메뉴 버튼을 포함하는 Ag-grid Cell 은 비슷한 질문이지만 답이 없습니다.

Answer 1

에서 이 댓글 이 AG-그리드 기업의 문제에, 나는 예를 포크 할 수 있었다, 나는 내 상황 일 것이라 생각합니다.

관련 코드는 다음과 같습니다.

var gridOptions = {
    columnDefs: columnDefs,
    enableRangeSelection: true,
    getContextMenuItems: getContextMenuItems,
    allowContextMenuWithControlKey: true,
    onCellClicked: params => {
        console.log(params);
        if(params.column.colDef.field === '...'){
            params.api.contextMenuFactory.showMenu(params.node, params.column, params.value, params.event)
        }
    },
    onCellContextMenu: params => {
        params.api.contextMenuFactory.hideActiveMenu()
    }
};

function getContextMenuItems(params) {
    console.log('getContextMenuItems', params);
    const node = params.node;
    console.log('node.id, node.rowIndex, node.data', node.id, node.rowIndex, node.data);
    var result = [
        {
            name: `Alert 'Row ${node.rowIndex + 1}'`, action: function() { window.alert(`Row ${node.rowIndex + 1}`);
            },
            cssClasses: ['redFont', 'bold']
        },
        'separator',
        {
            name: 'Checked',
            checked: true,
            action: function() {
                console.log('Checked Selected');
            },
            icon: '<img src="../images/skills/mac.png"/>'
        }, 
        'copy' // built in copy item
    ];

    return result;
}