This is a migrated thread and some comments may be shown as answers.

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

10 Answers 390 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Lalitha
Top achievements
Rank 1
Lalitha asked on 31 Mar 2019, 07:25 PM

Hi

I tried to add a NumericTextBox as a custom cell editor inside GridColumn. In onChange function, it updates the data list using setState and it goes focus out on every time I type a digit. Below is my code 

itemChange = event => {
  const value = event.value;
  const name = event.field;
  const dataItem = Object.assign({}, event.dataItem);
  const index = this.state.data.indexOf(event.dataItem);
  if (index > -1) {
    const data = this.state.data.slice();
    dataItem[name] = value;
    data[index] = dataItem;
    this.setState({
      data: data
    });
  }

}

 

What may be the error cause this issue?

Thanks and Regards

 

10 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 01 Apr 2019, 07:13 AM
Hello, Lalitha,

Thank you for the details.

I have made an example with custom NumericTextBox editor and the focus is retained by the component when typing:

https://stackblitz.com/edit/react-fnkszw?file=app/main.jsx

Please take a look at the example and advise if I missed an important detail.

Regards,
Stefan
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
0
Lalitha
Top achievements
Rank 1
answered on 01 Apr 2019, 08:59 AM

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

 

0
Stefan
Telerik team
answered on 02 Apr 2019, 06:30 AM
Hello, Lalitha,

Thank you for the clarification.

Indeed, this is the suggested approach to add additional props. This should not cause the mentioned issue.

I will research further why setting the cell like this is causing the NumericTextBox to lose focus.

I will get back to you with once I have more information on this matter.

Regards,
Stefan
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
0
Accepted
Stefan
Telerik team
answered on 02 Apr 2019, 07:29 AM
Hello, Lalitha,

We are able to pinpoint the cause of the issue.

It occurs because when a functional component is used, React re-renders the entire cell instead of only re-rendering the NumericTextBox as in the other case.

I can suggest declaring the function outside of the render method:

https://stackblitz.com/edit/react-fnkszw-a3rnif?file=app/main.jsx

Regards,
Stefan
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
0
Lalitha
Top achievements
Rank 1
answered on 04 Apr 2019, 06:44 AM

Hi Stefan,

I tried the way you suggested and it works fine.

Thanks and Regards

0
arun
Top achievements
Rank 1
answered on 09 Dec 2019, 12:01 PM

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

0
Stefan
Telerik team
answered on 10 Dec 2019, 08:46 AM

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 
This provides access to all properties of the column array inside the CustomCell.

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

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
0
arun
Top achievements
Rank 1
answered on 10 Dec 2019, 10:35 AM
Thanks Stefan. This will work. :)
0
n/a
Top achievements
Rank 1
answered on 08 Sep 2020, 09:35 PM
So am I understanding that if using functional way that there is no way to pass additional props and not re render the entire cell? 
0
Stefan
Telerik team
answered on 09 Sep 2020, 07:43 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Lalitha
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Lalitha
Top achievements
Rank 1
arun
Top achievements
Rank 1
n/a
Top achievements
Rank 1
Share this question
or