diff --git a/App.razor b/App.razor index bf6c773..6fd3ed1 100644 --- a/App.razor +++ b/App.razor @@ -1,11 +1,12 @@ - - + + + Not found -

Sorry, there's nothing at this address.

+

Sorry, there's nothing at this address.

 diff --git a/Data/WeatherForecast.cs b/Data/WeatherForecast.cs index f761d19..7538ecf 100644 --- a/Data/WeatherForecast.cs +++ b/Data/WeatherForecast.cs @@ -1,15 +1,13 @@ -using System; - -namespace GridSample.Data +namespace DataGridGettingStartedSample.Data { public class WeatherForecast { - public DateTime Date { get; set; } + public DateOnly Date { get; set; } public int TemperatureC { get; set; } public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); - public string Summary { get; set; } + public string? Summary { get; set; } } -} +} \ No newline at end of file diff --git a/Data/WeatherForecastService.cs b/Data/WeatherForecastService.cs index 895e209..4b0cfaa 100644 --- a/Data/WeatherForecastService.cs +++ b/Data/WeatherForecastService.cs @@ -1,25 +1,20 @@ -using System; -using System.Linq; -using System.Threading.Tasks; - -namespace GridSample.Data +namespace DataGridGettingStartedSample.Data { public class WeatherForecastService { private static readonly string[] Summaries = new[] { - "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" - }; + "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" + }; - public Task GetForecastAsync(DateTime startDate) + public Task GetForecastAsync(DateOnly startDate) { - var rng = new Random(); return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast { Date = startDate.AddDays(index), - TemperatureC = rng.Next(-20, 55), - Summary = Summaries[rng.Next(Summaries.Length)] + TemperatureC = Random.Shared.Next(-20, 55), + Summary = Summaries[Random.Shared.Next(Summaries.Length)] }).ToArray()); } } -} +} \ No newline at end of file diff --git a/DataGridGettingStartedSample.csproj b/DataGridGettingStartedSample.csproj new file mode 100644 index 0000000..c350a3b --- /dev/null +++ b/DataGridGettingStartedSample.csproj @@ -0,0 +1,14 @@ + + + + net7.0 + enable + enable + + + + + + + + diff --git a/GridSample.sln b/DataGridGettingStartedSample.sln similarity index 52% rename from GridSample.sln rename to DataGridGettingStartedSample.sln index 0476065..0724bc3 100644 --- a/GridSample.sln +++ b/DataGridGettingStartedSample.sln @@ -1,9 +1,9 @@  Microsoft Visual Studio Solution File, Format Version 12.00 -# Visual Studio Version 16 -VisualStudioVersion = 16.0.29424.173 +# Visual Studio Version 17 +VisualStudioVersion = 17.4.33213.308 MinimumVisualStudioVersion = 10.0.40219.1 -Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "GridSample", "GridSample.csproj", "{B524BE08-9CE0-446E-AC1C-60913CFE15D0}" +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DataGridGettingStartedSample", "DataGridGettingStartedSample.csproj", "{BA2DB676-AD79-4B16-9DFD-897E194FDFB3}" EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution @@ -11,15 +11,15 @@ Global Release|Any CPU = Release|Any CPU EndGlobalSection GlobalSection(ProjectConfigurationPlatforms) = postSolution - {B524BE08-9CE0-446E-AC1C-60913CFE15D0}.Debug|Any CPU.ActiveCfg = Debug|Any CPU - {B524BE08-9CE0-446E-AC1C-60913CFE15D0}.Debug|Any CPU.Build.0 = Debug|Any CPU - {B524BE08-9CE0-446E-AC1C-60913CFE15D0}.Release|Any CPU.ActiveCfg = Release|Any CPU - {B524BE08-9CE0-446E-AC1C-60913CFE15D0}.Release|Any CPU.Build.0 = Release|Any CPU + {BA2DB676-AD79-4B16-9DFD-897E194FDFB3}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {BA2DB676-AD79-4B16-9DFD-897E194FDFB3}.Debug|Any CPU.Build.0 = Debug|Any CPU + {BA2DB676-AD79-4B16-9DFD-897E194FDFB3}.Release|Any CPU.ActiveCfg = Release|Any CPU + {BA2DB676-AD79-4B16-9DFD-897E194FDFB3}.Release|Any CPU.Build.0 = Release|Any CPU EndGlobalSection GlobalSection(SolutionProperties) = preSolution HideSolutionNode = FALSE EndGlobalSection GlobalSection(ExtensibilityGlobals) = postSolution - SolutionGuid = {C6FE02CC-AA15-4C37-9034-B2B3928DED3A} + SolutionGuid = {A0C9D82D-A591-4419-A154-53EFF9F2E31A} EndGlobalSection EndGlobal diff --git a/GridSample.csproj b/GridSample.csproj deleted file mode 100644 index 28dacdc..0000000 --- a/GridSample.csproj +++ /dev/null @@ -1,11 +0,0 @@ - - - - netcoreapp3.1 - - - - - - - diff --git a/Pages/Counter.razor b/Pages/Counter.razor index 8641f78..ef23cb3 100644 --- a/Pages/Counter.razor +++ b/Pages/Counter.razor @@ -1,8 +1,10 @@ @page "/counter" +Counter +

