React example of editable flex grid

React example of editable flex grid

Posted by: rasika.sinha on 15 May 2018, 7:57 pm EST

• 

  rasika.sinha

  • Post Options:
  • Link
    Copy

  Posted 15 May 2018, 7:57 pm EST

  Hi Team, I have upgraded my wijmo libraries to the latest version and want to consume the FlexGrid component exposed in React way. I am facing issues when the grid is editable. Can you please share a fiddle or sample code in React with functional editable grid for reference.

  Thank you!

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 16 May 2018, 7:03 pm EST

  Hi Rasika,
  
  Please refer to the following demo sample for the same:
  
  http://demos.wijmo.com/5/React/FlexGridIntro/FlexGridIntro/

  If the issue persists, please elaborate.

  ~Manish

• 

  rasika.sinha

  • Post Options:
  • Link
    Copy

  Posted 17 May 2018, 1:05 am EST

  Hi Manish,

  Thanks for sharing the link for demo samples, it helped us to create the wijmo grid using react instead of core js.

  But now we are facing issues in rendering the wijmo grid in jest test enviroment. It just render the basic structure of the grid with no rows and columns, due to which we are not able to test the UI elements of the grid.

  We are using enzyme v2.4.1, JSDOM v7.0.2, Jest v15.1.1, and react-addons-test-utils v15.3.2 to write our test cases.

  Can you please share a fiddle or sample code to render grid in test environment. Please let us know if any other information is required.

  Thank You!

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 17 May 2018, 3:53 pm EST

  Hi Rasika,
  
  Could you please check if itemsSource is not null in this case.

  ~Manish

• 

  alex.ivanenko

  • Post Options:
  • Link
    Copy

  Posted 17 May 2018, 8:42 pm EST

  … and make sure that you applied wijmo.css in the test environment.

  Alex

• 

  rasika.sinha

  • Post Options:
  • Link
    Copy

  Posted 17 May 2018, 10:12 pm EST

  Hi Manish,

  I have checked the columns and itemsSource property of the grid, it contains multiple rows and columns. I have applied wijmo.css using JSDOM and added it in the document header.

  I did a small change in my test case by mounting the grid component with empty itemsSource. Then assigned the data (4 rows) using setProps method of mounted grid component. Now the grid is rendered with single column and single cell, however complete grid is still not rendered.

  We are using Wijmo v5.20173.409, please let us know if any other information is required.

  Thank You!

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 May 2018, 9:02 pm EST

  Hi Rasika,
  
  Please try to call invalidate method after assigning data.

  Could you please share demo sample you have created for investigation?

  ~Manish