editTemplate not working

[Ali Rahighi]

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]

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')); 

Documentation: https://ej2.syncfusion.com/react/documentation/drop-down-list/getting-started/ 

Sample               : https://stackblitz.com/edit/react-tufpy4-xr14k6?file=index.js 

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

Regards, 

Seeni Sakthi Kumar S. 

[Ali Rahighi]

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]

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. 

2. In the same way, get the Grid columns,

 

 

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

https://ej2.syncfusion.com/react/documentation/api/grid/#actionfailure 

Regards,  

Seeni Sakthi Kumar S.