[REACT] Editor of a predecessor column

[suhas.kachare]

By default, the predecessor column uses a combo editor, but I replaced it with my own text editor column. However, it’s not working because the editor expects a specific return format, whereas my text editor only returns plain text, which isn't compatible.

Is there a workaround for this?

Let me know if you need more details.

[alex.l]

Please share your code. Combo returns ids and shows names, that's the only thing you need to know. If you type id into your textfield, it should be working. If you type names - you need to add extra business logic and handle it.

[suhas.kachare]

Screen Recording 2025-02-13 at 4.16.09 PM.mov

editing of a predecessor column

(14.1 MiB) Downloaded 10 times

Below is the code of my text editor

/**
 * Simple React cell editor that displays two buttons Yes|No,
 * for editing boolean columns
 */
import { Input } from "antd";
import React, { Component } from "react";

export default class TextEditor extends Component {
  // eslint-disable-next-line react/state-in-constructor
  state = { value: "" };

  // region Cell editing interface, required functions

  // Should return the value to be applied when editing finishes
  // eslint-disable-next-line react/no-unused-class-component-methods

  // React setState is asynchronous so we return Promise which is resolved when setState finishes

  // eslint-disable-next-line react/no-unused-class-component-methods
  getValue() {
    // eslint-disable-next-line react/destructuring-assignment
    console.log("getValue")
    console.log(this.state.value);
    return this.state.value;
   

  }

  setValue(value: any) {
    console.log("setValue")
    console.log(value);
    return this.setState({ value });
  }

  // Invalid editors are note allowed to close (unless grid is so configured). Implement this function to handle
  // validation of your editor
  // eslint-disable-next-line react/no-unused-class-component-methods
  isValid() {
    // This simple editor is always valid
    return true;
  }

  // Called when editing starts, to set focus at the desired place in your editor
  // eslint-disable-next-line react/no-unused-class-component-methods
  focus() {}

  // endregion

  render() {
    // eslint-disable-next-line react/destructuring-assignment
    return <Input value={this.state.value} onChange={(e) => this.setValue(e.target.value)} />;

// return (
//   // eslint-disable-next-line react/destructuring-assignment
//   <DatePicker
//     value={this.state.value ? dayjs(this.state.value) : null}
//     onChange={(date, dateString) => this.setValue(dateString)}
//   />
// );
  }
}

// endregion

I have attached a video where you can see i am editing a predecessor column . I fill it with some value but when i hit enter it gives me error in the console.

[mats]

I fill it with some value but when i hit enter it gives me error in the console.

Please share the error message

[suhas.kachare]

Below is the error message

chunk-SQLSVT47.js?v=b90b4204:148763 Uncaught (in promise) TypeError: c[ck3(...)] is not a function
at PredecessorColumn.finalizeCellEdit (chunk-SQLSVT47.js?v=b90b4204:148763:24)
at Editor.completeEdit (chunk-SQLSVT47.js?v=b90b4204:55563:25)
at CellEdit3.finishEditing (chunk-SQLSVT47.js?v=b90b4204:63579:62)
at CellEdit3.finishEditing (chunk-SQLSVT47.js?v=b90b4204:137238:43)
at CellEdit3.finishAndEditNextRow (chunk-SQLSVT47.js?v=b90b4204:63767:33)
at Gantt.performKeyMapAction (chunk-SQLSVT47.js?v=b90b420442)
at Gantt.keyMapOnKeyDown (chunk-SQLSVT47.js?v=b90b420429)
at Gantt.keyMapOnKeyDown (chunk-SQLSVT47.js?v=b90b4204:76706:33)
at HTMLDivElement.u (chunk-SQLSVT47.js?v=b90b4204:5574:64)
finalizeCellEdit @ chunk-SQLSVT47.js?v=b90b4204:148763
completeEdit @ chunk-SQLSVT47.js?v=b90b4204:55563
finishEditing @ chunk-SQLSVT47.js?v=b90b4204:63579
finishEditing @ chunk-SQLSVT47.js?v=b90b4204:137238
finishAndEditNextRow @ chunk-SQLSVT47.js?v=b90b4204:63767
performKeyMapAction @ chunk-SQLSVT47.js?v=b90b4204:29000
keyMapOnKeyDown @ chunk-SQLSVT47.js?v=b90b4204:29065
keyMapOnKeyDown @ chunk-SQLSVT47.js?v=b90b4204:76706
u @ chunk-SQLSVT47.js?v=b90b4204:5574

[Maxim Gorkovsky]

Hello.
That might be because that method expects clearError method on the input widget. Try implementing that as an empty function