How to create custom React components to edit and show the cells

How to create custom React components to edit and show the cells

Posted by: ibrahimerkinekin.unlu on 15 June 2023, 3:59 am EST

• 

  ibrahimerkinekin.unlu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 June 2023, 3:59 am EST

  Hi, we are trying to figure out whether to use Wijmo grid on our project or not. I am going to use the TransposedGrid on my application. I’ve seen examples of using Wijmo’s own components to create custom cells and editors but I need a way to use my own components for showing cells and editors. Is there a way to do this?

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 15 June 2023, 4:23 pm EST

  Hi,

  Actually, the cell templates and custom editors are not officially supported in TransposedGrid control, could you please share some more details about your requirements, i.e. how exactly you expect the custom cells to appear and what type of custom editors you want to use, so that we can have a better understanding of your requirements and suggest you the best possible solution to achieve your desired results. Please share some screenshots or a video representation of the expected output if possible. Also, please share some code snippets of the custom editors you want to use, if possible.

  Regards

• 

  ibrahimerkinekin.unlu

  • Post Options:
  • Link
    Copy

  Posted 15 June 2023, 9:18 pm EST

  Hi Vivek,

  Say we have some currencies to pick from, instead of the user typing the currency I want my users to pick the currency from a component I build, or something like React Select.

  I was wondering if you support it like AG Grid does? https://www.ag-grid.com/javascript-data-grid/component-cell-editor/

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 18 June 2023, 11:40 pm EST

  Hi,

  We suggest you to use the FlexGrid control, as it is highly customizable and it officially supports cell templates and custom editors in columns. You can use your own custom editor in the flexGrid, you’ll just have to handle a few events on flexGrid to sync the editor with the grid. Here’s a demo that shows the React-Select and Wijmo Menu controls used in sync with the flexGrid as a custom editor - https://stackblitz.com/edit/react-d65tdg?file=gridComponent.js

  You can also use the Wijmo Input controls as a column editor if that suits your requirements well, here is a demo sample that uses Wijmo’s AutoComplete control as a custom editor for a column - https://stackblitz.com/edit/react-dug3vz?file=gridComponent.js

  In case you have any further questions, please let us know.

  Regards

• 

  ibrahimerkinekin.unlu

  • Post Options:
  • Link
    Copy

  Posted 19 June 2023, 2:16 am EST

  Hi Vivek,

  Thanks for the reply and sample code. However I need the grid to be transposed. If we take your sample code as example, I need country, currency, symbol and sales to be the row headers and columns would be some sort of identifiers for the data. So I would have one row for countries, one row for currencies etc. Basically I need TransposedGrid with custom editing capabilities. Can Wijmo support that?

  Thanks

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 19 June 2023, 11:28 pm EST

  Hi Erkin,

  As cellTemplates are not supported in TransposedGrid , you’ll have to handle the ‘formatItem’ event of the transposedGrid to insert the custom editor in the grid and customize the grid as per your requirements, here’s a sample that demonstrates how you can use Wijmo’s AutoComplete and React-Select control as a custom editor in transposedGrid - https://stackblitz.com/edit/react-v6dauv?file=gridComponent.js

  Please let us know, in case you ran into issues.

  Regards