@using Syncfusion.Blazor.Grids
<style>
.detail-grid {
max-width: 900px;
margin: 2rem auto;
}
.export-bar {
display: flex;
justify-content: flex-end;
margin-bottom: 0.5rem;
}
.detail-grid .time-row {
background-color: #e8e8e8;
}
.detail-grid .value-row {
background-color: #87ceeb;
}
</style>
<div class="detail-grid">
<div class="export-bar">
<SfButton IsPrimary="true" OnClick="ExportAsync">Export to Excel</SfButton>
</div>
<SfGrid DataSource="@gridData" @ref="Grid" AllowFiltering="true" EnableHover="false" AllowExcelExport="true">
<GridEvents RowDataBound="RowDataBoundHandler"
QueryCellInfo="QueryCellInfoHandler"
ExcelQueryCellInfoEvent="ExcelExportQueryCellInfoHandler"
TValue="GridRowViewModelV2"></GridEvents>
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>
<GridColumns>
<GridColumn Field=@nameof(GridRowViewModelV2.Id) IsPrimaryKey="true" Visible="false" />
<GridColumn HeaderText="My Grid" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center">
<GridColumns>
<GridColumn Field="Model" HeaderText="" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" Width="120px" AllowFiltering="true">
<Template>
@{
var row = context as GridRowViewModelV2;
}
@if (row?.GroupPosition == GroupPosition.First)
{
<span>@row?.Model</span>
}
@if (row?.GroupPosition == GroupPosition.Last && row.UpdatedDate is not null)
{
<span>Updated: @row.UpdatedDate.Value.ToString("G")</span>
}
</Template>
</GridColumn>
<GridColumn Field="RowType" HeaderText="" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="80px" AllowFiltering="false"></GridColumn>
</GridColumns>
</GridColumn>
@for (int i = 0; i < dateHeaders.Count; i++)
{
var day = dateHeaders[i];
var amField = $"Day{i}AM";
var pmField = $"Day{i}PM";
var dayIndex = i;
<GridColumn HeaderText="@day.ToString("MM/dd/yyyy")" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center">
<GridColumns>
<GridColumn Field="@amField" HeaderText="AM" Width="60px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" AllowFiltering="false">
<Template>
@{
var row = context as GridRowViewModelV2;
var cellValue = row?.GetCellDisplayValue(dayIndex, "AM") ?? "";
}
<span>@cellValue</span>
</Template>
</GridColumn>
<GridColumn Field="@pmField" HeaderText="PM" Width="60px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" AllowFiltering="false">
<Template>
@{
var row = context as GridRowViewModelV2;
var cellValue = row?.GetCellDisplayValue(dayIndex, "PM") ?? "";
}
<span>@cellValue</span>
</Template>
</GridColumn>
</GridColumns>
</GridColumn>
}
</GridColumns>
</SfGrid>
</div>
@code {
private List<GridRowViewModelV2> gridData = new();
private List<DateTime> dateHeaders = new();
SfGrid<GridRowViewModelV2>? Grid;
private Dictionary<string, (string, string, int)> modelDisplayData = new()
{
{ "Model1Ord2", ("#FFDDDD", "black", 2) },
{ "Model2Ord1", ("#DDFFDD", "black", 1) },
{ "Model3Ord4", ("#DDFF66", "black", 4) },
{ "Model4Ord3", ("#DDEEFF", "black", 3) }
};
protected override Task OnInitializedAsync()
{
// Explicitly define the two dates for Day0 and Day1
dateHeaders = new List<DateTime>
{
new DateTime(2025, 7, 10),
new DateTime(2025, 7, 11)
};
// Directly construct the grid data
gridData = new List<GridRowViewModelV2>
{
new()
{
Id = 1,
Model = "Model1Ord2",
ModelColor = "#FFDDDD",
ModelTextColor = "black",
RowType = RowType.Time,
GroupPosition = GroupPosition.First,
SortOrder = 2,
Day0 = dateHeaders[0],
Day0AM = 8,
Day0PM = 12,
Day1 = dateHeaders[1],
Day1AM = 6,
Day1PM = 12,
UpdatedDate = new DateTime(2025, 7, 11, 10, 0, 0)
},
new()
{
Id = 2,
Model = "Model1Ord2",
ModelColor = "#FFDDDD",
ModelTextColor = "black",
RowType = RowType.Value,
GroupPosition = GroupPosition.Last,
SortOrder = 2,
Day0 = dateHeaders[0],
Day0AM = 123,
Day0PM = 45,
Day1 = dateHeaders[1],
Day1AM = 17,
Day1PM = 87,
UpdatedDate = new DateTime(2025, 7, 11, 10, 0, 0)
},
new()
{
Id = 3,
Model = "Model2Ord1",
ModelColor = "#DDFFDD",
ModelTextColor = "black",
RowType = RowType.Time,
GroupPosition = GroupPosition.First,
SortOrder = 1,
Day0 = dateHeaders[0],
Day0AM = 9,
Day0PM = 14,
Day1 = dateHeaders[1],
Day1AM = 15,
Day1PM = 17,
UpdatedDate = null
},
new()
{
Id = 4,
Model = "Model2Ord1",
ModelColor = "#DDFFDD",
ModelTextColor = "black",
RowType = RowType.Value,
GroupPosition = GroupPosition.Last,
SortOrder = 1,
Day0 = dateHeaders[0],
Day0AM = 45,
Day0PM = 78,
Day1 = dateHeaders[1],
Day1AM = 45,
Day1PM = 98,
UpdatedDate = null
}
};
return Task.CompletedTask;
}
private async Task ExportAsync()
{
try
{
if (Grid is null) return;
await Grid.ShowSpinnerAsync();
var exportProps = new Syncfusion.Blazor.Grids.ExcelExportProperties
{
FileName = "BorderIssueRepro.xlsx",
Theme = new Syncfusion.Blazor.Grids.ExcelTheme
{
Header = new Syncfusion.Blazor.Grids.ExcelStyle
{
FontName = "Segoe UI",
FontColor = "#333333",
FontSize = 12,
Bold = true,
BackColor = "#e8e8e8"
},
Record = new Syncfusion.Blazor.Grids.ExcelStyle
{
FontName = "Segoe UI",
FontSize = 11
}
}
};
await Grid.ExportToExcelAsync(exportProps);
await Grid.HideSpinnerAsync();
}
catch (Exception ex)
{
throw;
}
}
public void RowDataBoundHandler(RowDataBoundEventArgs<GridRowViewModelV2> args)
{
var row = args.Data;
var cssClass = row.GetRowCssClass();
args.Row.AddClass(new[] { cssClass });
}
public void QueryCellInfoHandler(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs<GridRowViewModelV2> args)
{
var row = args.Data;
if (args.Column.Field == nameof(GridRowViewModelV2.Model))
{
if (row.GroupPosition == GroupPosition.First)
{
args.Cell.AddStyle(new[] { "border-bottom: none", "font-weight: bold" });
}
else
{
args.Cell.AddStyle(new[] { "border-top: none", "pointer-events: none" });
}
args.Cell.AddStyle(new[] { $"background-color: {row.ModelColor}", $"color: {row.ModelTextColor}" });
}
}
public void ExcelExportQueryCellInfoHandler(Syncfusion.Blazor.Grids.ExcelQueryCellInfoEventArgs<GridRowViewModelV2> args)
{
var row = args.Data;
var style = args.Style;
// Model column: color and bold, try to remove border between time/value rows
if (args.Column.Field == nameof(GridRowViewModelV2.Model))
{
style.BackColor = row.ModelColor;
style.FontColor = row.ModelTextColor;
style.Bold = true;
if (row.GroupPosition == GroupPosition.First)
{
style.Borders.Bottom.LineStyle = Syncfusion.ExcelExport.LineStyle.None;
}
else if (row.GroupPosition == GroupPosition.Last)
{
style.Borders.Top.LineStyle = Syncfusion.ExcelExport.LineStyle.None;
}
}
// RowType column: bold
if (args.Column.Field == nameof(GridRowViewModelV2.RowType))
{
style.Bold = true;
}
// Data columns: number format
if (args.Column.Field.EndsWith("AM") || args.Column.Field.EndsWith("PM"))
{
style.NumberFormat = "#,##0";
}
}
public record GridRowViewModelV2
{
public int Id { get; init; }
public string Model { get; init; } = default!;
public string ModelColor { get; init; } = default!;
public string ModelTextColor { get; init; } = default!;
public RowType RowType { get; init; }
public GroupPosition GroupPosition { get; init; }
public int SortOrder { get; init; }
public DateTime Day0 { get; set; }
public double? Day0AM { get; set; }
public double? Day0PM { get; set; }
public DateTime Day1 { get; set; }
public double? Day1AM { get; set; }
public double? Day1PM { get; set; }
public DateTime? UpdatedDate { get; init; }
public DateTime GetDay(int index) => index switch
{
0 => Day0,
1 => Day1,
_ => throw new ArgumentOutOfRangeException(nameof(index))
};
public void SetDay(int index, DateTime value)
{
switch (index)
{
case 0: Day0 = value; break;
case 1: Day1 = value; break;
default: throw new ArgumentOutOfRangeException(nameof(index));
}
}
public double? GetAM(int index) => index switch
{
0 => Day0AM,
1 => Day1AM,
_ => throw new ArgumentOutOfRangeException(nameof(index))
};
public void SetAM(int index, double? value)
{
switch (index)
{
case 0: Day0AM = value; break;
case 1: Day1AM = value; break;
default: throw new ArgumentOutOfRangeException(nameof(index));
}
}
public double? GetPM(int index) => index switch
{
0 => Day0PM,
1 => Day1PM,
_ => throw new ArgumentOutOfRangeException(nameof(index))
};
public void SetPM(int index, double? value)
{
switch (index)
{
case 0: Day0PM = value; break;
case 1: Day1PM = value; break;
default: throw new ArgumentOutOfRangeException(nameof(index));
}
}
public string GetCellDisplayValue(int dayIndex, string amOrPm)
{
if (dayIndex < 0 || dayIndex > 1) return "";
var value = amOrPm == "AM" ? GetAM(dayIndex) : GetPM(dayIndex);
return RowType switch
{
RowType.Time => value?.ToString() ?? "",
RowType.Value => value?.ToString("N0") ?? "",
_ => ""
};
}
public string GetRowCssClass() => RowType switch
{
RowType.Time => "time-row",
RowType.Value => "value-row",
_ => string.Empty
};
}
public enum GroupPosition { First, Last }
public enum RowType { Time, Value }
}
