Flexgrid React - dynamic datamap / custom editors

Flexgrid React - dynamic datamap / custom editors

Posted by: tdnooij on 12 December 2024, 10:46 am EST

• 

  tdnooij

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 December 2024, 10:46 am EST

  Hi all,
  
  Is there a way to fetch DataMap content for individual cells?
  
  I would like to display a DataMap dropdown, but before showing the dropdown suggestions, I need to fetch them asynchronously from the server. Is it possible to implement a dynamic DataMap?

  Ultimately, I aim to create a custom editor that can fetch the itemSource based on the cell’s properties.

  Greetings,

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 13 December 2024, 5:27 am EST

  Hi,

  Yes, you can set the editor’s itemsSource based on a cell’s property/value, you’ll have to handle the ‘beginningEdit’ event of the FlexGrid to update the editor’s itemsSource, and you’ll have to use a custom editor, like ComboBox for that column. You can fetch the data from the server and update it in the editor’s items source.

  Please refer to the following sample demonstrating the same - https://stackblitz.com/edit/react-u2nhqdg2?file=index.js

  In the above sample, we have simulated the server request using the setTimeout method, and a loader will appear in the dropdown list until data is fetched. The data in the’ City’ column will be fetched according to the value set in the ‘Country’ column.

  Hopefully, it will complete all your requirements, in case, you face any issues, please let us know.

  Regards

• 

  tdnooij

  • Post Options:
  • Link
    Copy

  Posted 10 April 2025, 8:48 am EST

  Hi vivek.pannu,
  
  This example works great!
  
  Currently I am trying to set up this solution for TransposedGrid, but have problem with setting editor to TransposedGridRow, could you please provide the example how would it work in TransposedGrid?

  Regards

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 11 April 2025, 8:05 am EST

  Hi Thomas,
  
  Custom editors are not officially supported in TransposedGrid. However, I have created a custom solution for your usecase, Please refer to the following sample for the same - https://stackblitz.com/edit/react-xttj8nqj?file=Hello.js
  
  You can take a look at the above sample and use it if it fits your requirements well. In the above sample, the ‘formatItem’ event of the grid is handled to insert the custom editor in the cells. It has some limitations, such as the custom editor cells will not enter edit mode using the keyboard after navigating to these cells with the keyboard. It may have some other limitations as well, which I might have missed, as this is a custom implementation.
  
  Regards