custom icon hide issue

custom icon hide issue

Posted by: riya.katawate16 on 3 August 2022, 12:41 am EST

• 

  riya.katawate16

  • Post Options:
  • Link
    Copy

  Posted 3 August 2022, 12:41 am EST

  Hi Team,
  
  I have added custom icon in row field of pivot grid. whenever i resize grid, the icon goes off (hides) i dont want to hide it, it should remain in its place.
  
  Thanks
• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Replied 3 August 2022, 5:13 pm EST

  Hello,
  
  We apologize but we are unable to replicate the issue at our end, could you please refer to the below sample used to reproduce the issue and let us know if any changes are required to replicate the issue at our end?
  
  If you are facing the issue only in your application and not in the below-shared sample, it might be possible that the issue is caused due to some other factors in your application therefore I would request you to please share a small sample replicating the issue.
  
  Sample link: https://stackblitz.com/edit/angular-8bdohy?file=src%2Fapp%2Fapp.component.ts
  
  Regards
  Sonu Kumar Pandey
• 

  riya.katawate16

  • Post Options:
  • Link
    Copy

  Replied 3 August 2022, 10:54 pm EST

  I have added customIcon on row header. but when i refresh page it goes off. and after clicking on row header it comes back.
  addCustomIcon(cell, header) {
  setTimeout(() => {
  cell.innerHTML =
  `<span id="customIcon" class="wj-glyph-filter"></span>`+ header;
  }, 50);
  }
  
• 

  paanjii268

  • Post Options:
  • Link
    Copy

  Replied 4 August 2022, 8:56 pm EST

  i got same issue.
• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Replied 5 August 2022, 1:14 am EST

  ​Hello,
  
  We apologize but we are unable to replicate the issue at our end, would you please clarify if you are facing the issue with the below-shared sample link too? If yes, please share some screenshots/gifs of the issue or error. If you are facing this issue only in your application but not in the shared sample then it is possible that the issue is arising due to some code specific to your application. Since we are unable to replicate the issue, I would request you to share a sample that demonstrates the issue so that we could further investigate the root cause of the issue and assist you accordingly. Without a sample to replicate the issue, we cannot comment on the actual nature of the issue.
  
  Sample link: https://stackblitz.com/edit/angular-6rgcdp?file=src%2Fapp%2Fapp.component.ts
  
  Regards
• 

  riya.katawate16

  • Post Options:
  • Link
    Copy

  Replied 9 August 2022, 11:36 pm EST

  Hi Team,
  
  I am adding custom icon on a row where filter is applied.
  

  initPivot(pivotGrid) {
  pivotGrid.collectionView.collectionChanged.addHandler((s, e) => {
        //add icons on rowFileds column header cells
        s.engine.rowFields.forEach((field, i) => {
          if (field.filter.isActive) {
            let cell = pivotGrid.topLeftCells.getCellElement(0, i);
            this.addCustomIcon(cell, field.header);
          }
        });
      });
  }
  
  addCustomIcon(cell, header) {
      setTimeout(() => {
        cell.innerHTML =
          `<span id="customIcon" class="wj-glyph-filter"></span>`+"  "+header;
      }, 10);
    }

  
  
  Now when i refresh grid eg. this.pivotGrid.refresh() the custom icon is not visible(hides), it should be visible. but when i click on the row field it comes back.
  
  So is there any way custom icon remains on grid event after grid refresh? I dont want to make use of formatItem as there is a huge amount of data and may result in performance issue
  

• Marked as Answer

  

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Replied 10 August 2022, 9:49 pm EST

  Hello,
  
  The issue occurs because you have add the custom icons on the collectionChanged event which don't get triggered after pivotGrid gets refreshed causing the icon to get lost as on refreshing the FlexGrid cell elements get re-render again. Also when you are clicking the header cell again the column gets sorted causing the collectionChanged event to trigger which re-appears the icons again.
  
  These types of cell customization are better to be done in formatItem event because other options like refreshed, updatedView, updatedLayout events get triggered more than the formatItem event which will cause performance issues.
  
  However, I don't see any issues with using the formatItem event here, as per our observation it will be adding a custom icon when the filter is applied on the column and shouldn't be causing much of performance issues. Therefore I would recommend you to use the formatItem event to add the custom icons to column headers and in case you face any major performance issues then please let us know.
  
  Regards
• 

  riya.katawate16

  • Post Options:
  • Link
    Copy

  Replied 11 August 2022, 3:51 pm EST

  Thanks for your response.