diff --git a/blazor-toc.html b/blazor-toc.html index b87822b9cb..2d5a3bdf9d 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -2063,7 +2063,13 @@ Styling and appearance
  • - Customize empty grid display message + Customize the empty record template +
    • +
  • + Resize the Grid in various dimension +
    • +
  • + Use custom helper inside the loop with templates
  • Saving a new row at a particular index of the grid page @@ -2096,7 +2102,7 @@ Use radio button instead of checkbox in single selection mode of Grid
  • - Enable or Disable the Grid Component + Enable/Disable Grid and its actions
    • diff --git a/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md b/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md index cf16ad6dba..accb55399b 100644 --- a/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md +++ b/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md @@ -1,21 +1,30 @@ --- layout: post -title: Getting Started with Blazor DataGrid in WebAssembly | Syncfusion -description: Checkout the documentation for getting started with Blazor WebAssembly App and Syncfusion Blazor DataGrid Component in Visual Studio using .NET CLI and more. +title: Getting Started with Blazor DataGrid in webAssembly | Syncfusion +description: Checkout the documentation for getting started with Blazor webAssembly app and Syncfusion Blazor DataGrid using .NET CLI and more. platform: Blazor control: DataGrid documentation: ug --- - +# Blazor DataGrid in WebAssembly App using CLI -# Blazor DataGrid Component in WebAssembly App using CLI +This article provides step-by-step instructions to build a Blazor WebAssembly App using the Syncfusion Blazor DataGrid with the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet). -This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor DataGrid component using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet/8.0). +## Using playground -## Prerequisites +[Blazor Playground](https://blazor.syncfusion.com/documentation/blazor-playground/overview) allows you to interact with our Blazor components directly in your web browser without need to install any required NuGet packages. By default, the `Syncfusion.Blazor` package is included in this. -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). +{% playground "https://blazorplayground.syncfusion.com/" %} + +## Manually creating a project + +This section provides a brief explanation on how to manually create a Blazor WebAssembly App using CLI. + +### Prerequisites + +Ensure you have the latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download) installed. +To check the installed version, run the following command in a command prompt (Windows), terminal (macOS), or shell (Linux): {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -25,9 +34,9 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly project using .NET CLI +### Create a Blazor webAssembly project using .NET CLI -Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly application in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +To create a new Blazor WebAssembly app, open your terminal or command prompt and run: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -50,24 +59,27 @@ dotnet new blazorwasm -o BlazorApp -ho N> If you have installed multiple SDK versions and need any specific framework version (net6.0/net7.0) project, then add -f flag along with dotnet new blazorwasm comment. Refer [here](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new#blazorwasm) for the available options. -## Install Syncfusion® Blazor packages in the App +### Install Syncfusion Blazor DataGrid and Themes NuGet in the app -To Add `Syncfusion.Blazor.Grid` NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a 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 add the `Syncfusion.Blazor.Grid` NuGet package to your application, use the following command in the command prompt (Windows) or terminal (Linux/macOS). For more details, refer to the [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} -dotnet add package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Grid --version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }} 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> 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. + +### Register Syncfusion Blazor service -## Register Syncfusion® Blazor Service +1. Import namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +Open the **~/_Imports.razor** file and add the following namespaces: ```cshtml @@ -75,8 +87,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio @using Syncfusion.Blazor.Grids ``` +2. Register the Syncfusion service -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +In your **~/Program.cs** file, register the Syncfusion Blazor service as shown below: {% tabs %} {% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %} @@ -98,11 +111,13 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +### 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). Reference the stylesheet and script in the `` of the main page as follows: +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` section of your main layout page as shown below: -* For Blazor WebAssembly app, include it in the **~/index.html** file. +**Blazor WebAssembly App** + +Add the following to the **wwwroot/index.html** file: ```html @@ -111,41 +126,69 @@ 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. -## Add Blazor DataGrid component +### Add Blazor DataGrid -Add the Syncfusion® Blazor DataGrid component in the **~/Pages/Index.razor** file. +Add the Syncfusion Blazor DataGrid in the **~/Pages/Home.razor** file. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} - +@using Syncfusion.Blazor.Grids -@code{ - public List Orders { get; set; } + +@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(); - } + Orders = OrderData.GetAllRecords(); + } +} - public class Order +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData() { - public int? OrderID { get; set; } - public string CustomerID { get; set; } } + public OrderData( int? OrderID, string CustomerID) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + } + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int code = 10; + for (int i = 1; i < 2; i++) + { + Orders.Add(new OrderData(1, "ALFKI")); + Orders.Add(new OrderData(2, "ALFKI")); + Orders.Add(new OrderData(3, "ANANTR")); + Orders.Add(new OrderData(4, "ANANTR")); + Orders.Add(new OrderData(5, "ALFKI")); + code += 5; + } + } + return Orders; + } + public int? OrderID { get; set; } + public string CustomerID { get; set; } } {% endhighlight %} {% endtabs %} -* In the command prompt (Windows) or terminal (Linux and macOS) to run the following command to build and start the app. The app listening on `http://localhost:` and view it in the browser. +* To build and run the Blazor WebAssembly application, use the following command in your terminal or command prompt: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -155,151 +198,477 @@ dotnet run {% endhighlight %} {% endtabs %} -![Blazor DataGrid Component](../images/blazor-datagrid-component.png) +Once the app starts, navigate to `http://localhost:` in your browser to view the Grid. -## Defining row data +![Blazor DataGrid](../images/blazor-datagrid-component.png) -To bind data for the DataGrid component, 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. +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrIZoWghZXnoxDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Defining row data + +To bind data for the Syncfusion Blazor DataGrid, assign a `List` (or any other collection that implements `IEnumerable`) 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 %} +{% highlight razor tabtitle="Home.razor" %} - +@using Syncfusion.Blazor.Grids -@code{ - public List Orders { get; set; } + +@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; } - } + Orders = OrderData.GetAllRecords(); + } } +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} +public class OrderData +{ + public static List Orders = new List(); + public OrderData() + { + + } + public OrderData( int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int code = 10; + for (int i = 1; i < 2; i++) + { + Orders.Add(new OrderData(10248, "VINET",new DateTime(1996,07,07), 32.38)); + Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 07), 92.38)); + Orders.Add(new OrderData(10250, "HANAR", new DateTime(1996, 07, 07), 62.77)); + Orders.Add(new OrderData(10251, "VICTE", new DateTime(1996, 07, 07), 12.38)); + Orders.Add(new OrderData(10252, "SUPRD", new DateTime(1996, 07, 07), 82.38)); + Orders.Add(new OrderData(10253, "CHOPS", new DateTime(1996, 07, 07), 31.31)); + Orders.Add(new OrderData(10254, "RICSU", new DateTime(1996, 07, 07), 22.37)); + Orders.Add(new OrderData(10255, "WELLI", new DateTime(1996, 07, 07), 44.34)); + Orders.Add(new OrderData(10256, "RICSU", new DateTime(1996, 07, 07), 31.33)); + code += 5; + } + } + return Orders; + } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } +} {% endhighlight %} {% endtabs %} -## Defining columns +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrotoiKCoYkHoHn?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 datagrid. +The columns are automatically generated when columns declaration is empty or undefined while initializing the Syncfusion Blazor DataGrid. -The DataGrid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component. In `GridColumn` component we have properties to customize columns. +The Grid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). In `GridColumn` we have properties to customize columns. -Let’s check the properties used here: +Here are the key properties used in the example below: -* [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 an array of JavaScript objects. -* [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` as `Right`. -* Also, we 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) : Binds the column to a property on your data model. + +* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) : Sets the displayed column title. + +* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) : Controls the horizontal alignment of cell text. By default, text is left-aligned; set this to `TextAlign.Right` to right-align. + +* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) : Applies standard or custom formatting to numeric and date values. + +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) : Specifies the column data type. + +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width): Sets the column’s width. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Grids - - - - + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData() + { + + } + public OrderData( int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int code = 10; + for (int i = 1; i < 2; i++) + { + Orders.Add(new OrderData(10248, "VINET",new DateTime(1996,07,07), 32.38)); + Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 07), 92.38)); + Orders.Add(new OrderData(10250, "HANAR", new DateTime(1996, 07, 07), 62.77)); + Orders.Add(new OrderData(10251, "VICTE", new DateTime(1996, 07, 07), 12.38)); + Orders.Add(new OrderData(10252, "SUPRD", new DateTime(1996, 07, 07), 82.38)); + Orders.Add(new OrderData(10253, "CHOPS", new DateTime(1996, 07, 07), 31.31)); + Orders.Add(new OrderData(10254, "RICSU", new DateTime(1996, 07, 07), 22.37)); + Orders.Add(new OrderData(10255, "WELLI", new DateTime(1996, 07, 07), 44.34)); + Orders.Add(new OrderData(10256, "RICSU", new DateTime(1996, 07, 07), 31.33)); + code += 5; + } + } + return Orders; + } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } +} {% endhighlight %} {% endtabs %} -## Enable paging +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLyNosqiEMHcPrL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The paging feature enables users to view the 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) component. +### Enable paging + +The Syncfusion Blazor DataGrid can display records in a paged format. To enable paging, set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. You can customize the pager using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings). {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Grids - - - - - - - + + + + + + + +@code { + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData() + { + + } + public OrderData( int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int code = 10; + for (int i = 1; i < 2; i++) + { + Orders.Add(new OrderData(10248, "VINET",new DateTime(1996,07,07), 32.38)); + Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 07), 92.38)); + Orders.Add(new OrderData(10250, "HANAR", new DateTime(1996, 07, 07), 62.77)); + Orders.Add(new OrderData(10251, "VICTE", new DateTime(1996, 07, 07), 12.38)); + Orders.Add(new OrderData(10252, "SUPRD", new DateTime(1996, 07, 07), 82.38)); + Orders.Add(new OrderData(10253, "CHOPS", new DateTime(1996, 07, 07), 31.31)); + Orders.Add(new OrderData(10254, "RICSU", new DateTime(1996, 07, 07), 22.37)); + Orders.Add(new OrderData(10255, "WELLI", new DateTime(1996, 07, 07), 44.34)); + Orders.Add(new OrderData(10256, "RICSU", new DateTime(1996, 07, 07), 31.33)); + code += 5; + } + } + return Orders; + } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } +} {% endhighlight %} {% endtabs %} -## Enable sorting +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrejSMgCdnGAijD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -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) component. +### Enable sorting + +The Syncfusion Blazor DataGrid can sort records in ascending or descending order. To enable sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**. You can customize the sorting using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings). {% tabs %} -{% highlight razor %} - - - - - - - - - +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + +@code { + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData() + { + + } + public OrderData( int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int code = 10; + for (int i = 1; i < 2; i++) + { + Orders.Add(new OrderData(10248, "VINET",new DateTime(1996,07,07), 32.38)); + Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 07), 92.38)); + Orders.Add(new OrderData(10250, "HANAR", new DateTime(1996, 07, 07), 62.77)); + Orders.Add(new OrderData(10251, "VICTE", new DateTime(1996, 07, 07), 12.38)); + Orders.Add(new OrderData(10252, "SUPRD", new DateTime(1996, 07, 07), 82.38)); + Orders.Add(new OrderData(10253, "CHOPS", new DateTime(1996, 07, 07), 31.31)); + Orders.Add(new OrderData(10254, "RICSU", new DateTime(1996, 07, 07), 22.37)); + Orders.Add(new OrderData(10255, "WELLI", new DateTime(1996, 07, 07), 44.34)); + Orders.Add(new OrderData(10256, "RICSU", new DateTime(1996, 07, 07), 31.33)); + code += 5; + } + } + return Orders; + } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } +} {% endhighlight %} {% endtabs %} -## Enable filtering +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhSXosACxQRZrki?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -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) component. +### Enable filtering + +The Syncfusion Blazor DataGrid can filter records to display only those that meet specific criteria. To enable filtering, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true**. You can customize the filtering behavior using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). {% tabs %} -{% highlight razor %} - - - - - - - - - +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + +@code { + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData() + { + + } + public OrderData( int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int code = 10; + for (int i = 1; i < 2; i++) + { + Orders.Add(new OrderData(10248, "VINET",new DateTime(1996,07,07), 32.38)); + Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 07), 92.38)); + Orders.Add(new OrderData(10250, "HANAR", new DateTime(1996, 07, 07), 62.77)); + Orders.Add(new OrderData(10251, "VICTE", new DateTime(1996, 07, 07), 12.38)); + Orders.Add(new OrderData(10252, "SUPRD", new DateTime(1996, 07, 07), 82.38)); + Orders.Add(new OrderData(10253, "CHOPS", new DateTime(1996, 07, 07), 31.31)); + Orders.Add(new OrderData(10254, "RICSU", new DateTime(1996, 07, 07), 22.37)); + Orders.Add(new OrderData(10255, "WELLI", new DateTime(1996, 07, 07), 44.34)); + Orders.Add(new OrderData(10256, "RICSU", new DateTime(1996, 07, 07), 31.33)); + code += 5; + } + } + return Orders; + } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } +} + {% endhighlight %} {% endtabs %} -## Enable grouping +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrIDoMqsHPeUEtz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The grouping feature enables you to view the 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) component. +### Enable grouping + +The Syncfusion Blazor DataGrid can group records by one or more columns. To enable grouping, set the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property to **true**. You can customize grouping behavior using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings). {% tabs %} -{% highlight razor %} - - - - - - - - - +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + +@code { + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData() + { + + } + public OrderData( int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int code = 10; + for (int i = 1; i < 2; i++) + { + Orders.Add(new OrderData(10248, "VINET",new DateTime(1996,07,07), 32.38)); + Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 07), 92.38)); + Orders.Add(new OrderData(10250, "HANAR", new DateTime(1996, 07, 07), 62.77)); + Orders.Add(new OrderData(10251, "VICTE", new DateTime(1996, 07, 07), 12.38)); + Orders.Add(new OrderData(10252, "SUPRD", new DateTime(1996, 07, 07), 82.38)); + Orders.Add(new OrderData(10253, "CHOPS", new DateTime(1996, 07, 07), 31.31)); + Orders.Add(new OrderData(10254, "RICSU", new DateTime(1996, 07, 07), 22.37)); + Orders.Add(new OrderData(10255, "WELLI", new DateTime(1996, 07, 07), 44.34)); + Orders.Add(new OrderData(10256, "RICSU", new DateTime(1996, 07, 07), 31.33)); + code += 5; + } + } + return Orders; + } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } +} + {% endhighlight %} {% endtabs %} -![Blazor DataGrid Component](../images/blazor-datagrid.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBoZosUMRYBBVqA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor DataGrid](../images/blazor-datagrid.gif) + +> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/How-to-Getting-Started-Blazor-DataGrid-Samples/tree/master/BlazorApp). ## See also diff --git a/blazor/datagrid/how-to/change-datasource-dynamically.md b/blazor/datagrid/how-to/change-datasource-dynamically.md index dfc552bc76..16f5f2da0f 100644 --- a/blazor/datagrid/how-to/change-datasource-dynamically.md +++ b/blazor/datagrid/how-to/change-datasource-dynamically.md @@ -1,68 +1,110 @@ --- layout: post -title: Change datasource dynamically in Syncfusion Blazor DataGrid Component -description: Learn here all about Change datasource dynamically in Syncfusion Blazor DataGrid component and more. +title: Change datasource dynamically in Syncfusion Blazor DataGrid +description: Learn here all about change datasource dynamically in Syncfusion Blazor DataGrid and more. platform: Blazor control: DataGrid documentation: ug --- -# Change Datasource Dynamically in Blazor DataGrid Component +# Change Datasource Dynamically in Blazor DataGrid -You can change the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) of the datagrid component dynamically through an external button. +The Syncfusion Blazor DataGrid allows to change the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) of the Grid dynamically through an external button. This feature is useful to display different sets of data based on specific actions. -This is demonstrated in the following sample code where the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) is dynamically modified using the bounded property, +To implement this: + +* Bind the Grid's `DataSource` property to a public list (e.g., Orders). + +* Create a method that replaces this list with a new set of data. + +* Trigger this method through a button or any other user interaction. + +* The Grid automatically detects the data change and re-renders with the new content. + +The following example demonstrates how to change the `DataSource` of the Grid dynamically: + + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Buttons -Change data source dynamically +Change Data Source - - + - - - - - + + + + + -@code{ - public List Orders { get; set; } +@code { + private SfGrid grid; + 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(); + Orders = OrderData.GetAllRecords(); + } + + private void ChangeDataSource() + { + // Replace the DataSource with a new list of records. + Orders = OrderData.GetNewRecords(); } - public void Change() +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + + public OrderData() { } + + public OrderData(int orderID, string customerID, double freight, DateTime? orderDate) { - // Data source is modified dynamically - this.Orders = Enumerable.Range(1, 45).Select(x => new Order() + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.OrderDate = orderDate; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) { - OrderID = 100 + x, - CustomerID = (new string[] { "CHOPS", "HANAR", "SUPRD", "TOMSP", "VINET" })[new Random().Next(5)], - Freight = 1.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); + Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(1996, 7, 4))); + Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5))); + Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6))); + Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7))); + Orders.Add(new OrderData(10252, "SUPRD", 151.30, new DateTime(1996, 7, 8))); + Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9))); + Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10))); + } + return Orders; } - public class Order + + public static List GetNewRecords() { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + return new List + { + new OrderData(20001, "ALFKI", 21.50, DateTime.Now.AddDays(-1)), + new OrderData(20002, "ANATR", 42.75, DateTime.Now.AddDays(-2)), + new OrderData(20003, "ANTON", 17.00, DateTime.Now.AddDays(-3)), + new OrderData(20004, "BERGS", 65.20, DateTime.Now.AddDays(-4)) + }; } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public DateTime? OrderDate { get; set; } } -``` -The following GIF represents DataGrid data source modified dynamically on button click, +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhIXeCHJywphWgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Changing Datasource Dynamically in Blazor DataGrid](../images/blazor-datagrid-dynamic-datasource.gif) diff --git a/blazor/datagrid/how-to/custom-control-in-grid-toolbar.md b/blazor/datagrid/how-to/custom-control-in-grid-toolbar.md index fb8af6c23f..d0411b2553 100644 --- a/blazor/datagrid/how-to/custom-control-in-grid-toolbar.md +++ b/blazor/datagrid/how-to/custom-control-in-grid-toolbar.md @@ -7,13 +7,19 @@ control: DataGrid documentation: ug --- -# Custom Control in Datagrid Toolbar in Blazor DataGrid Component +# Render SfAutoComplete in custom toolbar -You can render custom controls inside the datagrid's toolbar area. This can be achieved by initializing the custom controls within the Template property of the Toolbar component. This toolbar component is defined inside the datagrid component. +Rendering the [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) in the custom toolbar of the Syncfusion Blazor DataGrid allows you to enhance the Grid's usability by enabling dynamic search operations based on input. -This is demonstrated in the following sample code where Autocomplete component is rendered inside the DataGrid's toolbar and is used for performing search operation on the datagrid, +This can be achieved by utilizing the `Template` property of the [Toolbar](https://blazor.syncfusion.com/documentation/toolbar/getting-started-webapp). The example below demonstrates how to render the `AutoComplete` within the custom toolbar. The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event of the `AutoComplete` is bound to the **OnSearch** method, which performs a search operation on the Grid based on the selected input. + +In the **OnSearch** method, the selected value from the `AutoComplete` is used as a search keyword. The Grid’s [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) method is called to filter records matching the keyword across all searchable columns. + +The following example demonstrates how to render the `AutoComplete` inside the Grid's toolbar and use it to perform search operations: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.DropDowns @@ -36,8 +42,8 @@ This is demonstrated in the following sample code where Autocomplete component i - + @@ -45,47 +51,77 @@ This is demonstrated in the following sample code where Autocomplete component i public class CustomerDetails { public string Name { get; set; } - public int Id { get; set; } } List Customers = new List { - new CustomerDetails() { Name = "ALFKI", Id = 1 }, - new CustomerDetails() { Name = "ANANTR", Id = 2 }, - new CustomerDetails() { Name = "ANTON", Id = 3 }, - new CustomerDetails() { Name = "BLONP", Id = 4 }, - new CustomerDetails() { Name = "BOLID", Id = 5 } + new CustomerDetails() { Name = "VINET", Id = 1 }, + new CustomerDetails() { Name = "TOMSP", Id = 2 }, + new CustomerDetails() { Name = "HANAR", Id = 3 }, + new CustomerDetails() { Name = "VICTE", Id = 4 }, + new CustomerDetails() { Name = "SUPRD", Id = 5 } }; private SfGrid Grid; 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 async Task OnSearch(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) - { - await this.Grid.Search(args.Value); + Orders = Order.GetAllRecords(); } - public class Order + public async Task OnSearch(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + await this.Grid.SearchAsync(args.Value); } } -``` -The following GIF represents the search operation performed on the datagrid using the Autocomplete component rendered in the toolbar, +{% endhighlight %} +{% highlight c# tabtitle="Order.cs" %} + + public class Order + { + public static List Orders = new List(); + + public Order(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.ShipCity = shipCity; + this.ShipName = shipName; + this.ShipCountry = shipCountry; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new Order(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France")); + Orders.Add(new Order(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany")); + Orders.Add(new Order(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil")); + Orders.Add(new Order(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France")); + Orders.Add(new Order(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium")); + Orders.Add(new Order(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil")); + Orders.Add(new Order(10254, "VICTE", 22.98, "Bern", "Chop-suey Chinese", "Switzerland")); + Orders.Add(new Order(10255, "TOMSP", 148.33, "Genève", "Richter Supermarkt", "Switzerland")); + Orders.Add(new Order(10256, "HANAR", 13.97, "Resende", "Wellington Import Export", "Brazil")); + Orders.Add(new Order(10257, "VINET", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela")); + + } + + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public string ShipCountry { get; set; } + } + +{% endhighlight %} +{% endtabs %} -![Blazor DataGrid with Custom ToolBar](../images/blazor-datagrid-custom-toolbar.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthoNTLFzGxGrdMg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md b/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md new file mode 100644 index 0000000000..665d44c0a9 --- /dev/null +++ b/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md @@ -0,0 +1,126 @@ +--- +layout: post +title: Use custom helper inside the loop with templates in Blazor DataGrid | Syncfusion +description: Learn here all about place cancel icon in search bar in Syncfusion Blazor DataGrid. +platform: Blazor +control: DataGrid +documentation: ug +--- + +# Use custom helper inside the loop with templates in Blazor DataGrid + +The Syncfusion Blazor DataGrid allows you to use custom helpers inside the loop with [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?#Syncfusion_Blazor_Grids_GridColumn_Template) property of a column. This feature enables you to create complex templates that can incorporate additional helper functions. + +The **customer rating** column includes a custom template defined using `Template`. Inside this template, iterates through the item array and generates `` tag, displayed as stars using the CSS below: + +```css +.e-grid .rating .star:before { + content: '★'; +} + +.e-grid .rating .star { + font-size: 132%; + color: lightgrey; +} +``` + +The class is dynamically assigned based on the result of the `isRatingGreater` method, highlighting the star using the CSS below: + +```css +.e-grid .rating .star.checked { + color: #ffa600; +} +``` + +This is demonstrated in the following example. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + +@code { + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = Order.GetAllRecords(); + } + + private bool IsRatingGreater(int dataRating, int comparisonValue) + { + return dataRating >= comparisonValue; + } +} + +{% endhighlight %} +{% highlight c# tabtitle="Order.cs" %} + +public class Order +{ + public int OrderID { get; set; } + public string CustomerID { get; set; } + public int Rating { get; set; } + + public static List GetAllRecords() + { + return new List + { + new Order { OrderID = 1001, CustomerID = "ALFKI", Rating = 3 }, + new Order { OrderID = 1002, CustomerID = "ANATR", Rating = 5 }, + new Order { OrderID = 1003, CustomerID = "ANTON", Rating = 2 }, + new Order { OrderID = 1004, CustomerID = "AROUT", Rating = 4 }, + new Order { OrderID = 1005, CustomerID = "BERGS", Rating = 1 }, + new Order { OrderID = 1006, CustomerID = "BLAUS", Rating = 5 }, + new Order { OrderID = 1007, CustomerID = "BLONP", Rating = 3 }, + new Order { OrderID = 1008, CustomerID = "BOLID", Rating = 2 }, + new Order { OrderID = 1009, CustomerID = "BONAP", Rating = 4 }, + new Order { OrderID = 1010, CustomerID = "BOTTM", Rating = 3 }, + new Order { OrderID = 1011, CustomerID = "BSBEV", Rating = 5 }, + new Order { OrderID = 1012, CustomerID = "CACTU", Rating = 1 }, + new Order { OrderID = 1013, CustomerID = "CENTC", Rating = 4 } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLeXzrApyBafWHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/how-to/customize-empty-grid-display-message.md b/blazor/datagrid/how-to/customize-empty-grid-display-message.md index fc23626efd..2b3c5267a9 100644 --- a/blazor/datagrid/how-to/customize-empty-grid-display-message.md +++ b/blazor/datagrid/how-to/customize-empty-grid-display-message.md @@ -1,44 +1,101 @@ --- layout: post -title: Customize empty display message in Blazor DataGrid | Syncfusion -description: Learn here all about customizing empty grid display message in Syncfusion Blazor DataGrid component and more. +title: Customize the Empty Record Template in the Blazor DataGrid | Syncfusion +description: Learn here all about Customize the Empty Record Template in Syncfusion Blazor DataGrid. platform: Blazor control: DataGrid documentation: ug --- -# Customize Empty Grid Display Message in Blazor DataGrid Component +# Customize the empty record template in Blazor DataGrid -You can customize the message shown when rendering an empty grid by using the `EmptyRecordTemplate` feature. +The empty record template feature in the Syncfusion Blazor DataGrid allows you to use custom content such as images, text, or other components, when the Grid doesn't contain any records to display. This feature replaces the default message of 'No records to display' typically shown in the Grid. -This is demonstrated in the following sample code, +To activate this feature, set the [EmptyRecordTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_EmptyRecordTemplate) feature of the Grid. The `EmptyRecordTemplate` feature expects the HTML element or a function that returns the HTML element. + +The following example demonstrates how an image and text can be rendered as a template to indicate that the Grid has no data to display: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Data +@using System.ComponentModel.DataAnnotations - + + + - Custom no record message +
    + No record + There is no data available to display at the moment. +
    - - - - + + + + +     -@code{ - public List Orders { get; set; } +@code { + private SfGrid Grid; + public List Orders { get; set; } = new(); + public string ImageUrl = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE5OTZfMjQxKSI+CjxyZWN0IHg9Ii0xLjAyNDkiIHk9IjguNTcwNTYiIHdpZHRoPSIzNy4wMTU2IiBoZWlnaHQ9IjM3Ljc2MjMiIHJ4PSI3IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTUgLTEuMDI0OSA4LjU3MDU2KSIgZmlsbD0iI0VGRjNGOSIvPgo8cGF0aCBkPSJNMzcuODIzMSA3LjUxMTIzTDM4LjE4MDMgOC4wNzI1NEwzOC43NDE2IDguNDI5NzdMMzguMTgwMyA4Ljc4N0wzNy44MjMxIDkuMzQ4MzFMMzcuNDY1OSA4Ljc4N0wzNi45MDQ1IDguNDI5NzdMMzcuNDY1OSA4LjA3MjU0TDM3LjgyMzEgNy41MTEyM1oiIHN0cm9rZT0iIzY1RkE4NiIgc3Ryb2tlLXdpZHRoPSIwLjQ1OTI3IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMC40OTY0IDM4LjA1MjdWMzkuODg5OE05LjU3Nzg4IDM4Ljk3MTNIMTEuNDE1IiBzdHJva2U9IiM1RjdCRjgiIHN0cm9rZS13aWR0aD0iMC40NTkyNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxwYXRoIGQ9Ik04IDExQzggOS4zNDMxNCA5LjM0MzE1IDggMTEgOEgzMEMzMS42NTY5IDggMzMgOS4zNDMxNSAzMyAxMVYzMC4wMDAxQzMzIDMxLjY1NjkgMzEuNjU2OCAzMy4wMDAxIDMwIDMzLjAwMDFMMTEgMzIuOTk5OUM5LjM0MzEzIDMyLjk5OTkgOCAzMS42NTY4IDggMjkuOTk5OVYxMVoiIGZpbGw9IndoaXRlIiBzdHJva2U9IiNBM0IyQzgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8Y2lyY2xlIGN4PSI0LjEzMzM4IiBjeT0iMzAuMzkzMiIgcj0iMC45MTg1NCIgc3Ryb2tlPSIjRUY1ODU4IiBzdHJva2Utd2lkdGg9IjAuNDU5MjciLz4KPHBhdGggZD0iTTkgMTVIMzIiIHN0cm9rZT0iI0EzQjJDOCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPGNpcmNsZSBjeD0iMjgiIGN5PSIyOCIgcj0iOSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzRDNTY2NiIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0yOCAyM1YyOCIgc3Ryb2tlPSIjNEM1NjY2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8Y2lyY2xlIGN4PSIyOCIgY3k9IjMyIiByPSIxLjUiIGZpbGw9IiM0QzU2NjYiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8xOTk2XzI0MSI+CjxyZWN0IHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K"; + public List ToolbarItems = new() { "Add", "Edit", "Delete", "Update", "Cancel" }; +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); - public class Order + public OrderDetails(int orderId, string customerId, string shipCity, string shipName, double freight, DateTime orderDate, string shipCountry) { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + this.OrderID = orderId; + this.CustomerID = customerId; + this.ShipCity = shipCity; + this.ShipName = shipName; + this.Freight = freight; + this.OrderDate = orderDate; + this.ShipCountry = shipCountry; } + + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, new DateTime(2024, 1, 5), "France")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, new DateTime(2024, 1, 7), "Germany")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, new DateTime(2024, 1, 10), "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, new DateTime(2024, 1, 12), "France")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, new DateTime(2024, 1, 14), "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, new DateTime(2024, 1, 16), "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, new DateTime(2024, 1, 18), "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, new DateTime(2024, 1, 20), "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora", 13.97, new DateTime(2024, 1, 22), "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", 81.91, new DateTime(2024, 1, 24), "Venezuela")); + } + return order; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public string ShipCountry { get; set; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVojzBpJtpAwxhe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/how-to/enable-or-disable-grid.md b/blazor/datagrid/how-to/enable-or-disable-grid.md index 969f245d4a..97e0cda8ff 100644 --- a/blazor/datagrid/how-to/enable-or-disable-grid.md +++ b/blazor/datagrid/how-to/enable-or-disable-grid.md @@ -1,69 +1,80 @@ --- layout: post -title: Enable or Disable the Blazor Grid | Syncfusion -description: Learn here all about how to enable or disable the entire Syncfusion Blazor DataGrid component and more. +title: Enable or Disable the Blazor DataGrid | Syncfusion +description: Learn here all about how to enable or disable the entire Syncfusion Blazor DataGrid and more. platform: Blazor control: DataGrid documentation: ug --- -# Enable or Disable the Grid Component +# Enable or disable Blazor DataGrid and its actions -You can enable or disable the Grid component by adding the attributes for the Grid and applying the style accordingly. +The Syncfusion Blazor DataGrid can be dynamically enabled or disabled by toggling a button. This feature is useful to restrict user interaction with the Grid during certain application states or processes. This is achieved by applying a CSS class to restrict interaction and setting a `attribute` for styling. -In the following sample, the `SfRadioButton` is rendered: Using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfRadioButton-1.html#Syncfusion_Blazor_Buttons_SfRadioButton_1_ValueChange) event of the `SfRadioButton`, you can enable or disable the Grid component. +To implement this: -```cshtml +* Define a CSS class `(.disabled)` to visually and functionally disable the Grid. + +```css +.grid-wrapper.disabled { + opacity: 0.5; + pointer-events: none; + touch-action: none; + cursor: not-allowed; +} +``` +* Bind a boolean flag `IsGridDisabled` to update the wrapper class and Grid attributes. + +* Use a button to toggle the flag and control the Grid state. + +The following example demonstrates how to enable or disable the Grid and its actions using a button: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons - - + + @(IsGridDisabled ? "Enable Grid" : "Disable Grid") + + +
    + + + + + + + + + +
    - - - - - - - -@code{ - private string stringChecked = "No"; - public void OnChange(ChangeArgs Args, string val) - { - if (val == "Yes") - { - GridAttributes["disable"] = "yes"; - } - else if (val == "No") - { - GridAttributes["disable"] = "no"; - } - } - - private Dictionary GridAttributes { get; set; } = new Dictionary(); - public List Orders { get; set; } +@code { + private bool IsGridDisabled = false; + private Dictionary GridAttributes { get; set; } = new(); + public List Orders { get; set; } + private List Toolbar = new() { "Add", "Edit", "Delete", "Update", "Cancel" }; protected override void OnInitialized() { GridAttributes.Add("disable", "no"); - Orders = Enumerable.Range(1, 1000).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(); + Orders = OrderDetails.GetAllRecords(); + } + + private void ToggleGrid() + { + IsGridDisabled = !IsGridDisabled; + GridAttributes["disable"] = IsGridDisabled ? "yes" : "no"; } public class Order @@ -75,5 +86,52 @@ In the following sample, the `SfRadioButton` is rendered: Using the [ValueChange } } -``` -![Enable or Disable the Blazor DataGrid](../images/enable-or-disable-the-blazor-datagrid.gif) +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + + public OrderDetails(int orderId, string customerId, string shipCity, string shipName,double freight, DateTime orderDate, string shipCountry) + { + this.OrderID = orderId; + this.CustomerID = customerId; + this.ShipCity = shipCity; + this.ShipName = shipName; + this.Freight = freight; + this.OrderDate = orderDate; + this.ShipCountry = shipCountry; + } + + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, new DateTime(2024, 1, 5), "France")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, new DateTime(2024, 1, 7), "Germany")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, new DateTime(2024, 1, 10), "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, new DateTime(2024, 1, 12), "France")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, new DateTime(2024, 1, 14), "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, new DateTime(2024, 1, 16), "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, new DateTime(2024, 1, 18), "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, new DateTime(2024, 1, 20), "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora", 13.97, new DateTime(2024, 1, 22), "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", 81.91, new DateTime(2024, 1, 24), "Venezuela")); + } + return order; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjheZIiyqvGbDYvc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/how-to/grid-customization.md b/blazor/datagrid/how-to/grid-customization.md index 95c9cda831..cb87b5efcc 100644 --- a/blazor/datagrid/how-to/grid-customization.md +++ b/blazor/datagrid/how-to/grid-customization.md @@ -1,19 +1,31 @@ --- layout: post -title: DataGrid customization in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about DataGrid customization in Syncfusion Blazor DataGrid component and more. +title: Apply custom cell styling based on data in Blazor DataGrid | Syncfusion +description: Checkout and learn here all about apply custom cell styling based on data in Syncfusion Blazor DataGrid and more. platform: Blazor control: DataGrid documentation: ug --- -# DataGrid Customization in Blazor DataGrid Component +# Apply custom cell styling based on data in Blazor DataGrid -It is possible to customize the default styles of the DataGrid component. This can be achieved by adding class dynamically to the columns using the `AddClass` method of the [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Query) event. Then the required styles are added to this class. +The Syncfusion Blazor DataGrid allows you to dynamically apply custom styles to individual cells using the [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_QueryCellInfo) event. This feature enables highlighting or visually differentiating specific data based on conditions. -This is demonstrated in the following sample code, +In the example below, the `QueryCellInfo `event is used to add CSS classes to the **Freight** column cells based on their values. Each class is styled with a different text and background color using standard CSS. + +To implement this: + +* Attach the **QueryCellInfoHandler** method to the `GridEvents.QueryCellInfo` event of the Grid. + +* Inside the handler method, use [args.Cell.AddClass()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CellDOM.html#Syncfusion_Blazor_Grids_CellDOM_AddClass_System_String___) to add CSS classes based on the value of the **Freight** field. + +* Create corresponding CSS rules for each class to apply the desired styles such as color and background-color. + +The following example demonstrates how to apply custom cell styling based on data: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Grids @@ -22,119 +34,99 @@ This is demonstrated in the following sample code, - + @code{ + private SfGrid Grid; 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 = 12 * 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; } + Orders = Order.GetAllRecords(); } - public void QueryCellInfoHandler(QueryCellInfoEventArgs args) { - if (args.Data.Freight > 40) - { - args.Cell.AddClass(new string[] { "above-40" }); - } - else if (args.Data.Freight > 20 && args.Data.Freight <= 40) - { - args.Cell.AddClass(new string[] { "above-20" }); - } - else - { - args.Cell.AddClass(new string[] { "below-20" }); - } + public void QueryCellInfoHandler(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs args) { + if (args.Data.Freight > 40) + { + args.Cell.AddClass(new string[] { "above-40" }); } -} -``` - - - -The following image represents customized datagrid columns, -![Customizing Blazor DataGrid Columns](../images/blazor-datagrid-column-customization.png) +{% endhighlight %} +{% highlight c# tabtitle="Order.cs" %} + + public class Order + { + public static List Orders = new List(); + + public Order(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.ShipCity = shipCity; + this.ShipName = shipName; + this.ShipCountry = shipCountry; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new Order(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France")); + Orders.Add(new Order(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany")); + Orders.Add(new Order(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil")); + Orders.Add(new Order(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France")); + Orders.Add(new Order(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium")); + Orders.Add(new Order(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil")); + Orders.Add(new Order(10254, "VICTE", 22.98, "Bern", "Chop-suey Chinese", "Switzerland")); + Orders.Add(new Order(10255, "TOMSP", 148.33, "Genève", "Richter Supermarkt", "Switzerland")); + Orders.Add(new Order(10256, "HANAR", 13.97, "Resende", "Wellington Import Export", "Brazil")); + Orders.Add(new Order(10257, "VINET", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela")); + + } + + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public string ShipCountry { get; set; } + } + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNroZyCqJkbikUBx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/datagrid/how-to/group-column-chooser-items.md b/blazor/datagrid/how-to/group-column-chooser-items.md index 99a1054585..ef98f9120c 100644 --- a/blazor/datagrid/how-to/group-column-chooser-items.md +++ b/blazor/datagrid/how-to/group-column-chooser-items.md @@ -7,17 +7,29 @@ control: DataGrid documentation: ug --- -# How to Group the Column Chooser Items +# Group column chooser items in Blazor DataGrid -The [GridColumnChooserItemGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html) component helps to segregate the column chooser items as group. You can define column's group name by using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html#Syncfusion_Blazor_Grids_GridColumnChooserItemGroup_Title) property of GridColumnChooserItemGroup directive. +The Syncfusion Blazor DataGrid supports grouping items in the column chooser dialog to improve usability and organization.It allows you to organize column chooser items into logical groups. This can be achieved using the [GridColumnChooserItemGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html). -The following code example demonstrates the default column chooser items as group. +To implement this: + +* **Enable column chooser** – Set [ShowColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnChooser) property as **true** in the Grid and add **ColumnChooser** to the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar). + +* **Use template in [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html)** – Customize the layout of chooser items using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) property. + +* **Group items** – Use [GridColumnChooserItemGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html) to define logical groups with a [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html#Syncfusion_Blazor_Grids_GridColumnChooserItemGroup_Title), and render corresponding columns under each group. + +* **Filter group columns** – Write helper methods to fetch grouped columns dynamically using field names. + +The following example demonstrates how to group column chooser items using these steps: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```csharp @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons - +