React Grid Dialog Template Syncfusion - reactjs

Question

I have some trouble using the React Grid of Syncfusion. I want to edit some rows using my own Dialog Template. Calling it with the edit mode = 'Dialog' gives me the default Dialog, which automatically display every data set up in the columns.
Abviously one data row has more than the informations displayed. So I don't know how to set up the GridComponent to use my own Dialog in which I would show every column needed to be edited or added once I save the Grid.
I would be pleased if someone can help me. I guess, my thinking isn't right, bebause nothing seems to changed. I red the documention on the syncfusion officially page and somehow I can't figure it out.
https://help.syncfusion.com/reactjs/grid/editing#dialog-template-form
Here is React Component:
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { GridComponent, ColumnsDirective, ColumnDirective, Group, Resize, Sort, Search,
ContextMenu, Filter, Page, ExcelExport, PdfExport, Edit, Inject, Toolbar } from '#syncfusion/ej2-react-grids';
import { contextMenuItems, txGridHeader } from '../data/dummy';
import { Header } from '../components';
import { NumericTextBoxComponent } from '#syncfusion/ej2-react-inputs';
import { DatePickerComponent } from '#syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '#syncfusion/ej2-react-dropdowns';
const url = 'https://xxxxxxxxxxxxxxxx/';
const TransactionForm = data => {
return (<div>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input ref={input=> data.id = input} id="OrderID" name="OrderID" type="text" disabled={!data.isAdd} value={data.OrderID} onChange={this.onChange.bind(this)} />
<span className="e-float-line"></span>
<label className="e-float-text e-label-top"> Order ID</label>
</div>
</div>
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper" >
<input ref={input=> this.customerName = input} value={data.CustomerName} id="CustomerName" name="CustomerName" type="text" onChange={this.onChange.bind(this)} />
<span className="e-float-line"></span>
<label className="e-float-text e-label-top">Customer Name</label>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<NumericTextBoxComponent id="Freight" format='C2' value={data.Freight} placeholder="Freight" floatLabelType='Always'></NumericTextBoxComponent>
</div>
<div className="form-group col-md-6">
<DatePickerComponent id="OrderDate" value={data.OrderDate} placeholder="Order Date" floatLabelType='Always'></DatePickerComponent>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<DropDownListComponent id="ShipCountry" value={data.ShipCountry} dataSource={this.shipCountryDistinctData}
fields={{text: 'ShipCountry', value: 'ShipCountry' }} placeholder="Ship Country"
popupHeight='300px' floatLabelType='Always'></DropDownListComponent>
</div>
<div className="form-group col-md-6">
<DropDownListComponent id="ShipCity" value={data.ShipCity} dataSource={this.shipCityDistinctData}
fields={{text: 'ShipCity', value: 'ShipCity' }} placeholder="Ship City"
popupHeight='300px' floatLabelType='Always'></DropDownListComponent>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-12">
<div className="e-float-input e-control-wrapper">
<textarea id="ShipAddress" name="ShipAddress" value={data.ShipAddress} onChange={this.onChange.bind(this)} ></textarea>
<span className="e-float-line"></span>
<label className="e-float-text e-label-top">Ship Address</label>
</div>
</div>
</div>
</div>);
}
const Transactions = () => {
const [transaction, setTransaction] = useState(null);
useEffect(() => {
axios.get(url + 'transaction/')
.then(response => {
setTransaction(response.data)
})
}, []);
return (
<div className='m-2 md:m-10 p-2 md:p-10 bg-white rounded-3xl dark:bg-secondary-dark-bg dark'>
<Header category="Page" title="Transactions" />
<GridComponent id='gridcomp' dataSource={transaction} pageSettings={{ pageSize: 15}}
allowGrouping allowPaging allowSorting
allowExcelExport toolbar={['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search']} width='auto'
editSettings={{allowAdding: true, allowEditing: true, allowDeleting: true, mode: 'Dialog'}}
editSettingsTemplate= {{TransactionForm}}>
<ColumnsDirective>
{txGridHeader.map((item, index) => (
<ColumnDirective key={index} {...item} />
))}
</ColumnsDirective>
<Inject services={[ Resize, Search, Sort, Group, ContextMenu,
Filter, Page, Edit, ExcelExport, PdfExport, Toolbar ]} />
</GridComponent>
</div>
)
}
export default Transactions

Answer 1

Try removing the editSettingsTemplate, and add the template inside inside the editSettings.
editSettings={{
allowAdding: true,
allowEditing: true,
allowDeleting: true,
mode: "Dialog",
template: TransactionForm,
}}