Alternate Row Color on a grid

[Danyelle]

I have a grid, how would I alternate the colors of the rows? The first row would be white and the next would be grey and the would alternate.

@Html.EJS().Grid("ContainerGrid").DataSource(DataManager => { DataManager.Json(@Model.ContainerTransactions.ToArray()).InsertUrl(@Url.Action("AddContainerTransaction", "Containers")).UpdateUrl(@Url.Action("UpdateContainerTransaction", "Containers")).RemoveUrl(@Url.Action("DeleteContainerTransaction", "Containers")).Adaptor("RemoteSaveAdaptor"); }).AllowFiltering(true).ToolbarClick("toolbarClick").EnableAdaptiveUI(false).RowRenderingMode(Syncfusion.EJ2.Grids.RowRenderingDirection.Horizontal).Width("auto").Columns(col =>

                                 {

                                     col.Field("TransactionNo").Visible(false).Add();

                                     col.Field("InventoryID").HeaderText("Item").IsPrimaryKey(true).Width("60").Visible(false).EditType("dropdownedit").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).ValidationRules(new { required = true }).Add();

                                     ...

                                     }).ValidationRules(new { required = true, number = true, min = 1 }).Width("120").Add();

                                     col.Field("IsRestock").HeaderText("Restock").EditType("booleanedit").DisplayAsCheckBox(true).Type("boolean").Width("120").Add();

                                     col.Field("Notes").HeaderText("Notes").Width("150").Add();

                                 }).ActionBegin("actionBegin").ActionComplete("actionComplete").AllowPaging(true).PageSettings(page => page.PageCount(6).PageSizes(true)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).Toolbar(toolbarItems).Render()

[Rajapandiyan Settu]

Hi Danyelle, 

Thanks for contacting Syncfusion support. 

By using following CSS classes you can customize the style of alternate rows in the Grid. 

<style> 

    .e-grid .e-row.e-altrow { 

    background-color: #f2f2f2; 

} 

</style> 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S

[Danyelle]

Worked perfectly. Thanks

[Rajapandiyan Settu]

Hi Danyelle, 

We are glad that you have achieved your requirement with the provided solution. 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S