Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Click On column text donot trigger onRowSelect #999

Closed
skrajath opened this issue Jan 31, 2017 · 16 comments
Closed

Click On column text donot trigger onRowSelect #999

skrajath opened this issue Jan 31, 2017 · 16 comments

Comments

@skrajath
Copy link

skrajath commented Jan 31, 2017

I have column with dataFormat returning

<span className="column-select">{this.props.field}</span>

and the css as below to make it look like clickable

.column-select{
	cursor:pointer;
}

.column-select:hover{
	color:#9A144A;
}

When clicked on this text, onRowSelect is not getting triggered. Below is the row props

handleRowSelect(row, isSelected, e) {
      if (e.target.cellIndex === 0)
           alert(`row clicked`);
    }
const selectRowProp = {
            mode: 'checkbox', 
            hideSelectColumn: true, 
            clickToSelect: true,
            bgColor: 'pink', 
            onSelect: this.handleRowSelect,
            
          };
 <BootstrapTable selectRow={ selectRowProp } pagination={ false }>
<TableHeaderColumn 
                isKey 
                width='350' 
                dataAlign='center'
                dataField='id'
                dataFormat={idFormatter}
                >Payment ID</TableHeaderColumn>

but the bgColor: 'pink', gets applied. Am i missing something here?

@AllenFang
Copy link
Owner

this may related with #994, I'll fix it soon.

@AllenFang
Copy link
Owner

Fixed on v2.11.0, check this out and let me know if the problem still remain.

@skrajath
Copy link
Author

skrajath commented Feb 1, 2017

Problem still remains.

I have these

"react": "^15.4.2",
"react-bootstrap-table": "^2.11.0",

Also can it be like, onRowSelect should be triggered only when clicked on the formatted text and not any where else in the cell?

@AllenFang
Copy link
Owner

AllenFang commented Feb 1, 2017

ok, are you sure that handleRowSelect still not called?

Also can it be like, onRowSelect should be triggered only when clicked on the formatted text and not any where else in the cell?

I thought when you enable clickToSelect, which means you click on the whole row is supposed to be selected instead of specified area or custom formatted, this rule is been clear from this project start

Anyway, I'll try to reproduce this issue. thanks 👍

@AllenFang AllenFang reopened this Feb 1, 2017
@AllenFang
Copy link
Owner

make sure is that handleRowSelect not called or your alert not popup. I cant' reproduce this issue, I've a custom cell by dataFormat and I make the font much bigger so that I can click on them, after my testing, the onSelect callback was being called successfully. Close it.

@skrajath
Copy link
Author

skrajath commented Feb 1, 2017

handleRowSelect is not called for sure. I tried with increasing font as well. :(

@AllenFang
Copy link
Owner

could you please show me this formatter idFormatter ?

@skrajath
Copy link
Author

skrajath commented Feb 2, 2017

Here is the formatter

class IdFormat extends React.Component {
  render() {
    return (
      <span className="column-select">{this.props.field}</span>
    );
  }
}

function IdFormatter(cell,row){
     return (
        <IdFormat field={ cell }/>
      );
}

and the css

.column-select{
	cursor:pointer;
}

.column-select:hover{
	color:#9A144A;
}
.column-select{
	cursor:pointer;
}

.column-select:hover{
	color:#9A144A;
}

and this

 <TableHeaderColumn 
                        isKey 
                        width='480' 
                        headerAlign='center' 
                        dataAlign='left'
                        dataField='Id'
                        dataFormat={IdFormatter}
                        >ID</TableHeaderColumn>

@AllenFang
Copy link
Owner

@skrajath, I already follow all your code again, but still can't reproduce this issue, any idea or a simple repo for me to test?

@skrajath
Copy link
Author

skrajath commented Feb 6, 2017

@AllenFang
Copy link
Owner

AllenFang commented Feb 6, 2017

Your example can not run correctly(npm run dev fail), Seems like can not recognize the JSX, please configure as well.

BTW, I copy your code and test it again on my local but the functionality is still work well, the handleRowSelect has been called,

But you code is very strange:

  1. you disable pagination, but give pagination options
  2. you enable remote mode, but you dont have any store to handle the data
  3. the selection column disappear without any error, I just guess cause by 1 or 2

Anyway, I've no time to debug your application to figure why npm run dev fail and I have no time to think why you have these strange configuration and these configuration is different with you mentioned above....

so just give me a correct code and correct command and let me reproduce,

this issue should be fixed, because other people have report me the bug is gone.

Anyway, I want a clear, correct, executable and simple example or repo to reproduce this issue, I really have no time to waste on here

@skrajath
Copy link
Author

skrajath commented Feb 6, 2017

@AllenFang Sorry for the confusion. Here is a new repo and the readme file has 3 simple steps to run the sample
https://github.com/skrajath/react-bootstraptable-customheader

Let me know if you need any more information

@AllenFang
Copy link
Owner

HI, I still got following error:

2017-02-07 9 02 41

BTW, I still copy you code again and test on my local, the handleRowSelect was being called successfully.

@skrajath
Copy link
Author

skrajath commented Feb 9, 2017

I understand the copy paste is working for you. What looks strange is, what is that I am missing in my app.
Also the repo is updated (sorry again). Can you please run again.
https://github.com/skrajath/react-bootstraptable-customheader

@AllenFang
Copy link
Owner

AllenFang commented Feb 10, 2017

https://github.com/skrajath/react-bootstraptable-customheader/blob/master/package.json#L7 this line let me fail again on npm run dev

It take global webpack-dev-server instead of inside the repo, so I got the missing of webpack-dev-server. So I install it but get some fails cause its version does not match with webpack, because I dont know your global webpack-dev-server version, so I install newest webpack-dev-server,

Please fix it.

@skrajath
Copy link
Author

My global webpack-dev-server version is 4.0.3.
Please check with this, in the mean time I will get the repo fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants