Set the color based on field data

Thread ID:	Created:	Updated:	Platform:	Replies:
143103	Mar 5,2019 08:40 AM UTC	Mar 7,2019 05:08 AM UTC	ASP.NET Core - EJ 2	3

Subscribe to this post

Tags: DataGrid

Mohd Mohaimin Zakaria

Asked On March 5, 2019 08:40 AM UTC

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.

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On March 6, 2019 05:20 AM UTC

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>

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.

Reply | Reply with quote

Mohd Mohaimin Zakaria

Replied On March 6, 2019 06:49 AM UTC

Got it. Thanks!

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On March 7, 2019 05:08 AM UTC

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.

Reply | Reply with quote

CONTACT US

Set the color based on field data

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US