reactjs - 启用禁用 React Kendo Grid 中的字段/控件

Question

我想根据输入禁用 React kendo 网格中的字段/控件。

例如：基于全名中的值选择，我想禁用出生日期列

标签： reactjskendo-uikendo-gridkendo-react-ui

Answer 1

您可以通过使用自定义编辑器来实现所需的行为。接收整个Custom EditordataItem 并在 dateItem 字段的每次更改时重新呈现。

因此，您可以创建一个自定义并根据 FullName 的值DatePickerCell设置 DatePicker 属性。还将 BirthDate 的disabled属性设置为.cellGridColumnDatePickerCell

class DatePickerCell extends React.Component {
    handleChange = (e) => {
        this.props.onChange({
            dataItem: this.props.dataItem,
            field: this.props.field,
            syntheticEvent: e.syntheticEvent,
            value: e.value
        });
    }

    render() {
        const dataValue = this.props.dataItem[this.props.field];

        if (!this.props.dataItem.inEdit) {
            return (
                <td>
                    {this.props.dataItem[this.props.field].toDateString()}
                </td>
            );
        }

        return (
            <td>
                <DatePicker
                    onChange={this.handleChange}
                    value={dataValue}
                    disabled={this.props.dataItem['FullName'] === 'Bradshow, John'}
                />
            </td>
        );
    }
}

<GridColumn field="BirthDate" title="Birth Date" editor="date" format="{0:d}" cell={DatePickerCell} />