Включить отключить поля / элементы управления в React Kendo Grid

Question

Я хочу отключить поля / элементы управления в таблице React kendo на основе ввода.

Например: на основании выбора значения в Полное имя , я хочу отключить Дата рождения столбец

Answer 1

Вы можете достичь желаемого поведения , используя пользовательский редактор .Custom Editor получает весь dataItem и перерисовывается при каждом изменении полей dateItem.

Таким образом, вы можете создать пользовательский DatePickerCell и установить опору DatePicker disabled на основе значения FullName.Также установите cell опору даты рождения GridColumn на DatePickerCell.

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} />