0

I want to disable the fields/controls in React kendo grid based on input.

For example : Based on selection of value in Full Name, I want to disable the Birth Date column enter image description here

Parag Pathari
  • 281
  • 2
  • 5
  • 19

1 Answers1

1

You could achieve the desired behavior by using a Custom Editor. The Custom Editor receives the entire dataItem and is re-rendered on each change of the dateItem fields.

So you could create a custom DatePickerCell and set the DatePicker disabled prop based on the value of the FullName. Also set the cell prop of the BirthDate GridColumn to 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} />
Asen Arizanov
  • 930
  • 1
  • 9
  • 11
  • Thanks for the quick reply. is there any way to reflect the value in other control based on dropdown selection change? For example if I select the full name from dropdown I want to populate lastname , firstname in the same row of grid – Parag Pathari Oct 23 '18 at 20:09
  • 1
    Yes, you could create CustomEditors wrapping Input for the firstname and lastname. Then inside the render method of the CustomEditor, set the value of the Input based on this.props.dataItem['FullName']. – Asen Arizanov Oct 24 '18 at 08:58