Programmatically enable custom editor to a cell

[hctslm]

While rendering data in table I am adding a custom editor to each cell based on its data type, but default they should be non editable mode, var selectRowProp = { mode: "radio", clickToSelect: true, onSelect: (row, isSelected,evt) => { if(evt.target.parentElement.nodeName =="TR") { $(evt.target.parentElement).find("td").attr("editable",true); } }; <BootstrapTable data={dataObj} hover={true} pagination={true} search={true} selectRow={selectRowProp} cellEdit={ cellEditProp }

<TableHeaderColumn isKey={true} dataField={"test"} dataSort={true} editable={false} customEditor={ { getElement: createNameEditor } }

text < /TableHeaderColumn> < /BootstrapTable>

So in above code and editable=false to make it non editable initially, after selection of that row i want make enable the custom editor, So I am enabling the cells in onSelect event as mentioned above in selectRowProp, but it's not working

Please let me know what i am doing is correct or not

Thanks in advance

[AllenFang]

HI @hctslm, firstly, I would like to know how do you selection? User click the selection column? or you manage the selection state on your program?

Second, if you want to change the editable, you can not change the dom attribute directly by javascript or jquery, you should use the way of React.

Third, you said, you want to make enable the custom editor after selection, but you need to enable the editable firstly. Right? In addition, I've no idea about enable custom editor, could you please describe it more detail?

Finally, the bool value on editable which control the editable of column instead of a cell, so I think you have misunderstand on it. For example, if you configure `editable as false` on a column which means this whole column is noneditable. But as your mentioned, you said when user select a row, you want to make column editable with a custom editor, but it not make sense, because user select a row but you enable the whole column as editable.

BTW, editable can allow you to control the editable level down to the cell, but you need to give a function instead a bool value.

Feel free to discuss with me. Thanks

[hctslm]

Hi,

Here I want to enable the cells of a row which user got selected, not column wise Row wise ,means if the user selects first row I need to allow the user to edit only the first row columns or cells not in all the rows and columns

Row wise editing needs to be done instead of column wise

Provide if any solution is there for my requirement

Thanks,

[hctslm]

As you said this point Second, if you want to change the editable, you can not change the dom attribute directly by javascript or jquery, you should use the way of React.

What is the way of React ? can you give any code to change editable feature programmatically

Thanks in advance

[AllenFang]

@hctslm, how user to select row? click on row or only check the selection column?

[AllenFang]

I'm not sure following code is that you want, it;s very extremely.

class ClickToSelectTable extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      selected: []
    };
  }

  isEditable = (cell, row) => {
    return this.state.selected.indexOf(row.id) > -1;
  }

  onRowClick = ({ id }) => {
    if (this.state.selected.indexOf(id) === -1) {
      this.setState({
        selected: [ ...this.state.selected, id ]
      }, () => {
        return false;
      });
    }
  }

  onRowSelect = ({ id }, isSelected) => {
    if (isSelected) {
      this.setState({
        selected: [ ...this.state.selected, id ]
      });
    } else {
      this.setState({ selected: this.state.selected.filter(it => it !== id) });
    }
    return false;
  };

  render() {
    const cellEditProp = {
      mode: 'click',
      blurToSave: true
    };
    const options = {
      onRowClick: this.onRowClick
    };
    const selectRowProp = {
      mode: 'checkbox',
      selected: this.state.selected,
      onSelect: this.onRowSelect
      // clickToSelectAndEditCell: true
    };
    return (
      <BootstrapTable data={ products } options={ options } selectRow={ selectRowProp } cellEdit={ cellEditProp }>
          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name' editable={ this.isEditable }>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price' editable={ this.isEditable }>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}