Use the bind on the queryCellInfo breaks the edition mode in the pivot table

[Cesar Smerling]

Hi, I follow the guide to style some cells by a condition from the following link:

https://ej2.syncfusion.com/angular/documentation/pivotview/how-to/apply-custom-styles-to-pivot-cells

Here it use this part of code to bind the queryCellInfo:

enginePopulated(args: any): void {
    ((this.pivotGridObj as PivotView).grid as Grid).queryCellInfo = this.queryCellInfo.bind(this);
    ((this.pivotGridObj as PivotView).grid as Grid).headerCellInfo = this.headerCellInfo.bind(this);
  }

Doing this break the edition mode, edtion doesn't work anymore.

Any workaround?

[Karthickraja MuthuRaman]

Hi Cesar,

We have investigated your query and found that binding the headerCellInfo and queryCellInfo events to the grid settings within the enginePopulated event works as expected. However, for better integration and maintainability, we recommend using these events directly within the gridSettings configuration, leveraging Angular's observable library. In the provided code example, custom styles are applied to headers and cells using the headerCellInfo and queryCellInfo events within the gridSettings.

Code Example:

Index.html

<style>

      .e-custom {

            font-family: 'Courier New', Courier, monospace;

            font-size: 12px !important;

            background-color: pink !important;

      }

</style>

app.component.ts

import { Observable } from 'rxjs';

 

export class AppComponent implements OnInit {

  public observable = new Observable();

 

  ngOnInit(): void {

    this.gridSettings = {

      columnWidth: 140,

      queryCellInfo: this.observable.subscribe((args: any) => {

        let colIndex: number = Number(args.cell.getAttribute('data-colindex'));

        let cells: any = args.data[colIndex] ? args.data[colIndex] : {};

        // Here by using 'actualText' option, a custom class can be added to the specific row header and its value to apply custom style.

        if (cells.actualText === 'Germany') {

          args.cell.classList.add('e-custom');

        } else if (

          cells.actualText === 'Amount' &&

          cells.columnHeaders === 'FY 2016' &&

          cells.rowHeaders === 'Germany'

        ) {

          args.cell.classList.add('e-custom');

        }

      }) as any,

      headerCellInfo: this.observable.subscribe((args: any) => {

        let customAttributes: any = args.cell.column.customAttributes;

        // Here custom class can be added to the specific column header by using unique level name, to apply custom style.

        if (

          args.node.classList.contains('e-columnsheader') &&

          customAttributes &&

          customAttributes.cell.valueSort.levelName === 'FY 2016.Sold Amount'

        ) {

          args.node.classList.add('e-custom');

        }

      }) as any,

    } as GridSettings;

  }

}

Output:

Sample: https://stackblitz.com/edit/angular-tjfpzn1h-of6xlmqg?file=index.html,src%2Fapp.component.ts

We acknowledge that the current content in the User Guide needs to be revised to accurately reflect this behavior. We will update the documentation as soon as possible and keep you informed. Please let us know if you need any further assistance or clarification.

Regards,

Karthickraja