ReactGrid with in-cell editing and custom dropdownlist cell

3 posts, 0 answers
  1. Jean-Pierre
    Jean-Pierre avatar
    15 posts
    Member since:
    Dec 2018

    Posted 28 Dec 2018 Link to this post

    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 :)

     

     

     

  2. Vasil
    Admin
    Vasil avatar
    1641 posts

    Posted 31 Dec 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Jean-Pierre
    Jean-Pierre avatar
    15 posts
    Member since:
    Dec 2018

    Posted 31 Dec 2018 in reply to Vasil Link to this post

    Hi Vasil,

    This works perfectly, thank you !

    Regards,

    Jean-Pierre

Back to Top