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

11 posts, 1 answers
  1. Lalitha
    Lalitha avatar
    3 posts
    Member since:
    Mar 2019

    Posted 31 Mar 2019 Link to this post

    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

     

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 01 Apr 2019 Link to this post

    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
  3. Lalitha
    Lalitha avatar
    3 posts
    Member since:
    Mar 2019

    Posted 01 Apr 2019 Link to this post

    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

     

  4. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 02 Apr 2019 Link to this post

    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
  5. Answer
    Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 02 Apr 2019 Link to this post

    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
  6. Lalitha
    Lalitha avatar
    3 posts
    Member since:
    Mar 2019

    Posted 04 Apr 2019 Link to this post

    Hi Stefan,

    I tried the way you suggested and it works fine.

    Thanks and Regards

  7. arun
    arun avatar
    4 posts
    Member since:
    Dec 2019

    Posted 09 Dec 2019 in reply to Stefan Link to this post

    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

  8. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 10 Dec 2019 Link to this post

    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
  9. arun
    arun avatar
    4 posts
    Member since:
    Dec 2019

    Posted 10 Dec 2019 in reply to Stefan Link to this post

    Thanks Stefan. This will work. :)
  10. Jonathan Berry
    Jonathan Berry avatar
    3 posts
    Member since:
    Mar 2018

    Posted 08 Sep 2020 in reply to Stefan Link to this post

    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? 
  11. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 09 Sep 2020 Link to this post

    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/.

Back to Top