We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

editTemplate not working

Thread ID:

Created:

Updated:

Platform:

Replies:

145798 Jul 9,2019 06:20 AM UTC Jul 11,2019 09:04 AM UTC React - EJ 2 3
loading
Tags: Grid
Ali Rahighi
Asked On July 9, 2019 08:02 AM UTC



Hi
I don't know I'm the only one have so much problems with your React components or not but I think your documentations in React section have many problems.

I'll tried all the ways to use editTemplate property of grid column but get no success but just  runtime errors.
Let's review from the first :

In the related documentation page you said :

Using template

"The cell editor for a particular column can be specified using a React Component. The column.editTemplate property used to define the corresponding column editor."

after that when you go to the link column.editTemplate points  you see :

"Defines the cell edit template that used as editor for a particular column. It accepts either template string or HTML element ID."


And the example says  :


export default class App extends React.Component<{}, {}> {
  public editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
  public toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

  public editTemplate(args: object) {
      return (<DatePickerComponent value={getValue('OrderDate', args)} id="OrderDate" placeholder="Order Date" floatLabelType='Never'/>)
  }

  public render() {
    return <GridComponent dataSource={data} editSettings={this.editOptions} toolbar={this.toolbarOptions} height={265}>
      <ColumnsDirective>
          <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true}/>
          <ColumnDirective field='CustomerID' headerText='Customer ID' width='120'/>
          
          {this.editTemplate}/>
      ColumnsDirective>
      <Inject services={[Edit, Toolbar]} />
    GridComponent>
  }
};

   My problems :
    I can not run a sample that you have presented there. And I got bad runtime errors sometimes random errors !!
     As you said in the documentation is it possible to return any React component in the editTemplate function?
     In your example you've return a datetime picker .I want to return a dropdown component.
     Is there and limitation in the component and the returning component should obey particular rules?
    
     and would you please provide me a js sample project (not tsx) that implementing this feature?


Thanks

    
    


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On July 9, 2019 12:32 PM UTC

Hi Ali Rahighi, 

We are sorry for the inconvenience caused. 

We are improving our documentation and refreshing it frequently. We will add more information if required. Also, you can render any Custom input component by using the Edit Template feature with no limitation. We have prepared a simple sample with DropDownList edit template as per your requirement. Please refer to the below code example and sample link for more information. 

[Index.js] 
export class NormalEdit extends SampleBase { 
     
   editTemplate(args) { 
      return (<DropDownListComponent dataSource={orderDataSource} value={getValue('ShipCountry', args)} fields={this.fields} id="ShipCountry" placeholder="ShipCountry" floatLabelType='Never'/>) 
  } 

   render() { 
    return ( 
      <div> 
      <GridComponent dataSource={orderDataSource} editSettings={this.editOptions} toolbar={this.toolbarOptions} height={265}> 
      <ColumnsDirective> 
          <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true}/> 
          <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editTemplate={this.editTemplate.bind(this)}/> 
          .     .    . 
      </ColumnsDirective> 
      <Inject services={[Edit, Toolbar]} /> 
    </GridComponent> 
          
      </div>); 
    } 
render(<NormalEdit />, document.getElementById('sample')); 




Pleas get back to us if you need any further assistance on this. 

Regards, 
Seeni Sakthi Kumar S. 


Ali Rahighi
Replied On July 10, 2019 05:11 AM UTC

Thanks for your answer

I updated my syncfusion packages and it worked

but now my grid does not show data :(((

Im using  RemoteSaveAdaptor and setting my data in json property. What is changed that the grid does not list data in json? Does json format have changed?

Thats really annoying !




Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On July 11, 2019 09:04 AM UTC

Hi Ali Rahighi, 

Thanks for the update.  

We suspect that the error internally due to the configuration problem. Data might not be bound to the Grid content, when the columns were set with an improper column formats or template issue. So we suggest to provide the following details to analyze the problem at our end. 

  1. Collect the Grid Datasource in the console window of the browser as shown below using,
 
‘JSON.stringify(document.getElementById('overviewgrid').ej2_instances[0].dataSource);’ 
 
 
Here overviewgrid is the id of the Grid. You have to use your Grid’s id. 
Copy the returned string in the text file and send to us. 
  1. In the same way, get the Grid columns,
 
 
  1. Grid’s exception will be catched in the actionFailure event of the Grid. So we suggest to bind a actionFailure event to the Grid and collect the exception message and share them in a text file.

Regards,  
Seeni Sakthi Kumar S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon