Hhow to change background color of details template grid
I have an sfgrid control with detail template. I would like to know how to change background color of details template grid
<div class="gridStyleClass">
<SfGrid @ref="Grid" Width="100%" Height="100%" AllowFiltering="true" AllowSelection="true" AllowPaging="true" AllowSorting="true" AllowTextWrap="false" DataSource="@GridData">
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
<GridSelectionSettings CheckboxOnly="true" EnableSimpleMultiRowSelection="false"></GridSelectionSettings>
<GridEvents OnRecordClick="RecordClickHandler" TValue="SRFList"></GridEvents>
<GridTemplates>
<DetailTemplate>
@{
var srf = (context as SRFList);
<SfGrid DataSource="@GridData" Query="@(new Query().Where("SRFNo", "equal", srf.SRFNo))" >
<GridColumns>
<GridColumn Field=@nameof(SRFList.RequestedBy) HeaderText="RequestedBy" Width="70"> </GridColumn>
<GridColumn Field=@nameof(SRFList.Descriptions) HeaderText="Descriptions" Width="170"> </GridColumn>
<GridColumn Field=@nameof(SRFList.WidthClass) HeaderText="WidthClass" Width="60"></GridColumn>
<GridColumn Field=@nameof(SRFList.Last) HeaderText="Last" Width="60"></GridColumn>
<GridColumn Field=@nameof(SRFList.LastNo) HeaderText="LastNo" Width="60"></GridColumn>
</GridColumns>
</SfGrid>
}
</DetailTemplate>
</GridTemplates>
<GridColumns>
<GridColumn TextAlign="TextAlign.Left" HeaderText="Action">
<Template>
<SfButton IconCss="e-icons e-edit"></SfButton>
<SfButton IconCss="e-icons e-delete"></SfButton>
<SfButton IconCss="e-icons e-copy"></SfButton>
</Template>
</GridColumn>
@*<GridColumn Type="ColumnType.CheckBox" TextAlign="TextAlign.Left" AllowFiltering="false" AllowSorting="false" Width="3%"></GridColumn>*@
<GridColumn TextAlign="TextAlign.Left" Field=@nameof(SRFList.SRFNo) HeaderText="SRFNo" HideAtMedia="(min-width: 500px)"></GridColumn>
<GridColumn TextAlign="TextAlign.Left" Field=@nameof(SRFList.Product) HeaderText="Product" HideAtMedia="(min-width: 500px)"></GridColumn>
<GridColumn TextAlign="TextAlign.Left" Field=@nameof(SRFList.Buyer) HeaderText="Buyer" HideAtMedia="(min-width: 500px)"></GridColumn>
<GridColumn TextAlign="TextAlign.Left" Field=@nameof(SRFList.Gender) HeaderText="Gender" HideAtMedia="(min-width: 500px)"></GridColumn>
<GridColumn TextAlign="TextAlign.Left" Field=@nameof(SRFList.StyleNo) HeaderText="StyleNo" HideAtMedia="(min-width: 500px)"></GridColumn>
<GridColumn TextAlign="TextAlign.Left" Field=@nameof(SRFList.Season) HeaderText="Season" HideAtMedia="(min-width: 500px)">
<Template>
@{
var StrSeason = (context as SRFList);
if (StrSeason.Season == "Spring")
{
<div>
<span class="springcolor">@StrSeason.Season</span>
</div>
}
else if (StrSeason.Season == "Winter")
{
<div>
<span class="wintercolor">@StrSeason.Season</span>
</div>
}
else
{
<div>
<span class="autumncolor">@StrSeason.Season</span>
</div>
}
}
</Template>
</GridColumn>
<GridColumn TextAlign="TextAlign.Left" Field=@nameof(SRFList.RefNo) HeaderText="REfNo" HideAtMedia="(min-width: 500px)"></GridColumn>
<GridColumn TextAlign="TextAlign.Left" Field=@nameof(SRFList.SizeClass) HeaderText="SizeClass" HideAtMedia="(min-width: 500px)">
<Template>
@{
var StrSizeClass = (context as SRFList);
if (StrSizeClass.SizeClass == "High")
{
<div>
<span class="highcolor">@StrSizeClass.SizeClass</span>
</div>
}
else if (StrSizeClass.SizeClass == "First")
{
<div>
<span class="wintercolor">@StrSizeClass.SizeClass</span>
</div>
}
else
{
<div>
<span class="autumncolor">@StrSizeClass.SizeClass</span>
</div>
}
}
</Template>
</GridColumn>
<GridColumn TextAlign="TextAlign.Left" Field=@nameof(SRFList.Collection) HeaderText="Collection" HideAtMedia="(min-width: 500px)"></GridColumn>
</GridColumns>
</SfGrid>
</div>
|
<style>
/*to change the background color of detail grid rows*/
.e-detailrow .e-grid .e-row,
/*to change the background color of detail grid header*/
.e-detailrow .e-grid th {
background-color: red;
}
</style>
|
