React Grid 对话框模板 Syncfusion

Question

我在使用 Syncfusion 的 React Grid 时遇到了一些问题。我想使用我自己的对话框模板编辑一些行。使用 edit mode = 'Dialog' 调用它会给我默认的对话框，它会自动显示列中设置的每个数据。

显然一个数据行比显示的信息多。所以我不知道如何设置 GridComponent 以使用我自己的对话框，我会在其中显示保存网格后需要编辑或添加的每一列。

如果有人可以帮助我，我会很高兴。我想，我的想法不对，因为似乎什么都没有改变。我在 syncfusion 官方页面上标记了文档，但不知何故我无法弄清楚。

https://help.syncfusion.com/reactjs/grid/editing#dialog-template-form

这是 React 组件：

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

尝试删除editSettingsTemplate，并在editSettings 内添加模板。

editSettings={{
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true,
      mode: "Dialog",
      template: TransactionForm,
    }}