Thank you for the reply. I went with a custom cell as follows:
export function ObjectiveDescriptionCell({ objectiveDescriptionEditField }) {
return class extends GridCell {
handleChange = (e) => {
this.props.onChange({
dataItem: this.props.dataItem,
field: this.props.field,
syntheticEvent: e.syntheticEvent,
value: e.target.value
});
}
public render() {
const { dataItem } = this.props;
const inEdit = dataItem[objectiveDescriptionEditField];
const isNewItem = dataItem.ID === 0;
return inEdit ? (
<td>
<input className="k-textbox" maxLength={ 255 } onChange={ this.handleChange } style={{ width: "100%" }} value={ dataItem.Description } />
</td>
) : (
<td className="k-command-cell">{ dataItem.Description }</td>
);
}
};
}
Then I add it into the grid:
<GridColumn cell={ this.ObjectiveDescriptionCell } field="Description" title="Description"></GridColumn>