Counter

-

Current count: @currentCount

+

Current count: @currentCount

diff --git a/Pages/Error.cshtml b/Pages/Error.cshtml new file mode 100644 index 0000000..e0cffa5 --- /dev/null +++ b/Pages/Error.cshtml @@ -0,0 +1,42 @@ +@page +@model DataGridGettingStartedSample.Pages.ErrorModel + + + + + + + + Error + + + + + +
+
+

Error.

+

An error occurred while processing your request.

+ + @if (Model.ShowRequestId) + { +

+ Request ID: @Model.RequestId +

+ } + +

Development Mode

+

+ Swapping to the Development environment displays detailed information about the error that occurred. +

+

+ The Development environment shouldn't be enabled for deployed applications. + It can result in displaying sensitive information from exceptions to end users. + For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development + and restarting the app. +

+
+
+ + + diff --git a/Pages/Error.cshtml.cs b/Pages/Error.cshtml.cs new file mode 100644 index 0000000..6dbc350 --- /dev/null +++ b/Pages/Error.cshtml.cs @@ -0,0 +1,27 @@ +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc.RazorPages; +using System.Diagnostics; + +namespace DataGridGettingStartedSample.Pages +{ + [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)] + [IgnoreAntiforgeryToken] + public class ErrorModel : PageModel + { + public string? RequestId { get; set; } + + public bool ShowRequestId => !string.IsNullOrEmpty(RequestId); + + private readonly ILogger _logger; + + public ErrorModel(ILogger logger) + { + _logger = logger; + } + + public void OnGet() + { + RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier; + } + } +} \ No newline at end of file diff --git a/Pages/Error.razor b/Pages/Error.razor deleted file mode 100644 index 79929d7..0000000 --- a/Pages/Error.razor +++ /dev/null @@ -1,16 +0,0 @@ -@page "/error" - - -

Error.

-

An error occurred while processing your request.

- -

Development Mode

-

- Swapping to Development environment will display more detailed information about the error that occurred. -

-

- The Development environment shouldn't be enabled for deployed applications. - It can result in displaying sensitive information from exceptions to end users. - For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development - and restarting the app. -

\ No newline at end of file diff --git a/Pages/FetchData.razor b/Pages/FetchData.razor index 3466ead..d4bc43e 100644 --- a/Pages/FetchData.razor +++ b/Pages/FetchData.razor @@ -1,8 +1,9 @@ @page "/fetchdata" - -@using GridSample.Data +@using DataGridGettingStartedSample.Data @inject WeatherForecastService ForecastService +Weather forecast +

Weather forecast

This component demonstrates fetching data from a service.

