Wijmo - Detail Row React

Wijmo - Detail Row React

Posted by: bjordan on 13 June 2018, 7:52 am EST

• 

  bjordan

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 13 June 2018, 7:52 am EST

  Hey there, new to Wijmo and am trying to interact with the FlexGrid React component. I got normal grids rendering just fine (and they look good) and am looking to copy the second example from http://demos.wijmo.com/5/angular/rowdetails/rowdetails/ (it’s in angular). Is there any way to duplicate this via the React interop? I tried a few different ways and it didn’t seem obvious but I feel like I am just missing something.

  Maybe the imports is wrong?
  
  import * as WjGrid from ‘wijmo/wijmo.react.grid’;

  Thanks in advance!

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 13 June 2018, 7:20 pm EST

  Hi,
  
  Thanks for evaluating Wijmo!

  Currently, row detail do not have react module. Hence, the wijmo.grid.detail module should be imported as following:

  import * as wjcGridDetail from 'wijmo.grid.detail';
  

  After that you need to create an instance of FlexGridDetailProvider class and set its createDetailCell property to a function which takes a wijmo.grid.Row as input and returns a cell element(HTMLElement) for that row.
  
  Please refer to following code snippet:

  /* create instance of FlexGridDetailProvider class */
  var dp = new wjcGridDetail.FlexGridDetailProvider(grid);
  /* function that creates detail cell for row */
  dp.createDetailCell = (row) => {
  /* create detail cell */
  var cell = document.createElement('div');
  var detailGrid = new wjcGrid.FlexGrid(cell, {
  headersVisibility: wjcGrid.HeadersVisibility.Column,
  autoGenerateColumns: false,
  itemsSource: this.getData(10),
  isReadOnly: true,
  columns: [
  { header: 'ID', binding: 'id' },
  { header: 'Country', binding: 'country' }
  ]
  });
  return cell;
  };
  

  You can also refer to the following sample in react:- https://stackblitz.com/edit/react-u1drlm?file=index.js

  ~Manish

• 

  bjordan

  • Post Options:
  • Link
    Copy

  Posted 14 June 2018, 8:16 am EST

  Wow thanks for the code examples and the information on how to do it. I think this is gonna get me where I need to go.

  I appreciate your time and help getting me more familiar with how the FlexGrid works!