Set the color based on field data

[Mohd Mohaimin Zakaria]

Hi,

I have a grid as shown example below, how can i set the color for the text field data in a column based on difference between 2 columns.

        <e-grid-columns>

            <e-grid-column field="OldValue" headerText="OldValue"></e-grid-column>

            <e-grid-column field="NewValue" headerText="NewValue"></e-grid-column>

        </e-grid-columns>

Example :

Old Value	New Value
100g	200g
Sugar	Sugar
White	Brown
$5	$2
Available	Available

As per example, I want the text in New Value column which are Different than Old Value column.

In this case I want 200g, Brown & $2 to be in red color. Other than that is default black color.

Thank you.

[Thavasianand Sankaranarayanan]

Hi Mohd, 

Greetings from Syncfusion. 

We can achieve your requirement using the rowDataBound event of Grid. 

Refer the below code example. 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowPaging="true" rowDataBound="rowDataBound"> 

    <e-grid-columns> 

        <e-grid-column field="OldValue" headerText="OldValue" width="90"></e-grid-column> 

        <e-grid-column field="NewValue" headerText="NewValue" width="90"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<style> 

    .e-grid td.e-rowcell.differentValue { 

        color: red; 

    } 

</style> 

 

<script> 

    function rowDataBound(args){ 

        if (args.data.OldValue != args.data.NewValue) 

            args.row.lastChild.classList.add('differentValue') 

    } 

</script> 

Refer the below screen shot. 

 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#rowdatabound 

Please let us know if you need further assistance on this.  

Regards, 

Thavasianand S. 

[Mohd Mohaimin Zakaria]

Got it. Thanks!

[Thavasianand Sankaranarayanan]

Hi Mohd, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.