Hello Bryntum,
I have my own multiSelect component which is based on Ant design. i want to add that component on grid if i edit the cell, So how should i add that component ?
Thank you
Hello prashil,
We have a demo with a React custom cell editor https://www.bryntum.com/examples/grid/frameworks/react/typescript/basic/build/
{
field : 'original',
text : 'Original<div class="small-text">(React editor)</div>',
htmlEncodeHeaderText : false,
align : 'center',
width : 120,
renderer : ({ value }: { value: string }) => (value ? 'Yes' : 'No'),
editor : (ref: string) => <DemoEditor ref = {ref} />
}
https://www.bryntum.com/docs/grid/api/Grid/column/Column#config-editor
Best regards,
Márcio
Hello Bryntum Team,
Below is the code that I tried to implement to add a custom Ant Design input field, but it didn't work and showed an error.
{
text: "Responsible<br/>Manager",
field: "manager",
flex: 3,
htmlEncodeHeaderText: false,
renderer: ({ value }) => value || "",
editor: ({ ref }) => <Input ref={ref} placeholder="Basic usage" />,
}
Please refer the below attached screenshot.
import React, { Component } from "react";
import { Input } from "antd";
export default class MyEditor extends Component {
state = { value: "" };
getValue(value) {
return this.state.value;
}
setValue(value) {
this.setState({ value });
}
isValid() {
return true;
}
focus() {
}
onChangeHandler(e) {
this.setValue(e.target.value);
}
render() {
return (
<Input
value={this.state.value}
onChange={this.onChangeHandler.bind(this)}
/>
);
}
}
editor: (ref) => <MyEditor ref={ref} />,
I tried above code and its worked fine for me,
But as I am using functional components in my project , how should I implement these methods like getValue, setValue, isValid, focus, in functional components.When i am using this methods in class components so the methods are getting executed on its own but when i am trying to use these functions in functional component its not working .
If you have any example related to this , can you please provide one.
The current implementation of React editor in the wrapper relies on class-based React editor component and cannot be implemented as functional component. According to React docs, there are no plans to remove the class-based components so you can freely use the above implementation that works.
I'm trying to add an Ant Select Component .
import { Select } from "antd";
import "antd/dist/antd.css";
import React, { Component, Fragment } from "react";
const { Option } = Select;
export default class AntSelect extends Component {
state = { value: "" };
getValue() {
return this.state.value;
}
setValue(value) {
this.setState({ value });
}
isValid() {
return true;
}
focus() {}
onChangeHandler(value) {
this.setState({ value });
}
render() {
return (
<Select
value={this.state.value}
onChange={this.onChangeHandler.bind(this)}
>
<Option value="Alex">Alex</Option>
<Option value="Brat">Brat</Option>
<Option value="Coke">Coke</Option>
</Select>
);
}
}
{
text: "Manager",
field: "manager",
flex: 3,
htmlEncode: false,
editor: (ref) => <AntSelect ref={ref} />,
}
If I try to change the value from options , it's not updating the current value. Instead it shows the previous value.