React Filter instantiation issue

React Filter instantiation issue

Posted by: brian.lee on 17 November 2018, 11:09 am EST

• 

  brian.lee

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 November 2018, 11:09 am EST

  I am using the wijmo.react modules. I imported the grid using “import { FlexGrid } from ‘wijmo/wijmo.react.grid’” and the filter using “import * as wjFilter from ‘wijmo/wijmo.react.grid.filter’”.

  I then instantiated in code the filter: this.filter = new wjFilter.FlexGridFilter(this.grid)

  The error occurs when I try to attach a handler: this.filter.filterChanged.addHandler( (s, e) => { … }

  The error message is: Uncaught TypeError: Cannot read property ‘addHandler’ of undefined

  This error does NOT happen with I use the “wijmo.grid.filter”. There isn’t much depth in the wijmo React documentation. Can anyone point out what I am doing wrong here?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 19 November 2018, 2:12 am EST

  Hi,

  React interop is a wrapper over our base controls.
  
  Controls from interop are not meant to be instantiated using constructor calls since there are lots of other things such as life-cycles that need to be invoked properly for the control to work.
  
  If you would like to create controls using js code(constructor calls) then you need to use js modules(in this case ‘wijmo/wijmo.grid.filter’).
  
  Or if you would like to get the instance of created control for programmatic access then you may initialized event.
  
  Please refer to the following sample: https://stackblitz.com/edit/react-x9irl4?file=index.js

  ~Sharad

• 

  brian.lee

  • Post Options:
  • Link
    Copy

  Posted 19 November 2018, 11:33 pm EST

  Thanks for this valuable piece of information. Can I ask for a link to a doc that would give me a list of the events I can access when declaring the filter in HTML (like the example in the link)? I did not think Initialized was an event I could hook into. Thank you.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 22 November 2018, 1:42 am EST

  Please refer to the following doc to get a list of available properties and events:
  
  https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.FlexGrid.Class.html
  
  For framework specific info(such as the initialized event), please refer to the interop section:
  
  https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.react.Module.html

  Hope this helps.

• 

  brian.lee

  • Post Options:
  • Link
    Copy

  Posted 29 November 2018, 11:21 pm EST

  The links are helpful but it seem light. For instance, in the stackblitz example you provided above, there is an event “initialized” that was used on the Filter. It is not in any of the document links you provided. I guess this is my biggest stumbling block. Short of asking in this forum, how would I know that the event “initialized” can be used in the Filter declaration?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 3 December 2018, 2:12 am EST

  Hi Brian,

  Maybe you missed this part but the interop section(https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.react.Module.html) does mention the ‘initialized’ event.

  Perhaps maybe it needs to be highlighted in some way in the documentation to grab more attention. We will inform the concerned team about the same.

  Regards