Custom Complex Edit Template

[Dario]

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

[Rajapandi Ravi]

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. 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/edit/#using-template 

Regards, 

Rajapandi R 

[Dario]

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;

[Rajapandi Ravi]

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; 

 

Sample: https://codesandbox.io/s/sweet-nightingale-su8d9?file=/src/App.js:0-1408 

Regards, 

Rajapandi R