Our blazing fast Grid component built with pure JavaScript


Post by prashil »

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


Post by marcio »

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


Post by prashil »

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.

Attachments
Screenshot 2022-08-26 at 1.31.25 PM.png
Screenshot 2022-08-26 at 1.31.25 PM.png (1.44 MiB) Viewed 897 times

Post by marcio »

Hey prashil,

You should replace

      editor: ({ ref }) => <Input ref={ref} placeholder="Basic usage" />,

with

      editor: (ref) => <Input ref={ref} placeholder="Basic usage" />,

You don't need to destructure the ref parameter.

Best regards,
Márcio


Post by prashil »

Not work for me. show same error like previous.


Post by prashil »


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.


Post by saki »

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.


Post by prashil »

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.

Attachments
Screen Recording 2022-09-05 at 4.14.51 PM.mov
Please refer this
(3.71 MiB) Downloaded 46 times

Post by tasnim »

You need to set this manager field to resourceModal Class.

Here is an example of how you can set it:

chrome_8wq8UJ94jl.gif
chrome_8wq8UJ94jl.gif (2.17 MiB) Viewed 769 times

And you need to set the Gate resourceModal class here:

chrome_Fc250S1db0.png
chrome_Fc250S1db0.png (10.06 KiB) Viewed 769 times

This should solve your problem.
All the best,
Tansim


Post by prashil »

I already do that.

class Gate extends GridRowModel {
  static get fields() {
    return [
      {
        name: "capacity",
        type: "number",
      },
      "date",
      "domestic",
      "airline",
      "manager",
    ];
  }
}

let store = new AjaxStore({
  readUrl: "https://localhost:8000/member/data/",
  tree: true,
  autoLoad: true,
  modelClass: Gate,
  });

Post Reply