How to coloring row text in Detail Template with condition value

[Agung Haryanto Pranyoto]

Hi Guys

I have an issue about coloring value text on the detail template grid. I try to apply customeAttribute like this code. But my value can't change like validation. Please help me to solve my issue.

Thank you

[Vikram Sundararajan]

Hi Agung Haryanto Pranyoto,

Greetings from Syncfusion support,

We understand that you want to apply conditional formatting to the text in the detail template grid. To achieve this, you can use the queryCellInfo event of detail template Grid to dynamically apply styles based on the data values. In your queryCellInfo event handler, you can check the value of the cell and apply the desired styles directly.

Please refer the below code snippet and sample for more information,

  queryCellInfo(args: any) {

    if (args.column.field === 'ShipCountry') {

      const shipCountry = (args.data as any).ShipCountry;

      if (shipCountry === 'Brazil') {

        (args.cell as HTMLElement).style.color = 'red';

      } else if (shipCountry === 'France') {

        (args.cell as HTMLElement).style.color = 'blue';

      }

    }

  }

 

 

Sample; https://stackblitz.com/edit/github-wbnxdf-wbnzjp?file=src%2Fapp.component.ts

queryCellInfo: https://ej2.syncfusion.com/documentation/api/grid/#querycellinfo

Please get back us if you need further assistance.

Regards,

Vikram S