How do I change the CSS or properties of the grid component so that a selected row is highlighted in a different color?
This is the CSS overrides I have as well as the HTML markup:
.e-grid .e-headercell {
background-color: #EBEBEB !important;
color: #000000 !important;
height: 20px !important;
}
.e-grid .e-headercell:hover {
background-color: #404055 !important;
color: #fff !important;
}
.e-grid .e-headercell:active {
background-color: #CCCCCC;
}
.e-grid .e-gridcontent .e-table .e-rowcell {
background-color: #F4F3F3;
}
<SfGrid DataSource="@model.AgencyProducts" EnableVirtualization="true" TValue="AgencyProduct" AllowSelection="true" AllowSorting="true" AllowReordering="true" AllowResizing="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Save", "Cancel" })">
<GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Single"></GridSelectionSettings>
<GridEditSettings AllowEditing="true" AllowEditOnDblClick="true" AllowNextRowEdit="true" AllowAdding="true" AllowDeleting="true" NewRowPosition="Syncfusion.Blazor.Grids.NewRowPosition.Bottom" ShowDeleteConfirmDialog="true"></GridEditSettings>
<GridEvents TValue="AgencyProduct" OnActionComplete="OnActionComplete" />
<GridColumns>
<GridColumn Field=@nameof(AgencyProduct.Id) HeaderText="Id" IsPrimaryKey="true" IsIdentity="true" Visible="false" AutoFit="true"></GridColumn>
<GridColumn Field=@nameof(AgencyProduct.Name) HeaderText="Product" AutoFit="true" DataSource="@agencyProducts">
<EditTemplate Context="ap">
<div class="btn-container">
<SfDropDownList TItem="Product" TValue="string" Placeholder="Select a product" DataSource="@products" AutoFit="true">
<DropDownListFieldSettings Value="Id" Text="Name"></DropDownListFieldSettings>
</SfDropDownList>
</div>
</EditTemplate>
</GridColumn>
<GridColumn Field=@nameof(AgencyProduct.ConnectOnHand) HeaderText="Connect On Hand*" AutoFit="true" AllowEditing="false"></GridColumn>
<GridColumn Field=@nameof(AgencyProduct.OrderQuantity) HeaderText="Order Quantity" AutoFit="true"></GridColumn>
<GridColumn Field=@nameof(AgencyProduct.LotCodes) HeaderText="Lot Codes" AutoFit="true"></GridColumn>
<GridColumn Field=@nameof(AgencyProduct.PalletSpaces) HeaderText="Pallet Spaces" AutoFit="true"></GridColumn>
</GridColumns>
</SfGrid>
