Apply css style to a row based on a value of its data

[Marco Giorgi]

I have an ejGrid bound to a json datasource.

I'm able to style the single cells with an external script that read data from the data-style attribute and append to the <td> cells

What I'm trying to achieve now is to apply a style to the whole row, but the main issue with my current approach is that I have a frozen column, therefore we have two different tables.

In particular, I'd like to apply a smaller height to the Event Categories rows.

Event Categories are the ones with bold font, and in the data-source, they have a property type=c, highlighted in bold below:

[{"EventID": "c1","type":"c", "EventName": "Weather" },

{"EventID": "1", "EventName":"Rain","jun": "Monsoon starts","sep": "Light Rains"},

{"EventID": "3", "EventName":"Flood","jul": "Not Damaging"},

{"EventID": "4", "EventName":"Winter/Summer","apr": "Peak hot /excessive hot ","dec": "Average cold wave (5-6 degrees)"},

{"EventID": "c17","type":"c", "EventName": "Human Health" },....]

Is there a way to manage row styles?

Here is the playground with data sample:

http://jsplayground.syncfusion.com/ywpvztww

Many thanks.

Best,

Marco

[Farveen Sulthana Thameeztheen Basha]

Hi Marco, 

Thanks for contacting Syncfusion Support. 

Query # :- What I'm trying to achieve now is to apply a style to the whole row, but the main issue with my current approach is that I have a frozen column, 

 

We have checked your query and if you want to apply the CSS property to the whole row, we suggested you to use “rowDataBound” event of the Grid.  In the rowDataBound event, we can access the row data in args.data and based on that we have applied the CSS styles to the whole row.  Likewise, you can apply the CSS properties to the particular row as per your requirement. 

Please refer to the code example:- 

$(document).ready(function () { 

                $("#grid").ejGrid({ 

                    dataSource: progAct.typicalYear.data, 

                     

                    rowDataBound: function (args) { 

                        if (args.data.EventName == "Winter/Summer") 

                              args.row.css("backgroundColor", "#F3C3C3"); /*custom css applied to the row */ 

 

                    },   

                 

                }); 

Modified Sample Link:- 

http://jsplayground.syncfusion.com/4ul5fya4 

Please refer to the API reference Link:- 

https://help.syncfusion.com/api/js/ejgrid#events:rowdatabound 

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

Regards, 

Farveen sulthana T