Cell editing when displaying custom icon in cell

Cell editing when displaying custom icon in cell

Posted by: moritz.neugebauer on 5 July 2020, 7:46 pm EST

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 July 2020, 7:46 pm EST

  Dear Wijmo Team,

  I’m using formatHandler to display a custom icon on the right-end side of a certain cell. It works just fine.

  
  this.flex.formatItem.addHandler((s: wjcGrid.FlexGrid, e: wjcGrid.FormatItemEventArgs) => {
              //regular cells
              if (e.panel == s.cells) {
                  let item = s.rows[e.row].dataItem;
                  if (!item) {
                      return
                  }
  
  if (item && item.status === STATE.Special) {
                      Object.keys(item.attributes).forEach(key=>{ 
                          let cell = item.attributes[key];
                          if(cell.status == STATE.Special) {
                              if(s.columns[e.col].binding.includes(cell.attributId)) {
                                  let icon = '<span style="margin-left: 10px;"><svg viewBox="64 64 896 896" fill="currentColor" width="13px" height="13px" aria-hidden="true"><path d="M908 640H804V488c0-4.4-3.6-.........-408V140h168v168H428zm420"></path></svg></span>';
                                  let innerHtml = e.cell.innerHTML;
                                  e.cell.innerHTML = innerHtml.concat(icon);
                              }
                          }
                      });
                  
                  }});
  
  

  However, when trying to edit that specific cell, editing doesn’t work. The cell stays empty when entering a new value. Also I noticed, that the icon gets pushed almost completely outside of the cell and is hardly visible when editing the cell.

  I would like to achieve two things:

  • Show new value when editing cell
  • Show icon on the right-end side of the cell when editing cell

  How can I achieve that?

  Best regards
  
  Moritz

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 6 July 2020, 3:47 pm EST

  Hi Moritz,

  Instead of adding the new element using innerHTML, create the element using wijmo.createElement method and append it to the cell using the appendChild method.
  
  If you will update the innerHTML, the input element used to edit the grid will also be updated and the actual grid editor created will be disposed. But by appending the new child, the editor is not disposed.

  Please refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-9au8tw

  Regards,
  
  Ashwin

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy

  Posted 6 July 2020, 5:28 pm EST

  Dear Ashwin,

  thank you very much. It works like a charm

  Best regards
  
  Moritz