I have the following custom editor defined. The problem is that GridCell's onChange event expects a syntheticEvent to be passed. React.FormEvent<HTMLInputElement> does not contain a synthetic event. Help appreciated
Cell:
import { GridCell, GridCellProps } from '@progress/kendo-react-grid';import * as React from 'react';import { CodeEditor } from '../StatefulEditors/CodeEditor';export class CodeCell extends GridCell { tdElement: HTMLElement; constructor(props: GridCellProps) { super(props); } render() { const value = this.props.dataItem[this.props.field]; const displayValue = (typeof value === 'undefined') ? '' : value.toString(); const defaultRendering = (!this.props.dataItem.inEdit) ? ( <td className="code" ref={(e) => { this.tdElement = e as HTMLElement; }}> {displayValue} </td> ) : ( <td className="code"> <CodeEditor dataItem={this.props.dataItem} field={this.props.field} displayValue={displayValue} /> </td> ); return this.props.render ? this.props.render.call(undefined, defaultRendering, this.props) : defaultRendering; }}Editor:
import { GridCellProps } from '@progress/kendo-react-grid';import * as $ from 'jquery';import * as React from 'react';import { Key } from 'ts-keycode-enum';export interface CodeEditorProps extends GridCellProps { field: string; // tslint:disable-next-line:no-any dataItem: any; anchor?: HTMLElement; displayValue: string;}export interface CodeEditorState { value?: string;}export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> { input: HTMLInputElement; wrap: HTMLElement; constructor(props: CodeEditorProps) { super(props); this.onChange = this.onChange.bind(this); this.onFocus = this.onFocus.bind(this); this.onKeyDown = this.onKeyDown.bind(this); this.state = { value: props.dataItem[props.field], }; } render() { return ( <div ref={(e) => this.wrap = e as HTMLElement}> <input key="i" className="k-textbox" value={this.state.value} style={{ width: '100%' }} onFocus={this.onFocus} onKeyDown={this.onKeyDown} onChange={this.onChange} ref={(e) => this.input = e as HTMLInputElement} /> </div> ); } componentDidMount() { $(this.wrap).on('mouseenter mouseleave', '.k-master-row', (e) => { if (e.type === 'mouseenter') { $(e.currentTarget).addClass('k-state-selected'); } else { $(e.currentTarget).removeClass('k-state-selected'); } }); } private onKeyDown(e: React.KeyboardEvent) { switch (e.keyCode) { case Key.DownArrow: break; default: break; } } private onFocus() { this.input.select(); } private onChange(e: React.FormEvent<HTMLInputElement>) { this.setState({ value: e.currentTarget.value }); // if (this.props.onChange) { // this.props.onChange({ // dataItem: this.props.dataItem, // field: this.props.field, // syntheticEvent: new SyntheticEvent, // value: e.currentTarget.value, // }); // } }}1 Answer, 1 is accepted
0
Hello, Ryan,
Thank you for the details.
In general, when a custom editor is used it is not required to extend the GridCell. The editor can be made from a standard React.component:
https://stackblitz.com/edit/react-7bphph?file=app/main.js
Also, this is how the change handler is declared internally for the build in editors:
If the issue still occurs after the changes, please let us know and we will check for additional approaches how this can be resolved.
Regards,
Stefan
Progress Telerik
Thank you for the details.
In general, when a custom editor is used it is not required to extend the GridCell. The editor can be made from a standard React.component:
https://stackblitz.com/edit/react-7bphph?file=app/main.js
Also, this is how the change handler is declared internally for the build in editors:
handleOnChange = (syntheticEvent: React.ChangeEvent<HTMLInputElement>): void => {If the issue still occurs after the changes, please let us know and we will check for additional approaches how this can be resolved.
Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items