Wijmo FlexGrid ReactJS TS - Dynamic Columns

Wijmo FlexGrid ReactJS TS - Dynamic Columns

Posted by: brandon.grime on 12 February 2018, 1:44 am EST

• 

  brandon.grime

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 February 2018, 1:44 am EST

  Hey,

  I saw that there was an example for dynamic column sets for the FlexGrid in angular, but I cant seem to get the grid columns to correctly render in React.

  I have a various set of buttons that change the column sets in state, and then I set that state value to the grid columns.

  When I debug the render after a button click to change the column set, the correct state value is set to the grid columns.

  Any thoughts?

  Thanks,

  Brandon

                      
  		<wijGrid.FlexGrid
                          autoGenerateColumns={false}
                          initialized={this.initGrid}
                          allowDragging={0}
                          columns={this.state.columns}
                          itemsSource={dummyMachines}
                          style={{ height: '600px', width: '100%' }}
                      />
  
  

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 12 February 2018, 2:42 pm EST

  I am sorry but I am unable to understand your requirements. Could you please elaborate further.

  I would suggest you to check out our React Samples on FlexGrid so that it can help you implement your use case.

  I have attached the FlexGrid Intro Sample as well.FlexGridIntro.zip

• 

  brandon.grime

  • Post Options:
  • Link
    Copy

  Posted 13 February 2018, 12:21 am EST

  http://demos.wijmo.com/5/Angular/DynamicColumns/DynamicColumns/

  A solution for this in React would be great.

  Thanks,

  Brandon

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 13 February 2018, 4:40 pm EST

  Hi Brandon,
  
  Wijmo FlexGrid for Angular provides WjFlexGridColumn directive with ngFor support. In React, the FlexGrid do not have WjFlexGridColumn, hence, the only way to create dynamic columns in FlexGrid is columnLayout.

  this.state.columnLayout=JSON.stringify([{name: "id", dataType: 2, binding: "id", width: 80, header: "Id"},{name: "country",  binding: "country", width: 80, header: "Country"}]);
     
  		<wijGrid.FlexGrid
                          autoGenerateColumns={false}
                          initialized={this.initGrid}
                          allowDragging={0}
                          columnLayout={this.state.columnLayout}
                          itemsSource={dummyMachines}
                          style={{ height: '600px', width: '100%' }}
                      />
  

  ~Manish

• 

  brandon.grime

  • Post Options:
  • Link
    Copy

  Posted 15 February 2018, 1:44 am EST

  that worked, thanks!