diff --git a/blazor/datagrid/style-and-appearance/style-and-appearance.md b/blazor/datagrid/style-and-appearance/style-and-appearance.md index ee2bf3c937..b08974cbd7 100644 --- a/blazor/datagrid/style-and-appearance/style-and-appearance.md +++ b/blazor/datagrid/style-and-appearance/style-and-appearance.md @@ -9,35 +9,269 @@ documentation: ug # Style and appearance in Blazor DataGrid -The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) supports visual customization using CSS and theme-based styling. Styles can be applied to various elements to match the application's design. Styling options are available for: +The Blazor Data Grid provides comprehensive styling and appearance customization capabilities to align grid designs with application requirements. Built-in themes enable rapid implementation, CSS customization allows visual element adjustment, and theme-based styling creates consistent user experiences. + +## Built-in themes + +The Data Grid component provides multiple themes aligned with industry-standard design systems, available in both light and dark variants. Available themes include: + +| Theme | Style Sheet Name | +|------------------------------|------------------------------------------| +| Tailwind 3.4 | tailwind3.css / tailwind3.scss | +| Tailwind 3.4 Dark | tailwind3-dark.css / tailwind3-dark.scss | +| Bootstrap 5.3 | bootstrap5.3.css / bootstrap5.3.scss | +| Bootstrap 5.3 Dark | bootstrap5.3-dark.css / bootstrap5.3-dark.scss | +| Fluent 2 | fluent2.css / fluent2.scss | +| Fluent 2 Dark | fluent2-dark.css / fluent2-dark.scss | +| Material 3 | material3.css / material3.scss | +| Material 3 Dark | material3-dark.css / material3-dark.scss | +| Bootstrap 5 | bootstrap5.css / bootstrap5.scss | +| Bootstrap 5 Dark | bootstrap5-dark.css / bootstrap5-dark.scss | +| Fluent | fluent.css / fluent.scss | +| Fluent Dark | fluent-dark.css / fluent-dark.scss | +| Google's Material | material.css / material.scss | +| Google's Material Dark | material-dark.css / material-dark.scss | +| Tailwind CSS | tailwind.css / tailwind.scss | +| Tailwind Dark CSS | tailwind-dark.css / tailwind-dark.scss | +| Microsoft Office Fabric | fabric.css / fabric.scss | +| Microsoft Office Fabric Dark| fabric-dark.css / fabric-dark.scss | +| High Contrast | highcontrast.css / highcontrast.scss | + +## Size modes + +The Data Grid component provides two size modes designed for different interaction contexts and device types: + +- **Normal mode** (default) — Standard sizing configured for mouse and keyboard interactions. +- **Touch mode** (bigger) — Enlarged elements with increased padding, font sizes, and touch targets for touch-based interaction and improved accessibility. Apply the `e-bigger` CSS class to the `` element to enable this mode. -- **DataGrid root element:** Defines the overall appearance of the grid container. -- **Alternate rows with frozen columns:** Applies styles to alternate rows when frozen columns are enabled. -- **Grid lines:** Controls the color and visibility of horizontal and vertical lines between cells. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -**Override Default Styles:** +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + + + +
+ + + + + + + + + + +
+ +@code +{ + private SfGrid Grid; + private List Orders { get; set; } + private string buttonContent = "Normal Mode"; + private bool isBiggerMode = false; -Default styles such as **colors**, **typography**, **spacing**, and **borders** can be customized using CSS. Use browser developer tools to inspect the rendered HTML and identify relevant selectors. Where possible, use CSS variables or theme tokens to maintain consistency across components. + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } -```css -.e-grid .e-headercell { - background-color: #333; /* Override the header background color */ - color: #fff; + private void ChangeMode() + { + isBiggerMode = !isBiggerMode; + buttonContent = isBiggerMode ? "Touch Mode" : "Normal Mode"; + } } -``` -Properties like **background-color**, **color**, **font-family**, and **padding** can be changed to match the grid layout design and improve visual consistency. +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +internal sealed class OrderData +{ + private static readonly List Data = new(); + public OrderData(int orderId, string customerId, double freight, string shipCity) + { + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + ShipCity = shipCity; + } + + internal static List GetAllRecords() + { + if (Data.Count == 0) + { + Data.Add(new OrderData(10248, "VINET", 32.38, "Reims")); + Data.Add(new OrderData(10249, "TOMSP", 11.61, "Münster")); + Data.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro")); + Data.Add(new OrderData(10251, "VICTE", 41.34, "Lyon")); + Data.Add(new OrderData(10252, "SUPRD", 51.30, "Charleroi")); + Data.Add(new OrderData(10253, "CHOPS", 58.17, "Bern")); + Data.Add(new OrderData(10254, "RICSU", 22.98, "Genève")); + Data.Add(new OrderData(10255, "WELLI", 13.97, "San Cristóbal")); + Data.Add(new OrderData(10256, "HILAA", 81.91, "Graz")); + } + + return Data; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrdtwBVrzUSAuPt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +## Theme customization + +The Blazor Data Grid provides flexible theme customization options to align control appearance with application design requirements. Built-in themes can be customized by overriding default CSS variables or by creating completely customized themes using Syncfusion Theme Studio. + +### Default CSS override + +The Blazor Data Grid themes use CSS variables with the unified `–sf` naming convention. This ensures visual consistency, straightforward customization, and global updates. Centralized variables allow quick adjustments to **colors**, **backgrounds**, and **borders** across the grid. + +#### Material 3 theme color variables + +The **Material 3** theme applies scalable CSS custom properties to maintain consistency within the Blazor Data Grid. Variables are designed for straightforward theming and responsive behavior. + +| Name | Purpose | +|------|---------| +| `--e-font-name` | Specifies the default font family applied across the DataGrid | +| `--color-sf-surface` | Controls base surface styling for UI elements | +| `--color-sf-on-surface` | Defines text appearance on surface elements | +| `--color-sf-primary-container` | Applies background styling for active or highlighted row states | +| `--color-sf-outline-variant` | Defines border and separator styling | + +#### Bootstrap 5.3 theme color variables + +The **Bootstrap 5.3** theme extends Bootstrap's framework with CSS custom properties for the Data Grid. + +| Name | Purpose | +|------|---------| +| `--e-font-name` | Specifies the default font family used across the DataGrid | +| `--color-sf-content-bg-color-alt1` | Controls the background of the DataGrid header | +| `--color-sf-content-bg-color` | Controls the background of the DataGrid content | +| `--color-sf-table-bg-color-hover` | Defines the background styling for selected rows during hover interaction | +| `--color-sf-content-bg-color-hover` | Defines background behavior when primary elements are hovered | +| `--color-sf-primary` | Defines the main theme styling used across components | +| `--color-sf-primary-light` | Provides a softer variation of the primary theme for backgrounds | +| `--color-sf-border-light` | Specifies styling for light borders and separators | + +#### Tailwind 3 theme color variables + +The **Tailwind 3** theme uses utility-first CSS custom properties to deliver a **flexible**, **modern design system**. + +| Name | Purpose | +|------|---------| +| `--e-font-name` | Specifies the default font family used across the UI | +| `--color-sf-content-bg-color` | Controls the main background of the application area | +| `--color-sf-table-bg-color-hover` | Defines background behavior during hover interaction | +| `--color-sf-content-bg-color-hover` | Defines the background color for pager during hover interaction | +| `--color-sf-primary` | Defines the main theme color used across components | +| `--color-sf-border-light` | Defines the border color used across the component | + +#### Fluent 2 theme color variables + +The **Fluent 2** theme leverages modern CSS custom properties to provide a clean and consistent design aligned with Fluent UI principles. + +| Name | Purpose | +|------|---------| +| `--e-font-name` | Specifies the default font family used across the DataGrid | +| `--color-sf-content-bg-color-alt1` | Controls the main background of the DataGrid | +| `--color-sf-table-bg-color-hover` | Defines the background styling for selected rows during hover interaction | +| `--color-sf-content-bg-color-hover` | Defines background behavior when primary elements are hovered | +| `--color-sf-primary` | Defines the main theme styling used across components | +| `--color-sf-border-light` | Specifies styling for light borders and separators | +| `--color-sf-border-alt` | Defines alternate border styling for DataGrid elements | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -![Change header background](../images/style-and-appearance/header-background.webp) +@using Syncfusion.Blazor.Grids -**Using Theme Studio:** + + + + + + + + + + -Theme Studio provides a unified approach to style all components, including the Blazor DataGrid. + -1. Open the [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material3). -2. Select **Grid** in the left panel. -3. Customize colors, typography, spacing, and other visual tokens. -4. Download the generated CSS and include it in the Blazor project’s site stylesheet or theme bundle. +@code { + private SfGrid Grid; + private List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +internal sealed class OrderData +{ + private static readonly List Data = new(); + public OrderData(int orderId, string customerId, double freight, string shipCity) + { + OrderID = orderId; + CustomerID = customerId; + Freight = freight; + ShipCity = shipCity; + } + + internal static List GetAllRecords() + { + if (Data.Count == 0) + { + Data.Add(new OrderData(10248, "VINET", 32.38, "Reims")); + Data.Add(new OrderData(10249, "TOMSP", 11.61, "Münster")); + Data.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro")); + Data.Add(new OrderData(10251, "VICTE", 41.34, "Lyon")); + Data.Add(new OrderData(10252, "SUPRD", 51.30, "Charleroi")); + Data.Add(new OrderData(10253, "CHOPS", 58.17, "Bern")); + Data.Add(new OrderData(10254, "RICSU", 22.98, "Genève")); + Data.Add(new OrderData(10255, "WELLI", 13.97, "San Cristóbal")); + Data.Add(new OrderData(10256, "HILAA", 81.91, "Graz")); + } + + return Data; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVdNGMQfqinyBZn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Customize the DataGrid root element @@ -346,4 +580,25 @@ internal sealed class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLxNmjWrwjAiIqF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLxNmjWrwjAiIqF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} + +### Using Theme Studio + +Syncfusion Theme Studio provides a unified approach to create custom themes for all controls, including the Blazor Data Grid. This advanced method defines a comprehensive set of styles to achieve consistent appearance across the application. + +1. Navigate to the Syncfusion® [Theme Studio]((https://blazor.syncfusion.com/themestudio/?theme=material3)). +2. Select the **Grid** control from the left panel. +3. Customize **colors**, **typography**, **spacing**, and other **visual tokens**. +4. Download the generated CSS file and integrate it into the Blazor project's site stylesheet or theme bundle. + +## See Also + +- [Customize Aggregate](./aggregate.md) +- [Customize Editing](./editing.md) +- [Customize Filtering](./filtering.md) +- [Customize Grouping](./grouping.md) +- [Customize Header](./header.md) +- [Customize Paging](./paging.md) +- [Customize Selection](./selection.md) +- [Customize Sorting](./sorting.md) +- [Customize Toolbar](./toolbar.md)