ag-grid React Header Component Select all Checkbox selection not working on mobile and tablet properly

Question

I am facing a weird issue where I am implementing Header component 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.

• Tried putting button instead of checkbox but still same issue.

• Tried putting input checkbox directly in return statement but same
  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:

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.

Answer 1

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:

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.