Grid custom cell editor focus out when update the state inside onChange function

Hi Stefan,

Thank you very much for the reply.

As I identified, the issue was passing the cell like below.

cell={props => (
    <NumericCell {...props} />
)}

I would like to know how we can pass additional props when pass the cell like cell={NumericCell} and make it reusable

Thanks and Regards

Hi Stefan,

I tried the way you suggested and it works fine.

Thanks and Regards

Hi Stefan,

Its working great with what you have suggested above. But what if i have to pass an additional prop dynamically as i am rendering the columns dynamically.

For example: 

render(){

 columnsToDisplay = this.columns.map( item =>
              <GridColumn field = {item.field} title = {item.title} cell = { (props) => <CustomCell {...props}  fieldType= {item.type} /> } /> )

   <Grid   >//ignore other params of the grid to be passed here

       {columnsToDisplay}

  </Grid>

}

Here i want to render the column according to the type (input, dropdown etc) which will be available in that item specific. Issue still persists with this scenario.

Any help would be appreciated.

Thanks,

Arun

Hello,  Arun,

Thank you for the code.

In this case, I can suggest finding the column type inside the column.

For example, inside the CustomCell something like:

let type = this.columns.find(column=> column.field === props.field).type;
// this is only a pseudo code 

I do understand that this adds a litter more code to the cell, but it is required based on how React handles new function instances.

Regards,
Stefan
Progress Telerik

Hello, Jonathan,

We have an example in this forum thread show how this can be done when using functional components:

https://www.telerik.com/forums/kendo-grid-column-unmounts-mounts-child-component-on-re-render 

Regards,
Stefan
Progress Telerik