Forums Home / ComponentOne / Blazor Edition
Posted by: daniel.koffler on 5 April 2023, 6:13 pm EST
daniel.koffler
Posted 5 April 2023, 6:13 pm EST
Hello,
In my FlexGrid I set GridSelectionMode to “RowRange” or “ListBox”. If doing so the property “SelectionStyle” allows me to style selected rows. However I also want to style the cell which is currently focused with a different background color and a border similar to Excel.
Kindly let me know how to do that.
Thank you
Daniel
ankit.kumar
Posted 9 April 2023, 9:32 pm EST - Updated 9 April 2023, 9:37 pm EST
Hi Daniel,
For your use case, you need to override the PrepareCellStyle() method of the GridCellFactory Class, check for the Selected Row and then apply the background color to the Cells.
You could use the OnCellTapped Event to get the Selected Row and the Selection Style Property to set the style for the Cell.
Kindly refer to the following code snippet and the attached sample:
<FlexGrid ItemsSource="forecasts" SelectionMode="GridSelectionMode.Cell" CellFactory="cf"
SelectionStyle="@("background-color: yellow; border: 3px solid green;")" CellTapped="OnCellTapped"></FlexGrid>
public void OnCellTapped(object sender, GridInputEventArgs e)
{
if (e.CellType == GridCellType.Cell)
{
SelectedRow = e.CellRange.Row;
}
else
{
SelectedRow = -1;
}
}
public class CustomCellFactory : GridCellFactory
{
public override void PrepareCellStyle(GridCellType cellType, GridCellRange range, C1Style style, C1Thickness internalBorders)
{
if (range.Row == SelectedRow && cellType == GridCellType.Cell)
{
style.BackgroundColor = backgroundColor;
}
base.PrepareCellStyle(cellType, range, style, internalBorders);
}
}
In the sample for demonstration, the row has background color “pink” and the selected cell has background color “yellow” and border “3px solid green” similar to the Microsoft Excel.
References:
Cell Tapped Property: https://www.grapecity.com/componentone/docs/blazor/online-blazor/C1.Blazor.Grid~C1.Blazor.Grid.FlexGrid~CellTapped.html
PrepareCellStyle method: https://www.grapecity.com/componentone/docs/blazor/online-blazor/C1.Blazor.Grid~C1.Blazor.Grid.GridCellFactory~PrepareCellStyle(GridCellType,GridCellRange,C1Style,C1Thickness).html
Regards,
Ankit
Sample:
FlexGrid_RowSelection.zip
daniel.koffler
Posted 11 April 2023, 2:33 am EST - Updated 11 April 2023, 2:38 am EST
Hello,
thanks for the reply. However border styling does not work as expected. If setting the border thickness to 1px (black) only the left and top border is visible. (see Screenshot) and left and bottom border is missing.
Thank you
Daniel
ankit.kumar
Posted 12 April 2023, 6:09 pm EST
Hi Daniel,
By default, there is a margin of -0.5px applied to the flex grid cells. As a result, when the gridlines are visible, the gridlines overlap with the border of the cells and therefore, the borders are not shown.
You could simply set the margin of the flex grid cells to 0px and it will work fine. Kindly use the following code snippet to set the margin:
.flexgrid-cell {
margin: 0px !important;
}Please let us know if you face any issues.
Regards,
Ankit
daniel.koffler
Posted 14 April 2023, 11:36 pm EST
Sorry to bother you again with this issue, however setting the margin to 0px increases the border width for the overall grid and has some side effects for the row header border widths (vertical borders there are slightly narrower).
Do you have a running example where border with is 1px in the grid and selected cell has a border with of 1 px also.
daniel.koffler
Posted 16 April 2023, 5:00 am EST
Also I would like to add that the proposed solution (OnCellTapped) does not work for keyboard-based cell selection.
ankit.kumar
Posted 17 April 2023, 11:33 pm EST - Updated 17 April 2023, 11:38 pm EST
Hi Daniel,
Due to the CSS Conflict with the border of the other cells, only the top and left borders are shown for some cells. You could simply add a z-index to the SelectionStyle and it will resolve the issue.
<FlexGrid @ref="_grid" ItemsSource="forecasts" SelectionMode="GridSelectionMode.Cell" CellFactory="cf"
Style="@("border: 1px solid black;")"
SelectionStyle="@("background-color: yellow; border: 1px solid black; z-index: 9999")"
SelectionChanged="OnSelectionChanged"
GridLinesVisibility="GridLinesVisibility.All">
</FlexGrid>
Similarly, if you apply a border to the FlexGrid, you could handle the cases when the active cell is the corner cell and set the border-top/border-left/border-bottom width to 0px inside the PrepareCellStyle Property.
Lastly, for Keyboard-based Cell Selection, you could use the SelectionChanged Event instead of the CellTapped Event.
Kindly refer to the attached sample and let us know if you face any problems.
Regards,
Ankit
Sample: FlexGrid_RowSelection.zip
daniel.koffler
Posted 18 April 2023, 5:32 pm EST
Great! Works perfectly. Thank you for all your efforts.
That way I now can also style invalid cells with a red border and overcome the missing tooltip functionality.
