How can I use image in PivotView Row?

[Unknown]

Hi

I want to use image in Pivot View row, How can it be?

For example Company logos

Best regards.

[Saranya Sivan]

Hi Kenan Dogan, 

  

You can customize the row/ column headers using cell template option. Meanwhile, we have prepared a sample to add the image in the row. Please find the sample and UG in the below links. 

  

Sample Link:  https://stackblitz.com/edit/angular-1ybfyt-frvaw5?file=app.component.html 

  

UG: https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column/#cell-template 

  

Code Example: 

 app.component.ts 

 getCellContent(e): void { 

    if ( 

      e.targetCell.classList.contains("e-rowsheader") && 

      !e.targetCell.classList.contains("e-gtot") && 

      !e.targetCell.querySelector(".e-image") 

    ) { 

      var imgElem = document.createElement("img"); 

      imgElem.classList.add("e-image"); 

      imgElem.setAttribute("src", "https://emoji.beeimg.com/😃/15"); 

      imgElem.setAttribute("style", " padding-right: 10px; float:right"); 

      e.targetCell.appendChild(imgElem); 

    } 

  } 

app.component.html 

  

  <ejs-pivotview   #pivotview 

    id="PivotView"  [dataSourceSettings]="dataSourceSettings" 

    width="100%"   height="1000"    [gridSettings]="gridSettings" > 

    <ng-template #cellTemplate let-data> 

      <span [innerHTML]="getCellContent(data)"></span> 

    </ng-template> 

  </ejs-pivotview>   

   

We hope that the above sample will meet your requirement. 

  

Regards,   

Saranya S.