1. Home
  2. Forum
  3. React - EJ 2
  4. TreeGrid Cell Template issues

TreeGrid Cell Template issues

Potentially this should be split into 2 posts. 

Issues: 
  1. Template ignored within stacked header column. When a cell is in a stacked column a cell in the group will consistently ignore the custom react template.
  2. How do I update the record when the save is completed... or ideally in react update the state from the edit template?

The repro is here...

https://stackblitz.com/edit/react-gq62es?file=index.js


Regards,
Paul

2 Replies
PS Pon Selva Jeganathan Syncfusion Team April 20, 2021 02:33 PM UTC

Hi Paul,   
  
Thanks for contacting syncfusion forum. 
 
Query1: Template ignored within stacked header column. When a cell is in a stacked column a cell in the group will consistently ignore the custom react template. 
 
The reported issue that occurs due to value property (set in the react template’s element) not properly getting updated. This can be resolved by using the defaultValue property instead of the value property for the template input element as demonstrated below,  
 
cellEditTemplate(args) {  
    return (  
        <div>  
            <input type="text" name='ShipCountry' onChange={this.myChangeHandler} defaultValue={getValue("shipmentCategory", args)} />  
        </div>  
    );  
}  
 
 
More details on this case can be checked in the below stack overflow link,  
  
 
Query 2: How do I update the record when the save is completed... or ideally in react update the state from the edit template? 
 
We are able to reproduce the issue at our end. And we are validating your query with high priority and will update you with further details on or before April 22nd  2021.   
 
Until then we value your patience.   
  
Regards,    
Pon selva    






PS Pon Selva Jeganathan Syncfusion Team April 22, 2021 12:55 PM UTC

  
Hi Paul,   
  
Thanks for your patience. 
 
Query: How do I update the record when the save is completed... or ideally in react update the state from the edit template? 
 
This can be resolved by using the name property for the template input element as demonstrated below,  
 
cellEditTemplate(args) {  
    return (  
        <div>  
            <input type="text" name='shipmentCategory' onChange={this.myChangeHandler} defaultValue={getValue("shipmentCategory", args)} />  
        </div>  
    );  
}  
 
 
Please refer to the below sample, 
 
Note: Editing feature requires a primary key column for CRUD operations. To define primary key, set isPrimaryKey to true in particular column. And this field values should be unique.  
In your sample, you used the same field many times. When you use the same field for multiple columns, value modified for the last column has been updated to all fields. So ensure this case if you are using multiple column with same field name 
Kindly get back to us for further assistance. 
 
Regards,    
Pon selva    





 


Loader.
Up arrow icon