When using the onRowDataBound event, how can I set the font color for this row, not the background color?

When using the onRowDataBound event, how can I set the font color for this row, not the background color?

  /**

   * 设置行样式

   */

  function onRowDataBound(args) {

    const row = args.data;

    // 检查 row.Avail 是否为 false，设置行颜色为蓝色

    if (typeof row.Avail !== 'undefined' && row.Avail === false) {

      args.row.classList.add('blue-row');

    }

    // 检查 row.BillState 是否等于 -1，设置行颜色为蓝色

    if (typeof row.BillState !== 'undefined' && row.BillState === -1) {

      args.row.classList.add('blue-row');

    }

    // 检查 row.RedWord，根据其值设置行颜色

    if (typeof row.RedWord !== 'undefined') {

      if (row.RedWord === 1) {

        args.row.classList.add('blue-row');

      } else if (row.RedWord === 2) {

        //args.row.style.color = 'red';

        args.row.classList.add('red-row');

      }

    }

    // 如果没有 'seq' 列，跳过序号设置逻辑

    if (!state.hasSeqColumn) return;

    if (args.row) {

      var rowIndex = parseInt(args.row.getAttribute('aria-rowIndex'));

      var currentPageNumber = GGrid.value.ej2Instances.pageSettings.currentPage;

      var pageSize = GGrid.value.ej2Instances.pageSettings.pageSize;

      var startIndex = (currentPageNumber - 1) * pageSize;

      args.row.querySelector('.e-rowcell').innerHTML = (startIndex + rowIndex).toString();

    }

  }

<style>

  .blue-row {

    background-color: rgba(173, 216, 230, 0.5); /* 柔和的浅蓝色 */

  }

  .red-row {

    background-color: rgba(255, 182, 193, 0.5); /* 柔和的浅红色 */

  }

</style>

[Aishwarya Rameshbabu]

Hi Zhong,

Greetings from Syncfusion support.

Based on the provided information, it appears that you wish to apply text color to a specific row in the Grid, depending on the row data. To address this requirement, we have developed a sample where a custom class is added to the cells of a particular row based on its data. Please refer to the code example, sample, and screenshot below, which demonstrate the text color change for rows based on their data.

App.vue

 

 rowDataBound: function (args) {

    const nodes = args.row.querySelectorAll('.e-rowcell');

    let className = '';

    if (args.data["Freight"] < 30) {

      className = 'blue-row';

    } else if (args.data["Freight"] < 50) {

      className = 'red-row';

    }

    if (className) {

      nodes.forEach(node => {

        node.classList.add(className); // Adding the custom class for each cell of the row

      });

    }

 

Sample: https://stackblitz.com/edit/xnqqba-aocutt?file=src%2FApp.vue

Screenshot:

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R