DataGrid S
Hello
I used the Syncfusion DataGrid component. Is it possible for the appearance of the DataGrid in both dark and light themes to be as shown in the attached images?
Thank you.
Hi
Sarah,
Greetings from Syncfusion Support.
Based on your query, it seems that you want to display the DataGrid in both
light and dark themes. In the provided sample, we use a dropdown to switch
between themes dynamically at runtime. The dropdown is bound to the theme name,
and when the user selects a theme, the ValueChange event triggers. In this
event, we reload the application with the new theme value included in the URL,
so that App.razor can read it and apply the correct Syncfusion CSS file. This
ensures that the entire application, including the DataGrid, switches to the
selected light or dark theme. Please refer to the code snippet and sample for
more details.
|
App.razor @using Microsoft.AspNetCore.Components; @using Microsoft.AspNetCore.WebUtilities; @inject NavigationManager UrlHelper;
@{
var uri = UrlHelper.ToAbsoluteUri(UrlHelper.Uri); QueryHelpers.ParseQuery(uri.Query).TryGetValue("theme", out var theme); var themeName = (string)theme; themeName = themeName==null ? "bootstrap5" : themeName;
}
<!DOCTYPE html> <html lang="en">
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <base rel='nofollow' href="/" /> <ResourcePreloader /> <link rel="stylesheet" rel='nofollow' href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" /> <link rel="stylesheet" rel='nofollow' href="@Assets["app.css"]" /> <link rel="stylesheet" rel='nofollow' href="@Assets["BlazorApp5.styles.css"]" /> <link rel='nofollow' href=@("_content/Syncfusion.Blazor.Themes/" + themeName + ".css") rel="stylesheet" /> <ImportMap /> <link rel="icon" type="image/png" rel='nofollow' href="favicon.png" /> <HeadOutlet @rendermode="InteractiveServer" /> </head>
<body> <Routes @rendermode="InteractiveServer" /> <ReconnectModal /> <script src="@Assets["_framework/blazor.web.js"]"></script> <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script> </body>
</html> |
|
DataGrid
<SfDropDownList TItem="ThemeDetails" Width="300px" TValue="string" @bind-Value="themeName" DataSource="@Themes"> <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> <DropDownListEvents TItem="ThemeDetails" TValue="string" ValueChange="OnThemeChange"></DropDownListEvents> </SfDropDownList>
<br/> <br/> <br/> <h2>DataGrid</h2>
<SfGrid DataSource="@Orders" AllowPaging="true"> <GridColumns> <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> </GridColumns> </SfGrid>
@code {
public List<Order> Orders { get; set; }
protected override void OnInitialized() { var theme = GetThemeName(); themeName = theme == null ? "bootstrap5" : theme;
}
public class Order { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; set; } } private string themeName; public class ThemeDetails { public string ID { get; set; } public string Text { get; set; } } private List<ThemeDetails> Themes = new List<ThemeDetails>() { new ThemeDetails(){ ID = "bootstrap5", Text = "Bootstrap 5" }, new ThemeDetails(){ ID = "bootstrap5-dark", Text = "Bootstrap 5 Dark" } }; public void OnThemeChange(ChangeEventArgs<string, ThemeDetails> args) { var theme = GetThemeName(); if (theme != args.ItemData.ID) { UrlHelper.NavigateTo(GetUri(args.ItemData.ID), true); } } private string GetThemeName() { var uri = UrlHelper.ToAbsoluteUri(UrlHelper.Uri); QueryHelpers.ParseQuery(uri.Query).TryGetValue("theme", out var themeValues); var theme = (string)themeValues; return theme==null ? "bootstrap5" : theme; } private string GetUri(string themeName) { var uri = UrlHelper.ToAbsoluteUri(UrlHelper.Uri); return uri.AbsolutePath + "?theme=" + themeName; }
}
|
Sample:
Check the attachment.
UG : Blazor
themes | Bootstrap, Fluent, Tailwind, Material | Syncfusion
Blazor
themes | Bootstrap, Fluent, Tailwind, Material | Syncfusion
Video demo:
Please get back to us if you need further assistance.
Regards,
Naveen
Attachment: BlazorApp5_aa4c1c08.zip
