Can Not Change Field Background Gantt Component

[Emrah Asma]

Hello, I am working with gantt component and I try to change checkbox field's background color. Here is my codes:

private gantCellQuery = (args: any) => {

    if (

      args.column &&

      args.column.type === 'checkbox' &&

      args.data &&

      args.cell

    ) {

      let theData = args.data as any;

      if (theData) {

        let isEffected = theData.isEffected;

        let theCurrenColor = 'tranparent';

        if (isEffected) {

          theCurrenColor = '#8ECDDD';

        }

        args.cell.setAttribute('style', `background-color:${theCurrenColor};`);

      }

    }

and I bind this function like that:

 queryCellInfo={this.gantCellQuery.bind(this)}

 {

    displayAsCheckBox: true,

    type: 'checkbox',

    width: 75,

    field: 'isChecked',

  },

  {

    field: 'isEffected',

    textAlign: 'Left',

    width: 50,

    visible: false,

    clipMode: 'EllipsisWithTooltip',

    type: 'boolean',

  },

What am I doing wrong? It works properly on Grid Component.

Thank you.

[Ajithkumar Gopalakrishnan]

Hi Emarh,

Greetings from Syncfusion Support,

The problem was due to an invalid property setting let theCurrenColor = 'tranparent', which caused the background color property not to update for all cells. We have now validated and updated the background color based on the isEffected value. Please find the updated code snippet and sample attached.

function querycellinfo(args)

{

    if (

      args.column &&

      args.column.type === 'checkbox' &&

      args.data &&

      args.cell

    )

    {

        let isEffected = args.data.isEffected;

        let theCurrenColor = 'transparent';

        if (isEffected)

        {

            theCurrenColor = '#8ECDDD';

        }

        args.cell.setAttribute('style',`background - color:${ theCurrenColor};`);

    }

}

You can find a working example on StackBlitz.





For more information, you may refer to the following link:

https://ej2.syncfusion.com/react/documentation/gantt/appearance-customization#customize-rows-and-cells

If you have any further questions or need additional assistance, please let me know!

Regards,

Ajithkumar G

[Emrah Asma]

Thank you so much, it works.