[英]ag-grid React Header Component Select all Checkbox selection not working on mobile and tablet properly
I am facing a weird issue where I am implementing Header component Select all Checkbox selection using ag-grid.我正面临一个奇怪的问题,我正在实现 Header 组件 Select all Checkbox selection using ag-grid。
It's working as expected on desktop but when I am testing the same functionality on tablet or mobile the checkbox selection is working randomly.它在台式机上按预期工作,但是当我在平板电脑或移动设备上测试相同的功能时,复选框选择会随机工作。
What I mean is when i am clicking inside checkbox its not getting checked but when I am clicking some where near to left border of checkbox it is getting selected.我的意思是,当我在复选框内单击时,它没有被选中,但是当我单击靠近复选框左边框的某个位置时,它被选中了。
Things I tried so far:到目前为止我尝试过的事情:
Tried changing onClick to onChange as well but no luck.也尝试将 onClick 更改为 onChange 但没有运气。
Tried putting button instead of checkbox but still same issue.尝试放置按钮而不是复选框,但仍然存在相同的问题。
Tried putting input checkbox directly in return statement but same尝试将输入复选框直接放在 return 语句中,但相同
issue.问题。
Below is the code for the same:下面是相同的代码:
Column defs:列定义:
this.setState({
terminalAllocationsColumnDefs: [
{headerName:"",field:"status", width:150, cellRendererFramework: CheckBoxRenderer, headerComponentFramework : HeaderCheckBoxRenderer,HeaderChangeCallback:this.headerChangeCallback},
{headerName: this.state.multiLangMsgs.TERMINAL_ID, field: "DId", width: 250},
{headerName: this.state.multiLangMsgs.TERMINAL_TYPE, field: "DType", width: 250},
{headerName: this.state.multiLangMsgs.MSISDN, field:"MsId", width:260},
{headerName: this.state.multiLangMsgs.SIM_ID, field:"SimId", width:260},
{headerName: this.state.multiLangMsgs.SATALITE_ID, field:"DKey", width:250}
]
});
HeaderCheckBoxRenderer Component: HeaderCheckBoxRenderer 组件:
onCheckBoxChange(){
this.selectAll = false;
if(this.state.checkStatus == "inactive"){
this.setState({
checkStatus :"active"
});
this.selectAll = true;
}else {
this.setState({
checkStatus: "inactive"
});
}
// }console.clear();
// console.log(this);
try{
if(this.props.column.colDef.HeaderChangeCallback){
this.props.column.colDef.HeaderChangeCallback(this.selectAll);
}
}catch(e){}
}
render() {
return (
<div class="ag-header-cell" style={{"padding":"4px 4px 4px 5px"}}>
<div class="ag-header-cell-resize"/>
<div class="ag-header-select-all"/>
<div class="ag-header-component"/>
<input id="checkboxMember" type="checkbox" onClick={this.onCheckBoxChange.bind(this)} className="check" checked={this.state.checkStatus == "active" ? true : false}/>
</div>
);
}
Desktop桌面
Tablet平板电脑
As you can see on desktop it is working as expected but on tablet it is working when I am clicking some where near to left border.正如您在桌面上看到的那样,它按预期工作,但在平板电脑上,当我单击靠近左边框的某个位置时,它正在工作。
Can anyone please help me out with this weird issue.任何人都可以帮我解决这个奇怪的问题。
Thanks in advance.提前致谢。
I got the issue finally and able to resolve that.我终于得到了这个问题并且能够解决这个问题。
Issue:问题:
Some how when header checkbox is getting clicked by user, column drag start event is also getting fired hence overriding or suppressing click event of checkbox.当用户单击标题复选框时,也会触发列拖动开始事件,从而覆盖或抑制复选框的单击事件。
Solution:解决方法:
As this is a checkbox column as per my client need, user no need to reposition it hence suppressing column movement ( suppressMovable: true
) solve the problem for me, like this:由于这是根据我的客户需要的复选框列,因此用户无需重新定位它,因此抑制列移动( suppressMovable: true
移动suppressMovable: true
)为我解决了问题,如下所示:
this.setState({
terminalAllocationsColumnDefs: [
{headerName:"",field:"status", width:150, cellRendererFramework: CheckBoxRenderer, headerComponentFramework : HeaderCheckBoxRenderer,HeaderChangeCallback:this.headerChangeCallback, suppressMovable: true},
{headerName: this.state.multiLangMsgs.TERMINAL_ID, field: "DId", width: 250},
{headerName: this.state.multiLangMsgs.TERMINAL_TYPE, field: "DType", width: 250},
{headerName: this.state.multiLangMsgs.MSISDN, field:"MsId", width:260},
{headerName: this.state.multiLangMsgs.SIM_ID, field:"SimId", width:260},
{headerName: this.state.multiLangMsgs.SATALITE_ID, field:"DKey", width:250}
]
});
If anyone has other solutions for same problem, please do let me know.如果有人对同一问题有其他解决方案,请告诉我。
Thanks.谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.