Memory leak - Flexgrid

Memory leak - Flexgrid

Posted by: steven.shiells on 26 August 2019, 9:46 am EST

• 

  steven.shiells

  • Post Options:
  • Link
    Copy

  Posted 26 August 2019, 9:46 am EST

  Hi,

  I am seeing some memory leaks in our app with the flexgrid. in FormatItem in some cells we insert dropdowns and in others we insert buttons. For the buttons we attach event handlers. Overtime when the grid refreshes and the cells are re-rendered there are memory leaks with the selects (which become detached) and with the event handlers on the buttons. I know we should detach the event handlers but not sure where we can call it where we have access to the button. Can someone help with this?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 27 August 2019, 1:49 am EST

  Hi Steven,

  Form what I understand, you are adding dropdowns in the FlexGrid’s cells to use them as editor. For this, I would suggest you use DataMaps or Custom grid editors instead of adding them to cells in formatItem. Please refer to the samples below:

  • "* “DataMap: https://www.grapecity.com/wijmo/demos/Grid/Columns/DataMaps/purejs”
  • “Custom Grid Editors: https://www.grapecity.com/wijmo/demos/Grid/Editing/CustomEditors/purejs”
    
    "

  Regarding event handlers:

  You could add an event handler to the hostElement of the FlexGrid and use the hitTest method to get the current row, column, etc and handle the event accordingly:

  https://stackblitz.com/edit/js-o4pgo7

  Regards,
  
  Ashwin

• 

  steven.shiells

  • Post Options:
  • Link
    Copy

  Posted 27 August 2019, 2:57 am EST

  Thanks I will take a look at these. The reason we did it this way is that we need different values in the dropdowns per row (it is dependent on other row values). I should have also mentioned that we are using react.

• 

  steven.shiells

  • Post Options:
  • Link
    Copy

  Posted 27 August 2019, 5:38 am EST

  I think your solution for the event handlers will work, but the datamap solution isn’t what we are after. We need different values for the dropdown per row. In this example they all have the same values. I have seen your example for the dynamic data maps but that doesn’t work as we need it. In that example the values are only updated when you edit the datamap column, whereas we would need to values in the dropdown (and selected value) to update when the value which controls the data map values changes.

  Also, we have quite a complicated formatItem method. When there are a lot of rows in the grid (e.g. 50) this method gets called quite a lot, and as a result our grid becomes very slow to use.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 August 2019, 12:58 am EST

  Hi Steven,

  Please refer to the sample below and let me know whether this fulfills your requirement:

  https://stackblitz.com/edit/react-np3u7q

  Regarding formatItem event:

  Since, formatItem event is raised whenever the layout of the FlexGrid is updated like resizing a column, scrolling, sorting, etc. Therefore, it is raised many times during the execution.
  
  Could you please tell me more about what behavior you are trying to achieve using the formatItem event so we can help you to increase the performance?

  ~regards

• 

  steven.shiells

  • Post Options:
  • Link
    Copy

  Posted 28 August 2019, 2:57 am EST

  Hey this could work, I will take a look but it might be a little while before I get round to it as I am swamped just now.

  We have quite a customised grid, where we have some columns with buttons, some with multiple buttons, we have some row, column, cell specific styles and add pop overs for cells which have errors.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 August 2019, 11:41 pm EST

  Hi Steven,

  Please take your time to go through the sample and let me know if you have any queries.

  Regarding fomatItem event:

  Could you please try using custom CellFactory instead of the formatItem event and let me know if it increases the performance. Refer to the link below that demonstrates how to create a custom CellFactory:

  https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/CellFactory

  ~regards