diff --git a/blazor/datagrid/getting-started-with-maui-app.md b/blazor/datagrid/getting-started-with-maui-app.md index 08d2ef9140..46e99d582f 100644 --- a/blazor/datagrid/getting-started-with-maui-app.md +++ b/blazor/datagrid/getting-started-with-maui-app.md @@ -118,7 +118,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -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> 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. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/datagrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. ## Add Syncfusion® Blazor DataGrid component @@ -129,26 +129,50 @@ Add the Syncfusion® Blazor DataGrid compone @using Syncfusion.Blazor.Grids - - -@code{ - public List Orders { get; set; } + + + + + + + + +@code { + public List OrderData { 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(); + OrderData = OrderDetails.GetAllRecords(); } - - public class Order +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List Order = new List(); + public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry) { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + } + return Order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCountry { get; set; } } {% endhighlight %} @@ -168,176 +192,18 @@ Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/devi N> If 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). -![Blazor DataGrid Component](images/blazor-datagrid-component.webp) - -## 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. - -{% tabs %} -{% highlight razor %} - -@using Syncfusion.Blazor.Grids - - - -@code{ - public List Orders { get; set; } - - protected override void OnInitialized() - { - Orders = Enumerable.Range(1, 75).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); - } - - public class Order { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } - } -} - -{% endhighlight %} -{% endtabs %} - - -## Defining columns - -The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid. - -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). - -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. - -{% tabs %} -{% highlight razor %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## 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). - -{% tabs %} -{% highlight razor %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable sorting - -The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings). - -{% tabs %} -{% highlight razor %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable filtering - -The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). - -{% tabs %} -{% highlight razor %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable grouping - -The grouping feature enables you 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). - -{% tabs %} -{% highlight razor %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBfDWBkLabNleSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-render.webp)" %} +![Blazor DataGrid Component](images/blazor-datagrid-maui-page.webp) ## Handling exceptions Exceptions occurred during 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. +* **GridEvents** - Use the same TValue on both SfGrid and GridEvents when working with GridEvents. This ensures that event argument types such as FailureEventArgs and RowSelectEventArgs<TValue> are correctly bound. The argument passed to the `OnActionFailure` event contains the error details returned from the server. -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 application development helps in identifying exceptions effectively. Exception details can be shared with the support team to obtain solutions at the earliest stage. {% tabs %} {% highlight razor %} diff --git a/blazor/datagrid/getting-started-with-server-app.md b/blazor/datagrid/getting-started-with-server-app.md index 6334e9de21..20cf476872 100644 --- a/blazor/datagrid/getting-started-with-server-app.md +++ b/blazor/datagrid/getting-started-with-server-app.md @@ -143,7 +143,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -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 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 Blazor application. +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 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 Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/datagrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. ## Add Syncfusion® Blazor DataGrid component @@ -165,193 +165,69 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati @using Syncfusion.Blazor.Grids - - -@code{ - public List Orders { get; set; } + + + + + + + + +@code { + public List OrderData { 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; } - + OrderData = OrderDetails.GetAllRecords(); } } - {% 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. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Grids - - - -@code{ - public List Orders { get; set; } - - protected override void OnInitialized() +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List Order = new List(); + public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry) { - Orders = Enumerable.Range(1, 75).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; } - - public class Order { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + } + return Order; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCountry { get; set; } } {% 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. -## Defining columns - -The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid. - -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). - -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. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## 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). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable sorting - -The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable filtering - -The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable grouping - -The grouping feature enables you 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). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBfDWBkLabNleSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid.gif)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBdteMnJfRLuDhc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Handling exceptions Exceptions occurred during 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. +* **GridEvents** - Use the same TValue on both SfGrid and GridEvents when working with GridEvents. This ensures that event argument types such as FailureEventArgs and RowSelectEventArgs<TValue> are correctly bound. The argument passed to the `OnActionFailure` event contains the error details returned from the server. -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 application development helps in identifying exceptions effectively. Exception details can be shared with the support team to obtain solutions at the earliest stage. {% tabs %} {% highlight razor tabtitle="Home.razor" %} diff --git a/blazor/datagrid/getting-started-with-web-app.md b/blazor/datagrid/getting-started-with-web-app.md index 008222d3c4..42078007ca 100644 --- a/blazor/datagrid/getting-started-with-web-app.md +++ b/blazor/datagrid/getting-started-with-web-app.md @@ -149,7 +149,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -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> 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. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/datagrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. ## Add Syncfusion® Blazor DataGrid component @@ -171,193 +171,69 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem @using Syncfusion.Blazor.Grids - - -@code{ - public List Orders { get; set; } + + + + + + + + +@code { + public List OrderData { 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; } - + OrderData = OrderDetails.GetAllRecords(); } } - {% endhighlight %} -{% endtabs %} - -{% 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. - -## 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. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.Grids - - - -@code{ - public List Orders { get; set; } - - protected override void OnInitialized() +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List Order = new List(); + public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry) { - Orders = Enumerable.Range(1, 75).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; } - - public class Order { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + } + return Order; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCountry { get; set; } } {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBdteMnJfRLuDhc?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 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). - -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. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## 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). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable sorting - -The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable filtering - -The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable grouping - -The grouping feature enables you 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). - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBfDWBkLabNleSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid.gif)" %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Grid component in the default web browser. ## Handling exceptions Exceptions occurred during 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. +* **GridEvents** - Use the same TValue on both SfGrid and GridEvents when working with GridEvents. This ensures that event argument types such as FailureEventArgs and RowSelectEventArgs<TValue> are correctly bound. 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. -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 application development helps in identifying exceptions effectively. Exception details can be shared with the support team to obtain solutions at the earliest stage. {% tabs %} {% highlight razor tabtitle="Home.razor" %} diff --git a/blazor/datagrid/getting-started.md b/blazor/datagrid/getting-started.md index 0981e3c6b0..f50f70cfcd 100644 --- a/blazor/datagrid/getting-started.md +++ b/blazor/datagrid/getting-started.md @@ -141,7 +141,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -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 the 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 the Blazor application. +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 the 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 the Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/datagrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. ## Add Syncfusion® Blazor DataGrid component @@ -149,196 +149,70 @@ Add the Syncfusion® Blazor DataGrid compone {% tabs %} {% highlight razor tabtitle="Index.razor" %} - @using Syncfusion.Blazor.Grids - - -@code{ - public List Orders { get; set; } + + + + + + + + +@code { + public List OrderData { 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; } - + OrderData = OrderDetails.GetAllRecords(); } } - {% 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.webp)" %} - -## 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. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Grids - - - -@code{ - public List Orders { get; set; } - - protected override void OnInitialized() +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List Order = new List(); + public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry) { - Orders = Enumerable.Range(1, 75).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; } - - public class Order { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + } + return Order; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCountry { get; set; } } - {% 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. -## Defining columns - -The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid. - -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). - -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. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## 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). - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable sorting - -The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings). - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable filtering - -The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable grouping - -The grouping feature enables you 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). - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBfDWBkLabNleSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBdteMnJfRLuDhc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Handling exceptions Exceptions occurred during 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. +* **GridEvents** - Use the same TValue on both SfGrid and GridEvents when working with GridEvents. This ensures that event argument types such as FailureEventArgs and RowSelectEventArgs<TValue> are correctly bound. The argument passed to the `OnActionFailure` event contains the error details returned from the server. -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 application development helps in identifying exceptions effectively. Exception details can be shared with the support team to obtain solutions at the earliest stage. {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/images/blazor-datagrid-component.webp b/blazor/datagrid/images/blazor-datagrid-component.webp index 978b733268..fcef2fba47 100644 Binary files a/blazor/datagrid/images/blazor-datagrid-component.webp and b/blazor/datagrid/images/blazor-datagrid-component.webp differ diff --git a/blazor/datagrid/images/blazor-datagrid-maui-page.webp b/blazor/datagrid/images/blazor-datagrid-maui-page.webp index 9b6d0c14fc..8846b4028a 100644 Binary files a/blazor/datagrid/images/blazor-datagrid-maui-page.webp and b/blazor/datagrid/images/blazor-datagrid-maui-page.webp differ