How to extend Grid Lines from headers down to all data rows in Blazor DataGrid?
I have created a repro for this question:
https://blazorplayground.syncfusion.com/VtrItQCsZWXbSdbb
- My grid has a structure where the main columns are “Models”, “RowType” (Time, Value are row types), and then a set of date columns (each date has two sub-columns: AM and PM).
- By default, Syncfusion draws nice, faint grid lines between all column headers, including the AM/PM subcolumns.
- I want to extend/ mimic these grid lines between the main columns:
- After the model name column (before the RowType column starts)
- After the “RowType” column (before the date columns start)
- Between each date column (but not between the AM/PM subcolumns)
- I also use custom row background colors, but I want the grid lines to remain visible and consistent with the header’s faint and subtle grid lines.
- I want those grid lines in the header to extend down to all data rows or somehow mimic them.
Is there a way to achieve this using Syncfusion’s built-in features or using some custom css?
I'd appreciate any help! Thanks!
Hi
Ashish Khanal,
Greetings from Syncfusion,
To achieve the desired effect of extending grid lines from headers down to all data rows in a DataGrid, you can use the RowDataBound event to add a class as described below to meet your requirements. Kindly refer to the modified code snippet and sample provided for your reference.
|
<style> .time-row { background-color: #e8e8e8; } .value-row { background-color: #87ceeb; }
.e-grid .e-gridcontent .e-content .e-row .e-rowcell.CustomLine { border-right: 3px solid green; } </style>
{ var row = args.Data; if (args.Column.Field == nameof(GridRowViewModel.Model)) { args.Cell.AddClass(new string[] { "CustomLine" }); if (row.GroupPosition == GroupPosition.First) { args.Cell.AddStyle(new[] { "border-bottom: none" }); } else { args.Cell.AddStyle(new[] { "border-top: none", "pointer-events: none" }); } args.Cell.AddStyle(new[] { $"background-color: {row.ModelColor}", $"color: {row.ModelTextColor}", "font-weight: bold" }); }
if (args.Column.Field == nameof(GridRowViewModel.RowType)) { args.Cell.AddClass(new string[] { "CustomLine" }); }
if (args.Column.HeaderText == "PM" && args.Column.Index==6) { args.Cell.AddClass(new string[] { "CustomLine" }); } }
|
Modified sample:
https://blazorplayground.syncfusion.com/embed/VNVotwWMKwXPYehF?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5
Reference:
https://blazor.syncfusion.com/documentation/datagrid/style-and-appearance/style-and-appearance
https://blazor.syncfusion.com/documentation/datagrid/row#customize-row-styles
https://blazor.syncfusion.com/documentation/datagrid/column-headers#customize-header-text-styles
Regards,
Prathap Senthil
Thank you so much for the response, Prathap!
I'm looking at the output and see few issues:
- The custom line breaks off at row boundary (I have circled them to show what I mean) which I don't want.
- It doesn't have the same thickness and subtle color as that of the grid line in the column headers. Can you mimic the same color and width of grid line on the headers in the custom line as well?
- The custom line appears slightly left from the headers grid line. This creates an unpleasant gap. Can you put this new custom line on the same position where the header grid line sits?
Could you please fix those issues to make the new custom line seamless with the header grid line, so it looks as if header grid lines extended through the data rows?
Hello @syncfusion team,
Could someone please help me with this?
Please read my above response to know more. Essentially, I just want the header grid line to extend to all data rows as shown in screenshot below:
Thanks for the update ,
Based on your requirement, we have resolved the issue using CSS customization
by modifying the color of the specific column header line through
the CustomAttributes property to achieve your desired result. Kindly
refer to the code snippet and sample below for your reference.
Note: If you need further customization, you can use the CSS below to adjust the style according to your needs.
|
<style> .time-row { background-color: #e8e8e8; } .value-row { background-color: #87ceeb; }
.e-grid .e-gridcontent .e-content .e-row .e-rowcell.CustomLine { border-right: 3px solid green;
}
.e-grid .e-headercell.customcss{ border-right: 3px solid green; border-bottom-color: green; }
.e-grid .e-gridheader{ border-bottom-width: 0px; }
.e-grid .e-headercell.e-laststackcell.customcss { border-right:unset; }
.e-grid .e-headercell.e-lastcell.customcss { border-right: unset; }
.e-grid .e-gridcontent .e-content .e-row .e-rowcell { border-top-width: 0px; border-bottom-width:0px; }
</style>
<div> <SfGrid DataSource="@gridData" AllowFiltering="true" AllowSelection="false" EnableHover="false"> <GridEvents RowDataBound="RowDataBoundHandler" QueryCellInfo="QueryCellInfoHandler" TValue="GridRowViewModel"></GridEvents> <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings> <GridColumns> <GridColumn HeaderText="My Grid" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "customcss" }})" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"> <GridColumns> <GridColumn Field="Model" HeaderText="" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "customcss" }})" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" IsPrimaryKey="true" Width="120px" AllowFiltering="true"> <Template> @{ var row = context as GridRowViewModel; } @if (row?.GroupPosition == GroupPosition.First) { <span>@row?.Model</span> } </Template> </GridColumn> <GridColumn Field="RowType" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "customcss" }})" HeaderText="" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="80px" AllowFiltering="false"></GridColumn> </GridColumns> </GridColumn> @foreach (var date in dateHeaders) { <GridColumn HeaderText="@date.ToString("MM/dd/yyyy")" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "customcss" }})" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"> <GridColumns> <GridColumn HeaderText="AM" Width="60px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" AllowFiltering="false"> <Template> @{ var row = context as GridRowViewModel; AmorPMDetails? am = null; if (row != null && row.DayDetails.TryGetValue(date, out var day)) { am = day.Am; } var cellValue = am?.GetCellDisplayValue(row?.RowType) ?? ""; } <span>@cellValue</span> </Template> </GridColumn> <GridColumn HeaderText="PM" Width="60px" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "customcss" }})" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" AllowFiltering="false"> <Template> @{ var row = context as GridRowViewModel; AmorPMDetails? pm = null; if (row != null && row.DayDetails.TryGetValue(date, out var day)) { pm = day.Pm; } var cellValue = pm?.GetCellDisplayValue(row?.RowType) ?? ""; } <span>@cellValue</span> </Template> </GridColumn> </GridColumns> </GridColumn> } </GridColumns> </SfGrid> </div>
|