@@ -37,10 +38,10 @@ else } @code { - private WeatherForecast[] forecasts; + private WeatherForecast[]? forecasts; protected override async Task OnInitializedAsync() { - forecasts = await ForecastService.GetForecastAsync(DateTime.Now); + forecasts = await ForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now)); } } diff --git a/Pages/Index.razor b/Pages/Index.razor index 577dc37..10a9dbb 100644 --- a/Pages/Index.razor +++ b/Pages/Index.razor @@ -1,6 +1,6 @@ @page "/" - @@ -31,19 +31,19 @@ -@code{ +@code { public List Orders { get; set; } protected override void OnInitialized() { Orders = Enumerable.Range(1, 15).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" }) - [new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x) - }).ToList(); + { + OrderID = 1000 + x, + CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" }) + [new Random().Next(5)], + Freight = 2.1 * x, + OrderDate = DateTime.Now.AddDays(-x) + }).ToList(); } public class Order diff --git a/Pages/_Host.cshtml b/Pages/_Host.cshtml index a428f47..833a863 100644 --- a/Pages/_Host.cshtml +++ b/Pages/_Host.cshtml @@ -1,25 +1,24 @@ @page "/" -@namespace GridSample.Pages +@using Microsoft.AspNetCore.Components.Web +@namespace DataGridGettingStartedSample.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers -@{ - Layout = null; -} - GridSample - + + + + + - - - +
diff --git a/Program.cs b/Program.cs index 0b2dfae..3948667 100644 --- a/Program.cs +++ b/Program.cs @@ -1,28 +1,33 @@ -using System; -using System.Collections.Generic; -using System.IO; -using System.Linq; -using System.Threading.Tasks; -using Microsoft.AspNetCore; -using Microsoft.AspNetCore.Hosting; -using Microsoft.Extensions.Configuration; -using Microsoft.Extensions.Hosting; -using Microsoft.Extensions.Logging; - -namespace GridSample +using DataGridGettingStartedSample.Data; +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; +using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorPages(); +builder.Services.AddServerSideBlazor(); +builder.Services.AddSyncfusionBlazor(); +builder.Services.AddSingleton(); + +var app = builder.Build(); + +// Configure the HTTP request pipeline. +if (!app.Environment.IsDevelopment()) { - public class Program - { - public static void Main(string[] args) - { - CreateHostBuilder(args).Build().Run(); - } - - public static IHostBuilder CreateHostBuilder(string[] args) => - Host.CreateDefaultBuilder(args) - .ConfigureWebHostDefaults(webBuilder => - { - webBuilder.UseStartup(); - }); - } + app.UseExceptionHandler("/Error"); + // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. + app.UseHsts(); } + +app.UseHttpsRedirection(); + +app.UseStaticFiles(); + +app.UseRouting(); + +app.MapBlazorHub(); +app.MapFallbackToPage("/_Host"); + +app.Run(); diff --git a/Properties/launchSettings.json b/Properties/launchSettings.json index ff7e766..9a1305b 100644 --- a/Properties/launchSettings.json +++ b/Properties/launchSettings.json @@ -3,22 +3,32 @@ "windowsAuthentication": false, "anonymousAuthentication": true, "iisExpress": { - "applicationUrl": "http://localhost:53441", - "sslPort": 44377 + "applicationUrl": "http://localhost:24022", + "sslPort": 44337 } }, "profiles": { - "IIS Express": { - "commandName": "IISExpress", + "http": { + "commandName": "Project", + "dotnetRunMessages": true, "launchBrowser": true, + "applicationUrl": "http://localhost:5158", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } }, - "GridSample": { + "https": { "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "applicationUrl": "https://localhost:7279;http://localhost:5158", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, + "IIS Express": { + "commandName": "IISExpress", "launchBrowser": true, - "applicationUrl": "https://localhost:5001;http://localhost:5000", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } diff --git a/README.md b/README.md index 46e1244..0f5244f 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,18 @@ # Getting Started With the Blazor DataGrid Component -A quick-start project that helps you create a new Blazor application using Visual Studio 2019 and add the Syncfusion Blazor Data Grid to it. This project contains simple code customizations that can be done to the data grid columns, as well as some important features such as paging, sorting, filtering, and grouping. +This sample explains about how to create a new Blazor application using Visual Studio 2022 and add the Syncfusion Blazor Data Grid to it. This project contains simple code customizations that can be done to the data grid columns, as well as some important features such as paging, sorting, filtering, and grouping. -Documentation: https://blazor.syncfusion.com/documentation/grid/getting-started/ +**Documentation**: https://blazor.syncfusion.com/documentation/datagrid/getting-started -Online examples: https://blazor.syncfusion.com/demos/datagrid/overview/ +**Sample link**: https://blazor.syncfusion.com/demos/datagrid/overview/ -## Project prerequisites +## Prerequisites -Make sure that you have the compatible versions of Visual Studio 2019 and .NET Core SDK 3.1.2 in your machine before starting to work on this project. +* Visual Studio 2022 -## How to run this application? +## How to run the project -To run this application, you need to first clone the `get-start-with-blazor-data-grid` repository and then open it in Visual Studio 2019. Now, simply build and run your project to view the output. +* Checkout this project to a location in your disk. +* Open the solution file using the Visual Studio 2022. +* Restore the NuGet packages by rebuilding the solution. +* Run the project. \ No newline at end of file diff --git a/Shared/MainLayout.razor b/Shared/MainLayout.razor index 74820a0..0a8a26b 100644 --- a/Shared/MainLayout.razor +++ b/Shared/MainLayout.razor @@ -1,15 +1,19 @@ @inherits LayoutComponentBase -
- -
+DataGridGettingStartedSample -
-
- About +
+
+
-
- @Body -
+
+
+ About +
+ +
+ @Body +
+
diff --git a/Shared/MainLayout.razor.css b/Shared/MainLayout.razor.css new file mode 100644 index 0000000..551e4b2 --- /dev/null +++ b/Shared/MainLayout.razor.css @@ -0,0 +1,70 @@ +.page { + position: relative; + display: flex; + flex-direction: column; +} + +main { + flex: 1; +} + +.sidebar { + background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); +} + +.top-row { + background-color: #f7f7f7; + border-bottom: 1px solid #d6d5d5; + justify-content: flex-end; + height: 3.5rem; + display: flex; + align-items: center; +} + + .top-row ::deep a, .top-row .btn-link { + white-space: nowrap; + margin-left: 1.5rem; + } + + .top-row a:first-child { + overflow: hidden; + text-overflow: ellipsis; + } + +@media (max-width: 640.98px) { + .top-row:not(.auth) { + display: none; + } + + .top-row.auth { + justify-content: space-between; + } + + .top-row a, .top-row .btn-link { + margin-left: 0; + } +} + +@media (min-width: 641px) { + .page { + flex-direction: row; + } + + .sidebar { + width: 250px; + height: 100vh; + position: sticky; + top: 0; + } + + .top-row { + position: sticky; + top: 0; + z-index: 1; + } + + .top-row, article { + padding-left: 2rem !important; + padding-right: 1.5rem !important; + } +} diff --git a/Shared/NavMenu.razor b/Shared/NavMenu.razor index b220591..eaa41a7 100644 --- a/Shared/NavMenu.razor +++ b/Shared/NavMenu.razor @@ -1,34 +1,36 @@ -
- GridSample - +
+
+ DataGridGettingStartedSample + +
-
-
    -
  • +
    +
    • -
  • +
+
Counter - -
  • +
    • +
    Fetch data - - +
    +
    @code { private bool collapseNavMenu = true; - private string NavMenuCssClass => collapseNavMenu ? "collapse" : null; + private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; private void ToggleNavMenu() { diff --git a/Shared/NavMenu.razor.css b/Shared/NavMenu.razor.css new file mode 100644 index 0000000..604b7a1 --- /dev/null +++ b/Shared/NavMenu.razor.css @@ -0,0 +1,68 @@ +.navbar-toggler { + background-color: rgba(255, 255, 255, 0.1); +} + +.top-row { + height: 3.5rem; + background-color: rgba(0,0,0,0.4); +} + +.navbar-brand { + font-size: 1.1rem; +} + +.oi { + width: 2rem; + font-size: 1.1rem; + vertical-align: text-top; + top: -2px; +} + +.nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; +} + + .nav-item:first-of-type { + padding-top: 1rem; + } + + .nav-item:last-of-type { + padding-bottom: 1rem; + } + + .nav-item ::deep a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + } + +.nav-item ::deep a.active { + background-color: rgba(255,255,255,0.25); + color: white; +} + +.nav-item ::deep a:hover { + background-color: rgba(255,255,255,0.1); + color: white; +} + +@media (min-width: 641px) { + .navbar-toggler { + display: none; + } + + .collapse { + /* Never collapse the sidebar for wide screens */ + display: block; + } + + .nav-scrollable { + /* Allow sidebar to scroll for tall menus */ + height: calc(100vh - 3.5rem); + overflow-y: auto; + } +} diff --git a/Shared/SurveyPrompt.razor b/Shared/SurveyPrompt.razor index e9706c8..ec64baa 100644 --- a/Shared/SurveyPrompt.razor +++ b/Shared/SurveyPrompt.razor @@ -1,10 +1,10 @@ -