Change background color of certain rows in grid and prevent editing

Question

Good evening,Thank you for all your help with the Pivot Table. I'm trying to do a couple things in the grid and have not found a way to do it by experimenting or reading other articles. First, in the grid of a pivot table, I need to be able to change the color of certain rows based on the value of the row header. For example, in the image below I would like to be able to read the row header "Small Equipment" and change the background color of that row to dark gray. Secondly, I would also like to make it so that you cannot edit that row. Currently, I've got double-click on a cell to edit (I've attached my code for review as I've tried a few different events that don't seem to work, such as cellclick).Thank you!ChuckAttachment: pivottablecode_5791a279.zip

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi Charles,Kindly use “queryCellInfo”
event to apply custom styles to the pivot table cells based as per your
requirement. And using the drillThrough event you can restrict the
drillthrough popup UI while selecting the custom style applied pivot cells.
Please refer the below code example.Code Example:

queryCell(args: any): void {
      (this.pivotObj.renderModule as any).rowCellBoundEvent(args);
      //triggers for every CellClickEventArgs
      var rowIndex = Number(args.cell.getAttribute('index'));
      if (
        args.data[rowIndex] &&
        args.data[rowIndex].rowHeaders === 'France.Fenders'
      ) {
        args.cell.classList.remove('e-gtot');
        args.cell.classList.remove('e-rowsheader');
        args.cell.classList.add('custom-class');
      }
    }
   
    drillThrough(args: DrillThroughEventArgs): void {
      //Restrict drill through for custom styles applied pivot cells.
      if (args.currentTarget.classList.contains('custom-class')) {
        args.cancel = true;
      }
    }

Meanwhile, we have prepared a
sample for your reference. Please find it from below link.Sample:
https://stackblitz.com/edit/angular-rqhcze-psytco?file=app.component.ts,index.htmlKindly
refer to the following document to know more details about the drillThrough event.Document:
https://ej2.syncfusion.com/angular/documentation/pivotview/drill-through/#drillthroughPlease
let us know if you have any concerns.Regards,Angelin Faith Sheeba

Charles Dunn · Answer

Hello and thank you for your suggestion, however it looks like this doesn't work when you have nested categories beyond 2 levels. Attached is a screen shot showing the levels I have setup and the console log of each level. If you notice, when it gets to "Expenses" it only shows Expenses and not the sub-categories. Is there another way to check the row header when you have nested categories? I didn't see anything in the object, but maybe I'm missing something.

Here is my code for the console.log:

  queryCell(args: any): void {
    (this.budgetPivotViewControl.renderModule as any).rowCellBoundEvent(args);

    const rowIndex = Number(args.cell.getAttribute('index'));
    if (args.data[rowIndex]) {
      console.log(args.data[rowIndex].rowHeaders);
    }

And here is what I'm seeing in the console:

Thanks again!

Chuck

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi Charles,To apply custom styles to nested
row headers, see the code example below. For example, the first field's
rowHeaders is named France, and the inner level's rowHeaders can be
named France.Cleaners.Code Example:

queryCell(args: any): void {
      (this.pivotObj.renderModule as any).rowCellBoundEvent(args);
      //triggers for every CellClickEventArgs
      var rowIndex = Number(args.cell.getAttribute('index'));
      if (
        args.data[rowIndex] &&
        args.data[rowIndex].rowHeaders === 'France.Bottles and Cages'
  //Second level of row headers
      ) {
        args.cell.classList.remove('e-gtot');
        args.cell.classList.remove('e-rowsheader');
        args.cell.classList.add('custom-class');
      } else if (
        args.data[rowIndex] &&
        args.data[rowIndex].rowHeaders === 'France.Cleaners.Accessories' //Third
  level of row Headers.
      ) {
        args.cell.classList.remove('e-gtot');
        args.cell.classList.remove('e-rowsheader');
        args.cell.classList.add('custom-class');
      } else if (
        args.data[rowIndex] &&
        args.data[rowIndex].rowHeaders === 'France' //First level of row header.
      ) {
        args.cell.classList.remove('e-gtot');
        args.cell.classList.remove('e-rowsheader');
        args.cell.classList.add('custom-class');
      }
    }

Meanwhile, we have modified your
sample for your reference. Please find it from below link.Sample:
https://stackblitz.com/edit/angular-rqhcze-ptabf2?file=app.component.tsPlease
let us know if you have any concerns.Regards,Angelin Faith Sheeba