单击AgGrid中自定义渲染单元格内的链接后如何防止行选择

时间:2017-09-11 19:52:47

标签: reactjs ag-grid ag-grid-react

我正在使用AgGrid并在我的网格上有rowSelection="multiple",在最后一列上有{cellRendererFramework: PrintCell},这是一个显示链接的小组件。

我希望如此,当我点击PrintCell内的链接时,应执行某个操作,而不更改网格本身的状态,并保持选中当前选定的行而不使行包含选择的链接。我尝试执行event.stopPropagationevent.preventDefault以防止父行被选中,但无济于事。

任何想法如何实现这一目标?感谢

2 个答案:

答案 0 :(得分:1)

由于行单击是指定的行为,因此可能更容易使用复选框选择并完全禁用焦点行选择。但是如果你想保持这条路径,我通过截取单元格焦点中的事件并阻止那里的行选择来生成所需的行为。

private onCellFocused($event) {
    if($event.column && $event.column.colId == "commentid"){
        this.gridOptions.suppressRowClickSelection = true;
    } else {
        this.gridOptions.suppressRowClickSelection = false;
    }

这会完全切换行选择事件,但仅当您选择不希望行为发生的列时(警告:angular 2示例,我们已将ag-grid包裹在我们自己的组件中。) / p>

希望这会有所帮助......

答案 1 :(得分:1)

2018年6月更新:

Ag-Grid的API已经改变。关键变化是需要在网格的<{1}}事件中对e.api.gridOptionsWrapper.gridOptions.suppressRowClickSelection进行更改

这是一个完整的解决方案,它使用可重复使用的单元格渲染器在行的末尾创建不会触发行选择的操作或按钮。此解决方案假定您使用的是Ag-grid的React版本,并且您正在使用自定义单元格渲染器。

onCellFocused