ReactGrid with in-cell editing and custom dropdownlist cell

[Jean-Pierre]

Hello,

I want to display a kendo react grid with in cell editing. Two of these columns should display a dropdown list when cells are editing. I cannot make it work. I started with:

https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-in-cell/:

And then added a custom cell based upon: 

https://stackblitz.com/edit/react-grid-dropdown-editor

My issue is that when i click on any cell of on of these two "special" columns, nothings happens.

The grid is defined by:

return (
            <div>
                <Grid
                    data={this.state.data}
                    onItemChange={this.itemChange}

                    cellRender={this.renderers.cellRender}
                    rowRender={this.renderers.rowRender}

                    editField="inEdit"
                >

....

               <Column field="TypeMO" title="TypeMO" cell={(props) => <CustomCell {...props} values={this.state.derogDataValues} />} />

....
                </Grid>

....

The custom cell is defined by 

export default class CustomCell extends GridCell  {
    handleChange(e) {
        this.props.onChange({
            dataItem: this.props.dataItem,
            field: this.props.field,
            syntheticEvent: e.syntheticEvent,
            value: e.target.value
        });
    }

    render() {
        const dataValue = this.props.dataItem[this.props.field];

        if (!this.props.dataItem.inEdit || this.props.dataItem.inEdit !== this.props.field) {
            return (
                <td>
                    {!dataValue || dataValue === null ? '' : dataValue.toString()}
                </td>
            );
        }

 

       return (
            <td>
                in edit
            </td>
        );

}

"in edit" is never displayed.  

I must be missing something obvious :)

 

 

 

[Vasil]

Hi Jean,

As far as I see the custom cell does not call its's renderer, so it will never get the extended functionality from the renderers set for the grid. Here is what you can do to fix it:

export default class CustomCell extends React.Component {
  handleChange(e) {
    this.props.onChange({
      dataItem: this.props.dataItem,
      field: this.props.field,
      syntheticEvent: e.syntheticEvent,
      value: e.target.value
    });
  }

  render() {
    const dataValue = this.props.dataItem[this.props.field];

    let defaultRendering = null;

    if (!this.props.dataItem.inEdit || this.props.dataItem.inEdit !== this.props.field) {
      defaultRendering = (
        <td>
          {!dataValue || dataValue === null ? '' : dataValue.toString()}
        </td>
      );
    } else {

      defaultRendering = (
        <td>
          in edit
            </td>
      );
    }

    return this.props.render ?
      this.props.render.call(undefined, defaultRendering, this.props) :
      defaultRendering;
  }
}

Here is runnable version: 
https://stackblitz.com/edit/react-km4jpv?file=app/main.js

Regards,
Vasil
Progress Telerik

[Jean-Pierre]

Hi Vasil,

This works perfectly, thank you !

Regards,

Jean-Pierre