FlexGrid React Chaining DropDowns - Add New And Delete Row Buttons

FlexGrid React Chaining DropDowns - Add New And Delete Row Buttons

Posted by: matthew.peters on 5 September 2023, 1:46 pm EST

• 

  matthew.peters

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 September 2023, 1:46 pm EST

  I have looked at the Chaining ComboBoxes and the Dynamic DataMaps examples at the following URLs for inspiration but am not able to put the pieces together.

  https://www.grapecity.com/wijmo/demos/Input/ComboBox/Objects/ChainingCombos/react
  
  https://www.grapecity.com/wijmo/demos/Grid/Columns/DynamicDataMaps/react

  What I am trying to do is create a FlexGrid with the following columns:

  Column 1 - Contains a dropdown that contains a list of Countries
  
  Column 2 - Contains a dropdown that displays a list of Cities related to the Country selected in Column1. The list of Cities in this column changes immediately when the user selects a Country in Column 1 (The DataMap example only changes the list of Cities when the user clicks the City dropdown)
  
  Column 3 - Contains a button that when clicked deletes that row from the FlexGrid (if there is more than 1 row in the FlexGrid).

  There is also a button at the top that when clicked adds a new row to the end of the FlexGrid. Can you help write this code in a React Functional Component?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 5 September 2023, 3:53 pm EST

  Hello,

  1. You can achieve the immediate update on DataMap cells as well. For that, you need to handle the cellEditEnded event of FlexGrid and update the current row’s city cell value when the corresponding country cell value gets changed. Please refer to the sample link below for implementation.

  2. You can use removeAt() method of RowCollection and remove the current clicked row in case of buttons created using cellMaker. If you have created the buttons in the cell using formatItem or some other way then you can handle the ‘mousedown’ event of FlexGrid’s hostElement and use the hitTest() method of FlexGrid to get the current clicked row index.

  3. You can use the addNew() method of collectionView to directly add a new item to FlexGrid’s source data. Please refer to the sample link below for reference.

  Sample link: https://stackblitz.com/edit/react-vzoyaa?file=index.js

  Regards

• 

  matthew.peters

  • Post Options:
  • Link
    Copy

  Posted 7 September 2023, 12:11 am EST

  This answer is awesome, Sonu. Thank you very much!