diff --git a/blazor/datagrid/getting-started-with-maui-app.md b/blazor/datagrid/getting-started-with-maui-app.md index d6d2e99cef..02319e066a 100644 --- a/blazor/datagrid/getting-started-with-maui-app.md +++ b/blazor/datagrid/getting-started-with-maui-app.md @@ -9,9 +9,12 @@ documentation: ug # Getting Started with Blazor DataGrid -This section explains you through the step-by-step process of integrating the Syncfusion® Blazor DataGrid component into your Blazor MAUI application using both Visual Studio and Visual Studio Code. +The [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component provides a comprehensive solution for displaying and managing tabular data in **Blazor MAUI** applications. It supports essential features such as **data binding**, **sorting**, **filtering**, **paging**, and **grouping**, enabling efficient handling of large data collections. The component is designed for high performance and seamless integration with **.NET MAUI**, offering a consistent experience across platforms. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +This guide provides detailed instructions for integrating the DataGrid into a **Blazor MAUI App** using [Visual Studio](https://visualstudio.microsoft.com/vs/) or [Visual Studio Code](https://code.visualstudio.com/). It includes setup steps, configuration details, and usage examples to assist in building robust applications. + +> Ready to streamline your Syncfusion® Blazor development? +Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) {% tabcontents %} @@ -19,15 +22,36 @@ This section explains you through the step-by-step process of integrating the Sy ## Prerequisites -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +To use .NET MAUI project templates, install the **Mobile development with .NET** workload in Visual Studio. +For detailed instructions, refer to the [.NET MAUI installation](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio) guide or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Create a new Blazor MAUI App in Visual Studio -You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +A Blazor MAUI application can be created using the **.NET MAUI Blazor App** template in Visual Studio with the built-in [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc). + +1. Open **Visual Studio** with the Mobile development with .NET workload installed. +2. Select **Create a new project**. +3. Choose **.NET MAUI Blazor App** from the list of templates and click **Next**. +4. Specify the **project name**, **location**, and **solution settings**, then click **Next**. +5. Select the latest available **.NET target framework**. +6. Click **Create** to generate the project. + +> For detailed instructions, refer to the official [.NET MAUI getting started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) guide. + +## Install Syncfusion® Blazor DataGrid and Themes in Visual Studio + +To integrate the DataGrid component into a Blazor MAUI application, install the following NuGet packages: + +1. Open **NuGet Package Manager** in Visual Studio: -## Install Syncfusion® Blazor DataGrid and Themes NuGet in the app + *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. -To add **Blazor DataGrid** component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +2. Search and install the following packages: + + - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) + - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + +3. Alternatively, use the **Package Manager Console**: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,7 +62,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -46,29 +70,52 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +To use .NET MAUI project templates, install the **Mobile development with .NET** workload in Visual Studio. +For detailed instructions, refer to the [.NET MAUI installation](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) guide or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). ## Create a new Blazor MAUI App in Visual Studio Code -You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +A Blazor MAUI application can be created using the **.NET CLI** commands in **Visual Studio Code**. + +1. Install the latest **.NET SDK** that supports .NET MAUI. +2. Open **Visual Studio Code**. +3. Press **Ctrl + `** to open the integrated terminal. +4. Run the following command to create a new Blazor MAUI App: + +{% tabs %} +{% highlight c# tabtitle="Blazor MAUI App" %} + +dotnet new maui-blazor -o MauiBlazorApp +cd MauiBlazorApp + +{% endhighlight %} +{% endtabs %} + +> For detailed instructions, refer to the [.NET MAUI getting started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) guide. ## Install Blazor DataGrid and Themes NuGet in the App -To add **Blazor DataGrid** component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To integrate the Blazor DataGrid component, install the required Syncfusion® NuGet packages using the **integrated terminal**: + +1. Press **Ctrl + `** to open the integrated terminal in Visual Studio Code. +2. Navigate to the directory containing the **.csproj** file. +3. Run the following commands to install the packages: + + * [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) + * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) {% tabs %} {% highlight c# tabtitle="Package Manager" %} -dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -dotnet restore +Install-Package Syncfusion.Blazor.Grid -Version {{site.releaseversion}} +Install-Package Syncfusion.Blazor.Themes -Version {{site.releaseversion}} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -76,7 +123,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +Open the **~/_Imports.razor** file and include the required namespaces for Syncfusion® Blazor components: {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -89,37 +136,35 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/MauiProgram.cs** file. +The Syncfusion® Blazor service must be registered in the **~/MauiProgram.cs** file to enable component rendering. {% tabs %} {% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %} using Microsoft.Extensions.Logging; using Syncfusion.Blazor; - -namespace MauiBlazorWindow; - +namespace MauiBlazorApp; public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder - .UseMauiApp() - .ConfigureFonts(fonts => - { - fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); - }); - + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); builder.Services.AddMauiBlazorWebView(); builder.Services.AddSyncfusionBlazor(); + #if DEBUG builder.Services.AddBlazorWebViewDeveloperTools(); - builder.Logging.AddDebug(); + builder.Logging.AddDebug(); #endif - return builder.Build(); } + } {% endhighlight %} @@ -127,20 +172,23 @@ namespace MauiBlazorWindow; ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +Syncfusion® Blazor themes and scripts are available through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the required references in the **~/wwwroot/index.html** file of the MAUI Blazor project. ```html - .... - - //Blazor DataGrid Component script reference. - ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> +* Refer to [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for various methods to reference themes in a Blazor application: + + >* [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) + >* [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) + >* [Custom Resource Generator (CRG)](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) + +>* For script reference options, see [Adding Script References](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor DataGrid component @@ -149,57 +197,44 @@ Add the Syncfusion® Blazor DataGrid compone {% tabs %} {% highlight razor %} - - -@code{ - public List Orders { get; set; } - - protected override void OnInitialized() - { - Orders = Enumerable.Range(1, 5).Select(x => new Order() - { - OrderID = 0 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - }).ToList(); - } - - public class Order - { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - - } -} + {% endhighlight %} {% endtabs %} +* The component will render as an empty grid until data is bound. + ### How to Run the Sample on Windows -Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. +Run the application in Windows Machine mode to launch the Blazor MAUI app on Windows. ![Blazor DataGrid Component](images/blazor-datagrid-maui-page.png) ### How to Run the Sample on Android -To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps: +To run the Blazor MAUI app on an Android emulator: -Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator. +1. Install and configure the Android emulator using the [Android Device Manager guide](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows). +2. Launch the emulator and start the application. -N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). +N> For troubleshooting emulator issues, refer to [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). ![Blazor DataGrid Component](images/blazor-datagrid-component.png) ## Defining row data -To bind data for the Grid, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the `OnInitialized` life cycle of the page. +The DataGrid requires a data source to display records. A collection implementing **IEnumerable** can be assigned to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. Alternatively, data can be provided through a [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started-with-web-app) instance for **remote binding**. + +Data binding is typically performed in the [OnInitialized](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.oninitialized?view=aspnetcore-10.0) lifecycle method of the component. {% tabs %} {% highlight razor %} - -@code{ + + + +@code { public List Orders { get; set; } protected override void OnInitialized() @@ -207,13 +242,14 @@ To bind data for the Grid, you can assign a IEnumerable object to the [DataSourc Orders = Enumerable.Range(1, 75).Select(x => new Order() { OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], + CustomerID = (new[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), + OrderDate = DateTime.Now.AddDays(-x) }).ToList(); } - public class Order { + public class Order + { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } @@ -224,27 +260,32 @@ To bind data for the Grid, you can assign a IEnumerable object to the [DataSourc {% endhighlight %} {% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The DataGrid will render and display the collection. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLSMLthxegYrbQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Defining columns -The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid. +The DataGrid automatically generates columns when no explicit column definitions are provided. For greater control over column behavior and appearance, use the [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component along with individual [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) elements to define columns explicitly. -The Grid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). To customize column properties, use [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). +**Common Column Properties** -Let’s check the properties used here: -* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) is added to map with a property name in IEnumerable object. -* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) is added to change the title of columns. -* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) is used to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, define [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) as **Right**. -* Also, you have used another useful property, [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). Using this, you can format number and date values to standard or custom formats. +* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field): Maps the column to a property in the bound collection. +* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText): Specifies the column header title. +* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign): Aligns text within the column. Default alignment is Left; set to Right for numeric values. +* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format): Applies standard or custom formatting for numeric and date values. +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type): Defines the column type, such as ColumnType.Date for date fields. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width): Sets the column width in pixels or percentage to control layout consistency. {% tabs %} {% highlight razor %} + - + @@ -254,19 +295,19 @@ Let’s check the properties used here: ## Enable paging -The paging feature enables users to view the Syncfusion® Blazor DataGrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings). +[Paging](https://blazor.syncfusion.com/documentation/datagrid/paging) allows the DataGrid to display records in a paged view, improving performance and readability for large datasets. Enable paging by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. Paging behavior can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html) component. {% tabs %} {% highlight razor %} - - - - - - - + + + + + + + {% endhighlight %} @@ -274,7 +315,7 @@ The paging feature enables users to view the Syncfusion® Blazor DataGrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings). +[Grouping](https://blazor.syncfusion.com/documentation/datagrid/grouping) organizes records into logical groups based on column values. Enable grouping by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property to **true**. Grouping behavior can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html) component. {% tabs %} {% highlight razor %} - - - - - - - + + + + + + + {% endhighlight %} @@ -336,16 +377,14 @@ The grouping feature enables you to view the Syncfusion® Blazor DataGrid actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event. +Exceptions that occur during DataGrid operations can be captured without interrupting the application flow. Use the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event to retrieve error details and handle them gracefully. -* **TValue** - Specifies the row data type of the grid (for example, Order). It enables strong typing for templates and event args and ensures proper binding/formatting. -* **GridEvents** - When you use GridEvents, set the same TValue on both SfGrid and GridEvents so the event argument types (like FailureEventArgs, RowSelectEventArgs) are correctly bound. +**Key Points**: -The argument passed to the `OnActionFailure` event contains the error details returned from the server. +* **TValue**: Specifies the row data type for the grid (for example, Order). This ensures strong typing for templates and event arguments. +* **GridEvents**: When using [GridEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#), set the same `TValue` on both [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#) and `GridEvents` for proper event argument binding. -N> Recommend you to bind `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get solution as early as possible. - -The following sample code demonstrates notifying user when server-side exception has occurred during data operation: +N> Binding the `OnActionFailure` event during development helps identify issues early. Exception details can be logged or displayed for troubleshooting. {% tabs %} {% highlight razor %} @@ -353,6 +392,7 @@ The following sample code demonstrates notifying user when server-side exception @using Syncfusion.Blazor.Data @ErrorDetails + @@ -360,7 +400,7 @@ The following sample code demonstrates notifying user when server-side exception - + @@ -371,19 +411,18 @@ The following sample code demonstrates notifying user when server-side exception } -@code{ +@code { public string ErrorDetails = ""; - public class Order - { + + public class Order { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; set; } } - public void ActionFailure(FailureEventArgs args) - { - this.ErrorDetails = "Server exception: 404 Not found"; + public void ActionFailure(FailureEventArgs args) { + ErrorDetails = "Server exception: 404 Not Found"; StateHasChanged(); } } diff --git a/blazor/datagrid/getting-started-with-server-app.md b/blazor/datagrid/getting-started-with-server-app.md index ac906cf986..a326c3535b 100644 --- a/blazor/datagrid/getting-started-with-server-app.md +++ b/blazor/datagrid/getting-started-with-server-app.md @@ -9,9 +9,12 @@ documentation: ug # Getting Started with Blazor DataGrid in Server App -This section briefly explains about how to include [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in your Blazor Server App using Visual Studio, Visual Studio code and .NET CLI. +The [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) is a feature-rich component designed for displaying and managing data in Blazor applications. It supports essential functionalities such as **data binding**, **sorting**, **filtering**, **paging**, and **grouping**, enabling the **creation of interactive** and **responsive data-driven interfaces**. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +This guide provides detailed instructions for integrating the DataGrid into a **Blazor Server application** using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), or the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). It includes setup steps, configuration details, and usage examples to assist in building robust applications. + +> Ready to streamline your Syncfusion® Blazor development? +Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) {% tabcontents %} @@ -23,11 +26,32 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +A **Blazor Web App** can be created using **Visual Studio** with the built-in [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsAz) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). + +1. Open **Visual Studio 2022** (version 17.8 or later). +2. Select **Create a new project**. +3. Choose **Blazor Web App** from the list of templates and click **Next**. +4. Specify the **project name**, **location**, and **solution settings**, then click **Next**. +5. Select the target framework as **.NET 8.0 or later** (choose the latest installed version available on the system). +6. Choose the [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#render-modes) (**Server**) and configure the [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs). +7. Review the remaining options and click **Create** to generate the project. + +## Install Syncfusion® Blazor DataGrid and Themes in Visual Studio + +To integrate the Blazor DataGrid component, install the required Syncfusion® NuGet packages in the solution: + +1. Open **NuGet Package Manager** in Visual Studio: + + *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. + +2. Search and install the following packages: -## Install Blazor DataGrid and Themes NuGet in the app + - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) + - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) -To add **Syncfusion® Blazor DataGrid** in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +3. For projects using **WebAssembly** or **Auto** interactive render modes, ensure these packages are installed in the **Client** project. + +4. Alternatively, use the **Package Manager Console**: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,7 +62,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -48,42 +72,50 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor app in Visual Studio code +## Create a Blazor server app in Visual Studio code -You can create a **Blazor Server app** using **Blazor Web App** template in Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +A Blazor Server App can be created using [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a server application using the following command in the terminal(Ctrl+`). +1. Install the latest **.NET SDK** that supports **.NET 8.0 or later**. +2. Open **Visual Studio Code**. +3. Press **Ctrl + `** to open the integrated terminal. +4. Navigate to the desired directory for the project. +5. Run the following command to create a Blazor Server application: {% tabs %} - {% highlight c# tabtitle="Blazor Server App" %} dotnet new blazor -o BlazorApp -int Server cd BlazorApp {% endhighlight %} - {% endtabs %} -## Install Blazor DataGrid and Themes NuGet in the app +6. Configure the [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#render-modes) as **Server** and set the [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) appropriately. -* Press Ctrl+` to open the integrated terminal in Visual Studio code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +N> For other **interactive render modes** and **interactivity locations**, refer to Render Modes [documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). -{% tabs %} +## Install Syncfusion® Blazor DataGrid and Themes in Visual Studio Code + +To integrate the Blazor DataGrid component, install the required Syncfusion® NuGet packages using the **integrated terminal**: + +1. Press **Ctrl + `** to open the integrated terminal in Visual Studio Code. +2. Navigate to the directory containing the **.csproj** file. +3. Run the following commands to install the packages: +* [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) +* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + +{% tabs %} {% highlight c# tabtitle="Package Manager" %} -dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -dotnet restore +Install-Package Syncfusion.Blazor.Grid -Version {{site.releaseversion}} +Install-Package Syncfusion.Blazor.Themes -Version {{site.releaseversion}} {% endhighlight %} - {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -91,7 +123,8 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +1. Install the latest [.NET SDK](https://dotnet.microsoft.com/en-us/download) that supports .NET 8.0 or later. +2. Verify the installed version by running the following command in a command prompt (Windows), terminal (macOS), or shell (Linux): {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -103,8 +136,9 @@ dotnet --version ## Create a Blazor Server App using .NET CLI -Run the `dotnet new blazorserver` command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). - +1. Open a **command prompt**, **terminal**, or **shell**. +2. Navigate to the directory where the project should be created. +3. Run the following command to create a new **Blazor Server App** with **Server** interactive render mode: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,11 +148,24 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +4. Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) when setting up the application. For more details, see [Render Mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +5. This command creates a new **Blazor Server App** in a directory named **BlazorApp** inside the current location. + +> For additional details, refer to: +>* [Blazor Server App Getting Started (.NET CLI)](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) +>* [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) +>* [Create Blazor App Tutorial](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) -## Install Syncfusion® Blazor DataGrid and Themes NuGet in the App +## Install Syncfusion® Blazor DataGrid and Themes using .NET CLI -Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +To integrate the Blazor DataGrid component in a **Blazor Server App** using the **.NET CLI**: + +1. Open a **command prompt**, **terminal**, or **shell**. +2. Navigate to the directory containing the **.csproj** file. +3. Run the following commands to install the required NuGet packages: + + - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) + - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -130,7 +177,10 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> For more details, refer to: + +> * [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) +> * Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -138,7 +188,8 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +1. Open the **~/_Imports.razor** file in the project. +2. Add the following namespaces to enable Syncfusion® Blazor components: {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -149,103 +200,102 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf {% endhighlight %} {% endtabs %} +N> For **Server** render mode, update this file in the **Components** folder. + ## Register Syncfusion® Blazor service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +Open the **~/Program.cs** file and register the Syncfusion® Blazor service along with interactive server components: {% tabs %} -{% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %} +{% highlight c# tabtitle="~/Program.cs" hl_lines="3 10" %} -.... -.... using Syncfusion.Blazor; - var builder = WebApplication.CreateBuilder(args); - // Add services to the container. -.... -.... +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents(); builder.Services.AddSyncfusionBlazor(); - -.... - +var app = builder.Build(); +// Remaining configuration... {% endhighlight %} {% endtabs %} +N> For **Server** render mode, ensure `AddInteractiveServerComponents()` is included to enable interactivity. + ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: +Syncfusion® Blazor themes and scripts are available through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the following references in the **~/Components/App.razor** file: + +**In the <head> section:** ```html - .... +``` + +**At the end of the <body> section:** +```html - .... - - //Blazor DataGrid Component script reference. - ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> +* Refer to [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for various methods to reference themes in a Blazor application: -## Add Blazor DataGrid component +>* [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) +>* [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) +>* [Custom Resource Generator (CRG)](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) -Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. +>* For script reference options, see [Adding Script References](https://blazor.syncfusion.com/documentation/common/adding-script-references). -N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default. +## Add Syncfusion® Blazor DataGrid component -``` -@* desired render mode define here *@ -@rendermode InteractiveServer -``` +The Syncfusion® Blazor DataGrid can be added to a **Razor** page in the **Pages** folder (for example, Pages/Home.razor). + +1. **Define Render Mode** + +Set the render mode at the top of the **Razor** file to enable server interactivity: {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} +@rendermode InteractiveServer +{% endhighlight %} +{% endtabs %} - +**Interactivity Location** -@code{ - public List Orders { get; set; } +* **Global**: Render mode is configured in **App.razor** and applies to the entire application by default. +* **Per page/component**: Render mode is set at the top of the specific **Razor** file (for example, **Pages/Index.razor**). - protected override void OnInitialized() - { - Orders = Enumerable.Range(1, 5).Select(x => new Order() - { - OrderID = 0 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - }).ToList(); - } +2. **Add DataGrid component** - public class Order - { - public int? OrderID { get; set; } - public string CustomerID { get; set; } +Add the **DataGrid** tag to the **Razor** page: - } -} +{% tabs %} +{% highlight razor %} + + {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid in your default web browser. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-component.png)" %} - ## Defining row data -To bind data for the Grid, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the `OnInitialized` life cycle of the page. +The DataGrid requires a data source to display records. A collection implementing **IEnumerable** can be assigned to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. Alternatively, data can be provided through a [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started-with-web-app) instance for **remote binding**. + +Data binding is typically performed in the [OnInitialized](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.oninitialized?view=aspnetcore-10.0) lifecycle method of the component. {% tabs %} {% highlight razor %} - -@code{ + + + +@code { public List Orders { get; set; } protected override void OnInitialized() @@ -253,13 +303,14 @@ To bind data for the Grid, you can assign a IEnumerable object to the [DataSourc Orders = Enumerable.Range(1, 75).Select(x => new Order() { OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], + CustomerID = (new[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), + OrderDate = DateTime.Now.AddDays(-x) }).ToList(); } - public class Order { + public class Order + { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } @@ -270,27 +321,32 @@ To bind data for the Grid, you can assign a IEnumerable object to the [DataSourc {% endhighlight %} {% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The DataGrid will render and display the collection. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLSMLthxegYrbQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Defining columns -The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid. +The DataGrid automatically generates columns when no explicit column definitions are provided. For greater control over column behavior and appearance, use the [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component along with individual [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) elements to define columns explicitly. -The Grid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). To customize column properties, use [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). +**Common Column Properties** -Let’s check the properties used here: -* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) is added to map with a property name in IEnumerable object. -* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) is added to change the title of columns. -* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) is used to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, define [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) as **Right**. -* Also, you have used another useful property, [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). Using this, you can format number and date values to standard or custom formats. +* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field): Maps the column to a property in the bound collection. +* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText): Specifies the column header title. +* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign): Aligns text within the column. Default alignment is Left; set to Right for numeric values. +* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format): Applies standard or custom formatting for numeric and date values. +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type): Defines the column type, such as ColumnType.Date for date fields. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width): Sets the column width in pixels or percentage to control layout consistency. {% tabs %} {% highlight razor %} + - + @@ -300,19 +356,19 @@ Let’s check the properties used here: ## Enable paging -The paging feature enables users to view the Syncfusion® Blazor DataGrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings). +[Paging](https://blazor.syncfusion.com/documentation/datagrid/paging) allows the DataGrid to display records in a paged view, improving performance and readability for large datasets. Enable paging by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. Paging behavior can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html) component. {% tabs %} {% highlight razor %} - - - - - - - + + + + + + + {% endhighlight %} @@ -320,7 +376,7 @@ The paging feature enables users to view the Syncfusion® Blazor DataGrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings). +[Grouping](https://blazor.syncfusion.com/documentation/datagrid/grouping) organizes records into logical groups based on column values. Enable grouping by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property to **true**. Grouping behavior can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html) component. {% tabs %} {% highlight razor %} - - - - - - - + + + + + + + {% endhighlight %} @@ -382,16 +438,14 @@ The grouping feature enables you to view the Syncfusion® Blazor DataGrid actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event. - -* **TValue** - Specifies the row data type of the grid (for example, Order). It enables strong typing for templates and event args and ensures proper binding/formatting. -* **GridEvents** - When you use GridEvents, set the same TValue on both SfGrid and GridEvents so the event argument types (like FailureEventArgs, RowSelectEventArgs) are correctly bound. +Exceptions that occur during DataGrid operations can be captured without interrupting the application flow. Use the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event to retrieve error details and handle them gracefully. -The argument passed to the `OnActionFailure` event contains the error details returned from the server. +**Key Points**: -N> Recommend you to bind `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get solution as early as possible. +* **TValue**: Specifies the row data type for the grid (for example, Order). This ensures strong typing for templates and event arguments. +* **GridEvents**: When using [GridEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#), set the same `TValue` on both [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#) and `GridEvents` for proper event argument binding. -The following sample code demonstrates notifying user when server-side exception has occurred during data operation: +N> Binding the `OnActionFailure` event during development helps identify issues early. Exception details can be logged or displayed for troubleshooting. {% tabs %} {% highlight razor %} @@ -399,6 +453,7 @@ The following sample code demonstrates notifying user when server-side exception @using Syncfusion.Blazor.Data @ErrorDetails + @@ -406,7 +461,7 @@ The following sample code demonstrates notifying user when server-side exception - + @@ -417,19 +472,18 @@ The following sample code demonstrates notifying user when server-side exception } -@code{ +@code { public string ErrorDetails = ""; - public class Order - { + + public class Order { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; set; } } - public void ActionFailure(FailureEventArgs args) - { - this.ErrorDetails = "Server exception: 404 Not found"; + public void ActionFailure(FailureEventArgs args) { + ErrorDetails = "Server exception: 404 Not Found"; StateHasChanged(); } } diff --git a/blazor/datagrid/getting-started-with-web-app.md b/blazor/datagrid/getting-started-with-web-app.md index 46d866c8ca..77594c7f1e 100644 --- a/blazor/datagrid/getting-started-with-web-app.md +++ b/blazor/datagrid/getting-started-with-web-app.md @@ -9,9 +9,12 @@ documentation: ug # Getting Started with Blazor DataGrid in Web App -This section briefly explains about how to include [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +The [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) is a feature-rich component designed for displaying and managing data in Blazor applications. It supports essential functionalities such as **data binding**, **sorting**, **filtering**, **paging**, and **grouping**, enabling the **creation of interactive** and **responsive data-driven interfaces**. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +This guide provides detailed instructions for integrating the DataGrid into a **Blazor Web App** using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), or the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). It includes setup steps, configuration details, and usage examples to assist in building robust applications. + +> Ready to streamline your Syncfusion® Blazor development? +Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) {% tabcontents %} @@ -21,21 +24,36 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +A **Blazor Web App** can be created using **Visual Studio** with the built-in [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. +1. Open **Visual Studio 2022** (version 17.8 or later). +2. Select **Create a new project**. +3. Choose **Blazor Web App** from the list of templates and click **Next**. +4. Specify the **project name**, **location**, and **solution settings**, then click **Next**. +5. Select the **target framework** as **.NET 8.0 or later** (choose the latest installed version available on the system). +6. Choose the [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#render-modes)(Server, WebAssembly, or Auto) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs). +7. Review the remaining options and click **Create** to generate the project. ![Create Blazor Web App](images/blazor-create-web-app.png) -## Install Blazor DataGrid and Themes NuGet in the Blazor Web App +## Install Syncfusion® Blazor NuGet Packages + +To integrate the Blazor DataGrid component, install the required Syncfusion® NuGet packages in the solution: + +1. Open **NuGet Package Manager** in Visual Studio: + + *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. -To add the **Syncfusion® Blazor DataGrid** in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +2. Search and install the following packages: -If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) + - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) -Alternatively, you can utilize the following package manager command to achieve the same. +3. For projects using **WebAssembly** or **Auto** interactive render modes, ensure these packages are installed in the **Client** project. + +4. Alternatively, use the **Package Manager Console**: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -46,7 +64,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -58,11 +76,10 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. - -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). - -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +1. Install the latest **.NET SDK** that supports **.NET 8.0 or later**. +2. Open **Visual Studio Code**. +3. Press **Ctrl + `** to open the integrated terminal. +4. Execute the following command to create a **Blazor Web App** with **Auto** [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes): {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -74,27 +91,33 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -## Install Blazor DataGrid and Themes NuGet in the app +N> For other **interactive render modes** and **interactivity locations**, refer to Render Modes [documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. +## Install Syncfusion® Blazor NuGet Packages in Visual Studio Code -* Press Ctrl+` to open the integrated terminal in Visual Studio code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +To integrate the Blazor DataGrid component, install the required Syncfusion® NuGet packages using the **integrated terminal**: + +1. Press **Ctrl + `** to open the integrated terminal in Visual Studio Code. +2. Navigate to the directory containing the **.csproj** file. +3. Run the following commands to install the packages: + +* [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) +* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) {% tabs %} {% highlight c# tabtitle="Package Manager" %} -dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -dotnet restore +Install-Package Syncfusion.Blazor.Grid -Version {{site.releaseversion}} +Install-Package Syncfusion.Blazor.Themes -Version {{site.releaseversion}} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. +4. For projects using **WebAssembly** or **Auto** interactive render modes, ensure these packages are installed in the **Client** project. + +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -102,7 +125,8 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +1. Install the latest [.NET SDK](https://dotnet.microsoft.com/en-us/download) that supports .NET 8.0 or later. +2. Verify the installed version by running the following command in a command prompt (Windows), terminal (macOS), or shell (Linux): {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,11 +138,9 @@ dotnet --version ## Create a Blazor Web App using .NET CLI -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. - -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). - -For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: +1. Open a **command prompt**, **terminal**, or **shell**. +2. Navigate to the directory where the project should be created. +3. Run the following command to create a new **Blazor Web App** with **Auto** interactive render mode: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -130,13 +152,24 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. +4. Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) when setting up the application. For more details, see [Render Mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +5. This command creates a new **Blazor Web App** in a directory named **BlazorApp** inside the current location. + +> For additional details, refer to: +>* [Blazor Web App Getting Started (.NET CLI)](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) +>* [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) +>* [Create Blazor App Tutorial](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) -## Install Syncfusion® Blazor Grid and Themes NuGet in the App +## Install Syncfusion® Blazor NuGet Packages using .NET CLI -Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +To integrate the Blazor DataGrid component in a **Blazor Web App** using the **.NET CLI**: -If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. +1. Open a **command prompt**, **terminal**, or **shell**. +2. Navigate to the directory containing the **.csproj** file. +3. Run the following commands to install the required NuGet packages: + + - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) + - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -148,7 +181,12 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. +4. For projects using **WebAssembly** or **Auto** interactive render modes, ensure these packages are installed in the **Client** project. + +N> For more details, refer to: + +> * [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) +> * Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -156,7 +194,8 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. +1. Open the **~/_Imports.razor** file in the **Client** project. +2. Add the following namespaces: {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -167,21 +206,44 @@ Open the **~/_Imports.razor** file in the client project and import the `Syncfus {% endhighlight %} {% endtabs %} +- For **WebAssembly** or **Auto** interactive render modes, update this file in the **Client** project. +- For **Server** interactive render mode, update this file in the **Components** folder. + ## Register Syncfusion® Blazor service -Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. +The Syncfusion® Blazor service must be registered in the **Program.cs** file. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +**Server Render Mode** + +For **Server** interactive render mode, register the service in the **Program.cs** file of the **Server** project: {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} -... -... using Syncfusion.Blazor; var builder = WebApplication.CreateBuilder(args); +// Add services to the container. +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents(); +builder.Services.AddSyncfusionBlazor(); +var app = builder.Build() +.... + +{% endhighlight %} +{% endtabs %} + +**Auto or WebAssembly Render Mode** + +For **Auto** or **WebAssembly** interactive render modes, register the service in both **Server** and **Client** projects: +{% tabs %} +{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} + +... +using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddRazorComponents() .AddInteractiveServerComponents() @@ -207,88 +269,88 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +Syncfusion® Blazor themes and scripts are available through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the following references in the **~/Components/App.razor** file: + +**In the <head> section:** ```html - .... -.... +``` + +**At the end of the <body> section:** + +```html - .... - - //Blazor DataGrid Component script reference. - ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> +* Refer to [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for various methods to reference themes in a Blazor application: + +>* [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) +>* [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) +>* [Custom Resource Generator (CRG)](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) + +>* For script reference options, see [Adding Script References](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Blazor DataGrid -Add the Syncfusion® Blazor Grid component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +The Syncfusion® Blazor DataGrid can be added to a Razor page in the **Pages** folder (for example, **Pages/Home.razor**) in either the **Server** or **Client** project. -| Interactivity location | RenderMode | Code | -| --- | --- | --- | -| Per page/component | Auto | @rendermode InteractiveAuto | -| | WebAssembly | @rendermode InteractiveWebAssembly | -| | None | --- | +**1. Define Render Mode** -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. +To use the **DataGrid** component in a **Blazor Web App**, set the **render mode** at the top of the **.razor** file. {% tabs %} {% highlight razor %} -@* desired render mode define here *@ @rendermode InteractiveAuto {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight razor %} +**Available Render Modes** - +| Mode | Syntax | Description | +|---------------------------|----------------------------------------|--------------------------------------------------------------| +| **InteractiveAuto** | `@rendermode InteractiveAuto` | Automatically selects the appropriate mode based on the hosting environment. | +| **InteractiveWebAssembly**| `@rendermode InteractiveWebAssembly` | Executes component logic on the client using WebAssembly. | +| **InteractiveServer** | `@rendermode InteractiveServer` | Executes component logic on the server using SignalR. | -@code{ - public List Orders { get; set; } +**Interactivity Location** - protected override void OnInitialized() - { - Orders = Enumerable.Range(1, 5).Select(x => new Order() - { - OrderID = 0 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - }).ToList(); - } +* **Global**: Render mode is configured in **App.razor** and applies to the entire application by default. +* **Per page/component**: Render mode is set at the top of the specific **Razor** file (for example, **Pages/Index.razor**). - public class Order - { - public int? OrderID { get; set; } - public string CustomerID { get; set; } +2. **Add DataGrid component** - } -} +Add the **DataGrid** tag to the **Razor** page: -{% endhighlight %} -{% endtabs %} +{% tabs %} +{% highlight razor %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-component.png)" %} + -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Grid component in the default web browser. +{% endhighlight %} +{% endtabs %} ## Defining row data -To bind data for the Grid, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the `OnInitialized` life cycle of the page. +The DataGrid requires a data source to display records. A collection implementing **IEnumerable** can be assigned to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. Alternatively, data can be provided through a [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started-with-web-app) instance for **remote binding**. + +Data binding is typically performed in the [OnInitialized](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.oninitialized?view=aspnetcore-10.0) lifecycle method of the component. {% tabs %} {% highlight razor %} - -@code{ + + + +@code { public List Orders { get; set; } protected override void OnInitialized() @@ -296,13 +358,14 @@ To bind data for the Grid, you can assign a IEnumerable object to the [DataSourc Orders = Enumerable.Range(1, 75).Select(x => new Order() { OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], + CustomerID = (new[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), + OrderDate = DateTime.Now.AddDays(-x) }).ToList(); } - public class Order { + public class Order + { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } @@ -313,27 +376,32 @@ To bind data for the Grid, you can assign a IEnumerable object to the [DataSourc {% endhighlight %} {% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The DataGrid will render and display the collection. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLSMLthxegYrbQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Defining columns -The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid. +The DataGrid automatically generates columns when no explicit column definitions are provided. For greater control over column behavior and appearance, use the [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component along with individual [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) elements to define columns explicitly. -The Grid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component. To customize column properties, use [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). +**Common Column Properties** -Let’s check the properties used here: -* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) is added to map with a property name in IEnumerable object. -* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) is added to change the title of columns. -* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) is used to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, define [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) as **Right**. -* Also, you have used another useful property, [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). Using this, you can format number and date values to standard or custom formats. +* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field): Maps the column to a property in the bound collection. +* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText): Specifies the column header title. +* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign): Aligns text within the column. Default alignment is Left; set to Right for numeric values. +* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format): Applies standard or custom formatting for numeric and date values. +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type): Defines the column type, such as ColumnType.Date for date fields. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width): Sets the column width in pixels or percentage to control layout consistency. {% tabs %} {% highlight razor %} + - + @@ -343,19 +411,19 @@ Let’s check the properties used here: ## Enable paging -The paging feature enables users to view the Syncfusion® Blazor DataGrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings). +[Paging](https://blazor.syncfusion.com/documentation/datagrid/paging) allows the DataGrid to display records in a paged view, improving performance and readability for large datasets. Enable paging by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. Paging behavior can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html) component. {% tabs %} {% highlight razor %} - - - - - - - + + + + + + + {% endhighlight %} @@ -363,7 +431,7 @@ The paging feature enables users to view the Syncfusion® Blazor DataGrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings). +[Grouping](https://blazor.syncfusion.com/documentation/datagrid/grouping) organizes records into logical groups based on column values. Enable grouping by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property to **true**. Grouping behavior can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html) component. {% tabs %} {% highlight razor %} - - - - - - - + + + + + + + {% endhighlight %} @@ -425,16 +493,14 @@ The grouping feature enables you to view the Syncfusion® Blazor DataGrid actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event. - -* **TValue** - Specifies the row data type of the grid (for example, Order). It enables strong typing for templates and event args and ensures proper binding/formatting. -* **GridEvents** - When you use GridEvents, set the same TValue on both SfGrid and GridEvents so the event argument types (like FailureEventArgs, RowSelectEventArgs) are correctly bound. +Exceptions that occur during DataGrid operations can be captured without interrupting the application flow. Use the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event to retrieve error details and handle them gracefully. -The argument passed to the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event contains the error details returned from the server. +**Key Points**: -N> Recommend you to bind `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get solution as early as possible. +* **TValue**: Specifies the row data type for the grid (for example, Order). This ensures strong typing for templates and event arguments. +* **GridEvents**: When using [GridEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#), set the same `TValue` on both [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#) and `GridEvents` for proper event argument binding. -The following sample code demonstrates notifying user when server-side exception has occurred during data operation, +N> Binding the `OnActionFailure` event during development helps identify issues early. Exception details can be logged or displayed for troubleshooting. {% tabs %} {% highlight razor %} @@ -442,6 +508,7 @@ The following sample code demonstrates notifying user when server-side exception @using Syncfusion.Blazor.Data @ErrorDetails + @@ -449,7 +516,7 @@ The following sample code demonstrates notifying user when server-side exception - + @@ -460,19 +527,18 @@ The following sample code demonstrates notifying user when server-side exception } -@code{ +@code { public string ErrorDetails = ""; - public class Order - { + + public class Order { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; set; } } - public void ActionFailure(FailureEventArgs args) - { - this.ErrorDetails = "Server exception: 404 Not found"; + public void ActionFailure(FailureEventArgs args) { + ErrorDetails = "Server exception: 404 Not Found"; StateHasChanged(); } } diff --git a/blazor/datagrid/getting-started.md b/blazor/datagrid/getting-started.md index 0ed5379ccf..4d8e9fac78 100644 --- a/blazor/datagrid/getting-started.md +++ b/blazor/datagrid/getting-started.md @@ -11,7 +11,8 @@ documentation: ug This section briefly explains about how to include [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in your Blazor webAssembly app using Visual Studio, Visual Studio code and .NET CLI. -> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> Ready to streamline your Syncfusion® Blazor development? +Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) {% tabcontents %} @@ -21,13 +22,33 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor WASM Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +A **Blazor WebAssembly App** can be created using **Visual Studio 2022** with the built-in [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Install Blazor DataGrid and Themes NuGet in the app +1. Open **Visual Studio 2022** (v17.8 or later). +2. Select **Create a new project**. +3. Choose **Blazor WebAssembly Standalone App** from the list of templates and click **Next**. +4. Configure the **project name**, **location**, and **solution settings**, then click **Next**. +5. Select the **target framework** as **.NET 8.0 or later** (choose the latest installed version available on the system). +6. Click **Create** to generate the project. -To add **Syncfusion® Blazor DataGrid** in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +N> For detailed steps, refer to [Microsoft Blazor tooling documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs). + +## Install Syncfusion® Blazor DataGrid and Themes in Visual Studio + +To integrate the Blazor DataGrid component, install the required NuGet packages in the **Blazor WebAssembly** project: + +1. Open **NuGet Package Manager** in Visual Studio: + + *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. + +2. Search and install the following packages: + + - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) + - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + +3. Alternatively, use the **Package Manager Console**: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,7 +59,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -48,11 +69,14 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor app in Visual Studio code +## Create a Blazor WebAssembly application in Visual Studio Code -You can create a **Blazor webAssembly app** using Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +A **Blazor WebAssembly App** can be created using **Visual Studio Code** with the built-in [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +1. Open **Visual Studio Code**. +2. Press **Ctrl + `** to open the integrated terminal. +3. Navigate to the desired directory where the project should be created. +4. Run the following command to create a new Blazor WebAssembly project {% tabs %} @@ -65,11 +89,16 @@ cd BlazorApp {% endtabs %} -## Install Blazor DataGrid and Themes NuGet in the app +## Install Syncfusion® Blazor DataGrid and Themes in Visual Studio Code + +To integrate the Blazor DataGrid component, install the required Syncfusion® NuGet packages using the **integrated terminal**: -* Press Ctrl+` to open the integrated terminal in Visual Studio code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +1. Press **Ctrl + `** to open the integrated terminal in Visual Studio Code. +2. Navigate to the directory containing the **.csproj** file. +3. Run the following commands to install the packages: + +* [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) +* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) {% tabs %} @@ -83,7 +112,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -103,7 +132,9 @@ dotnet --version ## Create a Blazor WebAssembly App using .NET CLI -Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +1. Open a command prompt, terminal, or shell. +2. Navigate to the directory where the project should be created. +3. Run the following command to create a new Blazor WebAssembly App: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,11 +145,23 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +4. This command creates a new **Blazor WebAssembly App** in a directory named **BlazorApp** inside the current location. + +> For additional details, refer to: +>* [Blazor Web App Getting Started (.NET CLI)](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) +>* [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) +>* [Create Blazor App Tutorial](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) -## Install Syncfusion® Blazor DataGrid and Themes NuGet in the App +## Install Syncfusion® Blazor DataGrid and Themes using .NET CLI -Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +To integrate the Blazor DataGrid component in a **Blazor WebAssembly App** using the **.NET CLI**: + +1. Open a **command prompt**, **terminal**, or **shell**. +2. Navigate to the directory containing the **.csproj** file. +3. Run the following commands to install the required NuGet packages: + + - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) + - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -130,7 +173,10 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> For more details, refer to: + +> * [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) +> * Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -138,7 +184,8 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +1. Open the **_Imports.razor** file in the project root. +2. Add the following namespace directives: {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -151,7 +198,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor service -Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor webAssembly app. +Open the **~/Program.cs** file and register the Syncfusion® Blazor service by adding the following code: {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -161,80 +208,69 @@ using Microsoft.AspNetCore.Components.WebAssembly.Hosting; using Syncfusion.Blazor; var builder = WebAssemblyHostBuilder.CreateDefault(args); -builder.RootComponents.Add("#app"); -builder.RootComponents.Add("head::after"); +builder.RootComponents.Add("#app"); +builder.RootComponents.Add("head::after"); -builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); +builder.Services.AddScoped(sp => new HttpClient +{ + BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) +}); builder.Services.AddSyncfusionBlazor(); await builder.Build().RunAsync(); -.... {% endhighlight %} {% endtabs %} ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script files are provided through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-asset) in the NuGet packages. Include these references in the **** section of the **~/wwwroot/index.html** file: ```html .... - - //Blazor DataGrid Component script reference. - ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor DataGrid component +N> +* Refer to [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for various methods to reference themes in a Blazor application: -Add the Syncfusion® Blazor DataGrid component in the **~/Pages/Index.razor** file. + >* [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) + >* [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) + >* [Custom Resource Generator (CRG)](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) -{% tabs %} -{% highlight razor %} +>* For script reference options, see [Adding Script References](https://blazor.syncfusion.com/documentation/common/adding-script-references). - - -@code{ - public List Orders { get; set; } +## Add Blazor DataGrid component - protected override void OnInitialized() - { - Orders = Enumerable.Range(1, 5).Select(x => new Order() - { - OrderID = 0 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - }).ToList(); - } +Add the Syncfusion® Blazor DataGrid component in the **~/Pages/Home.razor** file. - public class Order - { - public int? OrderID { get; set; } - public string CustomerID { get; set; } +{% tabs %} +{% highlight razor %} - } -} + {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid in your default web browser. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-component.png)" %} +* The component will render as an empty grid until data is bound. ## Defining row data -To bind data for the Grid, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the `OnInitialized` life cycle of the page. +The DataGrid requires a data source to display records. A collection implementing **IEnumerable** can be assigned to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. Alternatively, data can be provided through a [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started-with-web-app) instance for **remote binding**. + +Data binding is typically performed in the [OnInitialized](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.oninitialized?view=aspnetcore-10.0) lifecycle method of the component. {% tabs %} {% highlight razor %} - -@code{ + + + +@code { public List Orders { get; set; } protected override void OnInitialized() @@ -242,13 +278,14 @@ To bind data for the Grid, you can assign a IEnumerable object to the [DataSourc Orders = Enumerable.Range(1, 75).Select(x => new Order() { OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], + CustomerID = (new[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), + OrderDate = DateTime.Now.AddDays(-x) }).ToList(); } - public class Order { + public class Order + { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } @@ -259,27 +296,32 @@ To bind data for the Grid, you can assign a IEnumerable object to the [DataSourc {% endhighlight %} {% endtabs %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the application. The DataGrid will render and display the collection. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLSMLthxegYrbQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Defining columns -The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid. +The DataGrid automatically generates columns when no explicit column definitions are provided. For greater control over column behavior and appearance, use the [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component along with individual [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) elements to define columns explicitly. -The Grid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). To customize column properties, use [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). +**Common Column Properties** -Let’s check the properties used here: -* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) is added to map with a property name in IEnumerable object. -* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) is added to change the title of columns. -* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) is used to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, define [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) as **Right**. -* Also, you have used another useful property, [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). Using this, you can format number and date values to standard or custom formats. +* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field): Maps the column to a property in the bound collection. +* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText): Specifies the column header title. +* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign): Aligns text within the column. Default alignment is Left; set to Right for numeric values. +* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format): Applies standard or custom formatting for numeric and date values. +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type): Defines the column type, such as ColumnType.Date for date fields. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width): Sets the column width in pixels or percentage to control layout consistency. {% tabs %} {% highlight razor %} + - + @@ -289,19 +331,19 @@ Let’s check the properties used here: ## Enable paging -The paging feature enables users to view the Syncfusion® Blazor DataGrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings). +[Paging](https://blazor.syncfusion.com/documentation/datagrid/paging) allows the DataGrid to display records in a paged view, improving performance and readability for large datasets. Enable paging by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. Paging behavior can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html) component. {% tabs %} {% highlight razor %} - - - - - - - + + + + + + + {% endhighlight %} @@ -309,7 +351,7 @@ The paging feature enables users to view the Syncfusion® Blazor DataGrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings). +[Grouping](https://blazor.syncfusion.com/documentation/datagrid/grouping) organizes records into logical groups based on column values. Enable grouping by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property to **true**. Grouping behavior can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html) component. {% tabs %} {% highlight razor %} - - - - - - - + + + + + + + {% endhighlight %} @@ -371,16 +413,14 @@ The grouping feature enables you to view the Syncfusion® Blazor DataGrid actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event. - -* **TValue** - Specifies the row data type of the grid (for example, Order). It enables strong typing for templates and event args and ensures proper binding/formatting. -* **GridEvents** - When you use GridEvents, set the same TValue on both SfGrid and GridEvents so the event argument types (like FailureEventArgs, RowSelectEventArgs) are correctly bound. +Exceptions that occur during DataGrid operations can be captured without interrupting the application flow. Use the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event to retrieve error details and handle them gracefully. -The argument passed to the `OnActionFailure` event contains the error details returned from the server. +**Key Points**: -N> Recommend you to bind `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get solution as early as possible. +* **TValue**: Specifies the row data type for the grid (for example, Order). This ensures strong typing for templates and event arguments. +* **GridEvents**: When using [GridEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#), set the same `TValue` on both [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#) and `GridEvents` for proper event argument binding. -The following sample code demonstrates notifying user when server-side exception has occurred during data operation: +N> Binding the `OnActionFailure` event during development helps identify issues early. Exception details can be logged or displayed for troubleshooting. {% tabs %} {% highlight razor %} @@ -388,6 +428,7 @@ The following sample code demonstrates notifying user when server-side exception @using Syncfusion.Blazor.Data @ErrorDetails + @@ -395,7 +436,7 @@ The following sample code demonstrates notifying user when server-side exception - + @@ -406,26 +447,24 @@ The following sample code demonstrates notifying user when server-side exception } -@code{ +@code { public string ErrorDetails = ""; - public class Order - { + + public class Order { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; set; } } - public void ActionFailure(FailureEventArgs args) - { - this.ErrorDetails = "Server exception: 404 Not found"; + public void ActionFailure(FailureEventArgs args) { + ErrorDetails = "Server exception: 404 Not Found"; StateHasChanged(); } } {% endhighlight %} {% endtabs %} - ## See Also * [Getting started with Syncfusion® Blazor DataGrid in Server Side App using .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)