[Solved] Custom editor with input

[Ryan]

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,
    //   });
    // }
  }
}

[Stefan]

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:

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