Enable and disable an icon in flexgrid

Enable and disable an icon in flexgrid

Posted by: jianing.huang on 19 August 2020, 8:30 am EST

• 

  jianing.huang

  • Post Options:
  • Link
    Copy

  Posted 19 August 2020, 8:30 am EST

  Hi,
  
  I need to modify the state of an icon, such as enable and disable the icon based on condition, in an icon column in flex grid outside of itemFormatter. Is there a way that I can loop and find the cells in this column and modify the innerHtml of these cells using javascript?
  
  I would appreciate any help.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 20 August 2020, 1:14 am EST

  Hi Jenny,

  You can use the getCellElement method of the GridPanel to get the cell element of a particular row and column:

  var elem = flexGrid.cells.getCellElement(0, 0);
  

  This will return the element of (0, 0) cell. If you need to get the element of columnHeaders, then use the following code:

  var elem = flexGrid.columnHeaders.getCellElement(0, 0);
  

  Once you have the cell element, you can easily query the icons inside it and enable/disable the icon accordingly.
  
  API Link: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.gridpanel.html#getcellelement

  Regards,
  
  Ashwin

• 

  jianing.huang

  • Post Options:
  • Link
    Copy

  Posted 27 August 2020, 4:18 pm EST

  Hi Ashwin,

  Thank you so much for your reply. I will try that and I think it will work.
  
  Actually, I tried, and I need to modify the state of the icon after the grid and the data has already been rendered, so I have two more questions:

  1. We are using wijmo 5.20161.164. I do not see we have flexGrid.cells.getCellElement() method available that you suggested above. Is there another way to get the cell’s innerHtml with the version we have? I also saw that gridPanel is not available with the version I have.
  2. Is there a flexgrid rended event? I look through the API and could not find it.

  Your help is appreciated.

  Jenny

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 August 2020, 3:04 am EST

  Hi,

  In 5.20161.164, the getCellElement method was not introduced. But, there was a getCellBoundingRect method, which you can use to get the cell element.

  var rect = flexGrid.cells.getCellBoundingRect(row, col);
  var elem = document.elementFromPoint(rect.left, rect.top);
  

  I checked in the 16v1 documentation and the GridPanel class is present so you can use the cells property without any issues.

  Regarding #2, there is no rendered event in FlexGrid. Can you let me know your exact requirements so that I can provide you with an alternate event?

  ~regards

• 

  jianing.huang

  • Post Options:
  • Link
    Copy

  Posted 28 August 2020, 11:25 am EST

  Thank you. Here is the requirement. I have an icon column, for instance delete icon, in one of the grids on the page. The icons are inserted during the initial grid rendering inside the itemFormatter by assigning to cell’s innerHtml, and they are initially all disabled. These icons should become enabled without the whole page post back on an user event, such as user click on an edit button of the whole page. At this time, I believe that the grid has already been rendered and itemFormatter will not be called again (correct me if was wrong here) . I need to be able to change the cell’s innerHtml to make these icons enabled.

  I tried what you suggested above:
  
  ```

  var rect = flexGrid.cells.getCellBoundingRect(row, col);
  var elem = document.elementFromPoint(rect.left, rect.top);
  

  But the elem on the second line was returned "undefined"
  
  All I need is to be able to change the innerHtml of one of the cells in a column dynamically after the grid and its data has already been rendered.  Is this possible?
  
  Another related question:  Is there any event triggers the grid itemsFormatter to run?  
  
  Appreciate any help on this.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 30 August 2020, 11:39 pm EST

  Hi,

  Thanks for the detailed information. I would suggest you that instead of getting the cell element, you may use itemFormatter again to enable/disable. You can use the invalidate method of FlexGrid to call the itemFormatter manually.

  Using the itemFormatter, it will be easier to get the cell element and you can perform you customization easily.

  ~regards