1. Home
  2. Forum
  3. React - EJ 2
  4. Custom Complex Edit Template

Custom Complex Edit Template

Hey friends, looking at your Grid component.
Is it possible to use a complex custom component for editTemplate? not components from syncfusion that magicaly works but a custom made. In this example a showcase with a simple input but the idea is to have a custom component that will be used as edit template.

i would expect that the custom template would receive as props some methods like set cell data, close the cell edit or something like that

Sample below, Regards
https://codesandbox.io/s/wonderful-kepler-3ws94?file=/src/App.js

3 Replies 1 reply marked as answer
RR Rajapandi Ravi Syncfusion Team June 24, 2020 01:22 PM UTC

Hi Dario, 

Greetings from syncfusion Grid 

From validating your query we could see that you like to render the editTemplate as React component. We have already discussed your requirement in our documentation. Please refer the below documentation for more information. 


Regards, 
Rajapandi R 


DA Dario June 24, 2020 01:41 PM UTC

Thats correct, but that sample is using syncfusion controls wich automatically 'works' and fires saveCell

to be precise in this sample can you detail how to get the value from NameEditTemplate  and apply to the cell?
please check the working example 
https://codesandbox.io/s/wonderful-kepler-3ws94?file=/src/App.js:0-1391

import React from "react";
import {
GridComponent,
ColumnDirective,
ColumnsDirective,
Inject,
Edit
} from "@syncfusion/ej2-react-grids";

const NameEditTemplate = props => {
console.log(props);
return <input type="text" id="firstname" defaultValue={props.firstname} />;
};

const columns = [
{
field: "_id",
type: "string",
headerText: "ID",
isPrimaryKey: true,
visible: false
},
{
field: "firstname",
type: "string",
headerText: "First Name",
editTemplate: NameEditTemplate
},
{
field: "lastname",
type: "string",
headerText: "Last Name"
}
];

const editSettings = {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
mode: "Batch"
};

const data = [
{ _id: 1, firstname: "Jon", lastname: "Doe" },
{ _id: 2, firstname: "Mary", lastname: "Jane" },
{ _id: 3, firstname: "Robert", lastname: "Beratheon" },
{ _id: 4, firstname: "Jamie", lastname: "Lanister" }
];

const DataGrid = () => {
return (
<div>
<GridComponent
height="100%"
dataSource={data}
editSettings={editSettings}
>
<ColumnsDirective>
{columns.map(column => (
<ColumnDirective key={column.field} {...column} />
))}
</ColumnsDirective>
<Inject services={[Edit]} />
</GridComponent>
</div>
);
};

export default DataGrid;


RR Rajapandi Ravi Syncfusion Team June 25, 2020 01:50 PM UTC

Hi Dario, 

Thanks for the update 

From validating your query, we could see that you like to save the edited values in the cell. You can achieve your requirement by defining the column field name in that input element name property based on that only we have get the value from the edit elements. Please refer the below code example and sample for more information. 

 
import React from "react"; 
import { 
  GridComponent, 
  ColumnDirective, 
  ColumnsDirective, 
  Inject, 
  Edit 
} from "@syncfusion/ej2-react-grids"; 
 
const NameEditTemplate = props => { 
  console.log(props); 
  return <input type="text" name="firstname" id="firstname" defaultValue={props.firstname} />; 
}; 
 
const editSettings = { 
  allowEditing: true, 
  allowAdding: true, 
  allowDeleting: true, 
  mode: "Batch" 
}; 
 
const data = [ 
  { _id: 1, firstname: "Jon", lastname: "Doe" }, 
  { _id: 2, firstname: "Mary", lastname: "Jane" }, 
  { _id: 3, firstname: "Robert", lastname: "Beratheon" }, 
  { _id: 4, firstname: "Jamie", lastname: "Lanister" } 
]; 
 
const DataGrid = () => { 
  return ( 
    <div> 
      <GridComponent 
        height="100%" 
        dataSource={data} 
        editSettings={editSettings} 
      > 
        <ColumnsDirective> 
          {columns.map(column => ( 
            <ColumnDirective key={column.field} {...column} /> 
          ))} 
        </ColumnsDirective> 
        <Inject services={[Edit]} /> 
      </GridComponent> 
    </div> 
  ); 
}; 
 
export default DataGrid; 
 


Regards, 
Rajapandi R

Marked as answer
Loader.
Up arrow icon