diff --git a/blazor-toc.html b/blazor-toc.html index 8adda41018..a86e9a676b 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -2019,45 +2019,9 @@
  • Getting Started-Server side using CLI
    • -
  • - Getting Started-Client side using Visual Studio -
    • -
  • - Show or Hide columns in Dialog editing -
    • -
  • - Create custom toolbar with drop-down list -
    • -
  • - Customize Column Styles -
    • -
  • - Access public methods in datagrid -
  • Change datasource dynamically
    • -
  • - Custom control in datagrid toolbar -
    • -
  • - DataGrid customization -
    • -
  • - Prevent default datagrid action -
    • -
  • - Get index value of selected rowcell -
    • -
  • - Select datagrid rows based on certain condition -
    • -
  • - Customize column menu icon -
    • -
  • - Group column chooser items -
  • Calculate column value based on other columns
    • @@ -2092,7 +2056,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 @@ -2125,7 +2095,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/cell.md b/blazor/datagrid/cell.md index 8f50cec015..c75ec69a98 100644 --- a/blazor/datagrid/cell.md +++ b/blazor/datagrid/cell.md @@ -342,6 +342,116 @@ The following example demonstrates how to add a `QueryCellInfo` event handler to {% previewsample "https://blazorplayground.syncfusion.com/embed/LDLgjvivAmfpAZcD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +* Similarly, using the `QueryCellInfo` event, we can customize the appearance of the `Freight` column based on value ranges, and in this sample, each range is styled with distinct text and background colors using refined CSS: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + +@code{ + private SfGrid Grid; + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = Order.GetAllRecords(); + } + + public void QueryCellInfoHandler(Syncfusion.Blazor.Grids.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" }); + } + } +} + +{% 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" %} + > The [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.QueryCellInfoEventArgs-1.html) event is triggered for every cell of the grid, so it may impact the performance of the grid whether used to modify a large number of cells. ### Using CSS diff --git a/blazor/datagrid/column-chooser.md b/blazor/datagrid/column-chooser.md index e5d6fb06d3..1e9511775c 100644 --- a/blazor/datagrid/column-chooser.md +++ b/blazor/datagrid/column-chooser.md @@ -708,4 +708,164 @@ The [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gri {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhUiMtVWQPZQjGs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhUiMtVWQPZQjGs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Group column chooser items in Blazor DataGrid + +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). + +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" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + + + + + + @{ + var ContextFooterData = context as ColumnChooserFooterTemplateContext; + var visibles = ContextFooterData.Columns.Where(x => x.Visible).Select(x => x.HeaderText).ToArray(); + var hiddens = ContextFooterData.Columns.Where(x => !x.Visible).Select(x => x.HeaderText).ToArray(); + } + Submit + Abort + + + + + + + + + + + + + +@code +{ + public List GridData { get; set; } + SfGrid grid { get; set; } + IDictionary groups = new Dictionary(){ + { "Order Details", new string[] { "OrderID", "CustomerID", "Freight" } }, { "Ship Details", new string[]{ "ShipCountry", "ShipCity" } }, {"Date Details", new string[]{"OrderDate", "ShippedDate"}}}; + private GridColumn GetColumn(string field, List columns) + { + GridColumn column = null; + if (columns.Any(x => { column = x; return x.Field == field; })) + { + return column; + } + return null; + } + private bool ShouldRenderGroup(string title, List columns) + { + return groups[title].Any(x => columns.Any(y => y.Field == x)); + } + private List GetGroupColumns(string title, List columns) + { + return columns.Where(x => groups[title].Contains(x.Field)).ToList(); + } + + protected override void OnInitialized() + { + GridData = Order.GetAllRecords(); + } + +} + +{% endhighlight %} +{% highlight c# tabtitle="Order.cs" %} + +public class Order +{ + public static List order = new List(); + + public Order(int orderId, string customerId, string shipCity, string shipName, double freight, DateTime orderDate, string shipCountry, DateTime shippedDate) + { + this.OrderID = orderId; + this.CustomerID = customerId; + this.ShipCity = shipCity; + this.ShipName = shipName; + this.Freight = freight; + this.OrderDate = orderDate; + this.ShipCountry = shipCountry; + this.ShippedDate = shippedDate; + } + + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new Order(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, new DateTime(2024, 1, 5), "France", new DateTime(2024, 1, 10))); + order.Add(new Order(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, new DateTime(2024, 1, 7), "Germany", new DateTime(2024, 1, 13))); + order.Add(new Order(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, new DateTime(2024, 1, 10), "Brazil", new DateTime(2024, 1, 16))); + order.Add(new Order(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, new DateTime(2024, 1, 12), "France", new DateTime(2024, 1, 18))); + order.Add(new Order(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, new DateTime(2024, 1, 14), "Belgium", new DateTime(2024, 1, 20))); + order.Add(new Order(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, new DateTime(2024, 1, 16), "Brazil", new DateTime(2024, 1, 22))); + order.Add(new Order(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, new DateTime(2024, 1, 18), "Switzerland", new DateTime(2024, 1, 24))); + order.Add(new Order(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, new DateTime(2024, 1, 20), "Switzerland", new DateTime(2024, 1, 26))); + order.Add(new Order(10256, "WELLI", "Resende", "Wellington Importadora", 13.97, new DateTime(2024, 1, 22), "Brazil", new DateTime(2024, 1, 28))); + order.Add(new Order(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", 81.91, new DateTime(2024, 1, 24), "Venezuela", new DateTime(2024, 1, 30))); + } + 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; } + public DateTime ShippedDate { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLIjphYJvURjaoU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/custom-toolbar.md b/blazor/datagrid/custom-toolbar.md index 4f30b6f774..42628f0ada 100644 --- a/blazor/datagrid/custom-toolbar.md +++ b/blazor/datagrid/custom-toolbar.md @@ -356,6 +356,125 @@ In the **OnChange** method, the text of the selected item is checked to determin {% previewsample "https://blazorplayground.syncfusion.com/embed/LDVgWDUiLWIJdsVg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +## Render SfAutoComplete in custom toolbar + +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 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 `SfAutoComplete` 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 `SfAutoComplete` 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 `SfAutoComplete` 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 `SfAutoComplete` inside the Grid's toolbar and use it to perform search operations: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Navigations +@using Syncfusion.Blazor.DropDowns + + + + + + + + + + + + + + + + + + + +@code{ + public class CustomerDetails + { + public string Name { get; set; } + public int Id { get; set; } + } + + List Customers = new List + { + 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 = Order.GetAllRecords(); + } + + public async Task OnSearch(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) + { + await this.Grid.SearchAsync(args.Value); + } +} + +{% 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/BthoNTLFzGxGrdMg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Render a component or element using the Toolbar Template Rendering a component or element using the Toolbar Template in the Syncfusion® Blazor Grid allows you to extend the capabilities of the grid Toolbar by incorporating custom components or elements. This provides flexibility to enhance the Toolbar with custom buttons, dropdowns, input fields, icons, or any other desired UI elements. You can bind event handlers or handle interactions within the Template to enable specific actions or behaviors associated with the added components or elements. diff --git a/blazor/datagrid/how-to/access-public-methods.md b/blazor/datagrid/how-to/access-public-methods.md deleted file mode 100644 index 6e9045bb49..0000000000 --- a/blazor/datagrid/how-to/access-public-methods.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -layout: post -title: Access public methods in Blazor DataGrid Component | Syncfusion -description: Learn here all about Access public methods in datagrid in Syncfusion Blazor DataGrid component and more. -platform: Blazor -control: DataGrid -documentation: ug ---- - -# Access public methods in Blazor DataGrid Component - -You can access the public methods available in the DataGrid component by using its reference defined in the component initialization. - -This is demonstrated in the following sample code where the [Print](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Print) method of the datagrid component is invoked on button click using the datagrid reference, - -```cshtml -@using Syncfusion.Blazor.Buttons -@using Syncfusion.Blazor.Grids - - - - - - - - - - - - - -@code{ - private SfGrid DefaultGrid; - - public List Employees { get; set; } - - protected override void OnInitialized() - { - Employees = Enumerable.Range(1, 9).Select(x => new EmployeeData() - { - EmployeeID = x, - FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)], - LastName = (new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" })[new Random().Next(5)], - Title = (new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager", - "Inside Sales Coordinator" })[new Random().Next(4)], - HireDate = DateTime.Now.AddDays(-x), - }).ToList(); - } - - public async Task Print() - { - await this.DefaultGrid.Print(); - } - - public class EmployeeData - { - public int? EmployeeID { get; set; } - public string FirstName { get; set; } - public string LastName { get; set; } - public string Title { get; set; } - public DateTime? HireDate { get; set; } - } -} -``` - -N> Similarly all the public methods of the DataGrid can be invoked. The available public methods can be found in this [link](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). 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..c85d044e4c 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 @@ -307,4 +676,4 @@ The grouping feature enables you to view the datagrid record in a grouped view. * [Getting Started with Syncfusion® DataGrid in Blazor Server-Side using Visual Studio 2022](../getting-started) -* [Getting Started with Syncfusion® DataGrid in Blazor Server-Side using .NET Core CLI](./server-side-using-cli) +* [Getting Started with Syncfusion® DataGrid in Blazor Server-Side using .NET Core CLI](./server-side-using-cli) \ No newline at end of file diff --git a/blazor/datagrid/how-to/blazor-webassembly-datagrid-using-visual-studio.md b/blazor/datagrid/how-to/blazor-webassembly-datagrid-using-visual-studio.md deleted file mode 100644 index 2d3ecda472..0000000000 --- a/blazor/datagrid/how-to/blazor-webassembly-datagrid-using-visual-studio.md +++ /dev/null @@ -1,276 +0,0 @@ ---- -layout: post -title: Getting Stared 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 and much more. -platform: Blazor -control: DataGrid -documentation: ug ---- - - - -# Blazor DataGrid Component in WebAssembly App using Visual Studio - -This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor DataGrid component using [Visual Studio](https://visualstudio.microsoft.com/vs/). - -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a Blazor WebAssembly App in Visual Studio - -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). - -## Install Syncfusion® Blazor Grid and Themes NuGet in the App - -To add `Blazor DataGrid` component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. - -{% tabs %} -{% highlight C# tabtitle="Package Manager" %} - -Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }} - -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} - -{% endhighlight %} -{% endtabs %} - -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. - -## Register Syncfusion® Blazor Service - -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. - -{% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} - -@using Syncfusion.Blazor -@using Syncfusion.Blazor.Grids - -{% endhighlight %} -{% endtabs %} - -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. - -{% tabs %} -{% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %} - -using Microsoft.AspNetCore.Components.Web; -using Microsoft.AspNetCore.Components.WebAssembly.Hosting; -using Syncfusion.Blazor; - -var builder = WebAssemblyHostBuilder.CreateDefault(args); -builder.RootComponents.Add("#app"); -builder.RootComponents.Add("head::after"); - -builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); - -builder.Services.AddSyncfusionBlazor(); -await builder.Build().RunAsync(); -.... - -{% endhighlight %} -{% endtabs %} - -## Add stylesheet and script resources - -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the main page as follows: - -* For Blazor WebAssembly app, include it in the **~/index.html** file. - -```html - - .... - - - -``` -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 the Syncfusion® Blazor DataGrid component in the **~/Pages/Index.razor** file. - -{% tabs %} -{% highlight razor %} - - - -@code{ - public List Orders { get; set; } - - protected override void OnInitialized() - { - Orders = Enumerable.Range(1, 5).Select(x => new Order() - { - OrderID = 0 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - }).ToList(); - } - - public class Order - { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - - } -} - -{% endhighlight %} -{% endtabs %} - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser. - -![Blazor DataGrid Component](../images/blazor-datagrid-component.png) - -## Defining row data - -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. - -{% tabs %} -{% highlight razor %} - - - -@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 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. - -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 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. - -{% tabs %} -{% highlight razor %} - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable paging - -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. - -{% tabs %} -{% highlight 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) component. - -{% tabs %} -{% highlight 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) component. - -{% tabs %} -{% highlight razor %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Enable grouping - -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. - -{% tabs %} -{% highlight razor %} - - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -![Blazor DataGrid Component](../images/blazor-datagrid.gif) - -## See also - -* [Getting Started with Syncfusion® Data Grid in Blazor WebAssembly using .NET Core CLI](./blazor-webassembly-data-grid-using-cli) - -* [Getting Started with Syncfusion® DataGrid in Blazor Server-Side using Visual Studio 2022](../getting-started) - -* [Getting Started with Syncfusion® Data Grid in Blazor Server-Side using .NET Core CLI](./server-side-using-cli) diff --git a/blazor/datagrid/how-to/change-datasource-dynamically.md b/blazor/datagrid/how-to/change-datasource-dynamically.md deleted file mode 100644 index 0e40517372..0000000000 --- a/blazor/datagrid/how-to/change-datasource-dynamically.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -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. -platform: Blazor -control: DataGrid -documentation: ug ---- - -# Change Datasource Dynamically in Blazor DataGrid Component - -You can change the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) of the datagrid component dynamically through an external button. - -This is demonstrated in the following sample code where the `DataSource` is dynamically modified using the bounded property, - -```cshtml -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Buttons - -Change data source dynamically - - - - - - - - - - - -@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 void Change() - { - // Data source is modified dynamically - this.Orders = Enumerable.Range(1, 45).Select(x => new Order() - { - 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(); - } - public class Order - { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } - } -} -``` - -The following GIF represents DataGrid data source modified dynamically on button click, - -![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 deleted file mode 100644 index fb8af6c23f..0000000000 --- a/blazor/datagrid/how-to/custom-control-in-grid-toolbar.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: post -title: Custom control in Blazor DataGrid Component Toolbar | Syncfusion -description: Learn here all about custom control in datagrid toolbar in Syncfusion Blazor DataGrid component and more. -platform: Blazor -control: DataGrid -documentation: ug ---- - -# Custom Control in Datagrid Toolbar in Blazor DataGrid Component - -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. - -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, - -```cshtml -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Navigations -@using Syncfusion.Blazor.DropDowns - - - - - - - - - - - - - - - - - - - -@code{ - 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 } - }; - 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); - } - - public class Order - { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } - } -} -``` - -The following GIF represents the search operation performed on the datagrid using the Autocomplete component rendered in the toolbar, - -![Blazor DataGrid with Custom ToolBar](../images/blazor-datagrid-custom-toolbar.gif) 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..6c1dc3d60c --- /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 + +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-column-styles.md b/blazor/datagrid/how-to/customize-column-styles.md deleted file mode 100644 index b5f59e5cb5..0000000000 --- a/blazor/datagrid/how-to/customize-column-styles.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -layout: post -title: Customize Column Styles in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about Customize Column Styles in Syncfusion Blazor DataGrid component and more. -platform: Blazor -control: DataGrid -documentation: ug ---- - -# Customize Column Styles in Blazor DataGrid Component - -You can customize the appearance of the header and content of a particular column using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_CustomAttributes) property. - -To customize the datagrid column, follow the given steps: - -**Step 1**: - -Create a CSS class with custom style to override the default style for row cell and header cell. - -```css -.e-attr{ - background: #5DADE2; - font-family: "Bell MT"; - color: red; - font-size: 5px; - } -``` - -**Step 2**: - -Add the custom CSS class to the specified column by using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_CustomAttributes) property. - -```cshtml -@using Syncfusion.Blazor -@using Syncfusion.Blazor.Grids - - - - - - - - - - - -@code{ - SfGrid Grid; - public List Orders { get; set; } - protected override void OnInitialized() - { - Orders = Enumerable.Range(1, 10).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; } - } -} -``` - -![Customizing Column Style in Blazor DataGrid](../images/blazor-datagrid-column-style-customization.PNG) - -## Customize column header style - -You can customize the column header using the **e-headercell** CSS class. - -In the following sample, you can override the default style for column headers using the **e-headercell** CSS class. - -N> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-customize-column-header). - -```cshtml -@using Syncfusion.Blazor -@using Syncfusion.Blazor.Grids - - - - - - - - - - - -@code{ - SfGrid Grid; - public List Orders { get; set; } - protected override void OnInitialized() - { - Orders = Enumerable.Range(1, 10).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; } - } -} - -``` - -![Customizing Header Style in Blazor DataGrid](../images/blazor-datagrid-header-style-customization.PNG) 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..527e482c5d 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,PHN2ZyB3...."; + 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/customize-icon-column-menu.md b/blazor/datagrid/how-to/customize-icon-column-menu.md deleted file mode 100644 index a9c015d4aa..0000000000 --- a/blazor/datagrid/how-to/customize-icon-column-menu.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -layout: post -title: Customize column menu icon in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about Customize column menu icon in Syncfusion Blazor DataGrid component and more. -platform: Blazor -control: DataGrid -documentation: ug ---- - -# Customize column menu icon in Blazor DataGrid Component - -You can customize the column menu icon by overriding the default icon class `.e-icons.e-columnmenu` with the `content` property. - -```css -.e-grid .e-columnheader .e-icons.e-columnmenu::before { - content: "\e941"; -} -``` - -This is demonstrated in the following sample code, - -```cshtml -@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.5 * 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; } - } -} - - -``` - -The following image represents datagrid with customized column menu icon - -![Customizing Column Menu Icon in Blazor DataGrid](../images/blazor-datagrid-column-menu-icon.png) diff --git a/blazor/datagrid/how-to/enable-or-disable-grid.md b/blazor/datagrid/how-to/enable-or-disable-grid.md index 969f245d4a..0e88f7855f 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 deleted file mode 100644 index 95c9cda831..0000000000 --- a/blazor/datagrid/how-to/grid-customization.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -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. -platform: Blazor -control: DataGrid -documentation: ug ---- - -# DataGrid Customization in Blazor DataGrid Component - -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. - -This is demonstrated in the following sample code, - -```cshtml -@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 = 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; } - } - - 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" }); - } - } -} -``` - - - -The following image represents customized datagrid columns, - -![Customizing Blazor DataGrid Columns](../images/blazor-datagrid-column-customization.png) diff --git a/blazor/datagrid/how-to/group-column-chooser-items.md b/blazor/datagrid/how-to/group-column-chooser-items.md deleted file mode 100644 index 99a1054585..0000000000 --- a/blazor/datagrid/how-to/group-column-chooser-items.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -layout: post -title: Group column chooser items in Blazor DataGrid Component | Syncfusion -description: Learn here all about group column chooser template in DataGrid in Syncfusion Blazor DataGrid component and more. -platform: Blazor -control: DataGrid -documentation: ug ---- - -# How to Group the Column Chooser Items - -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 following code example demonstrates the default column chooser items as group. - -```csharp -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Buttons - - - - - - @{ - var ContextFooterData = context as ColumnChooserFooterTemplateContext; - var visibles = ContextFooterData.Columns.Where(x => x.Visible).Select(x => x.HeaderText).ToArray(); - var hiddens = ContextFooterData.Columns.Where(x => !x.Visible).Select(x => x.HeaderText).ToArray(); - } - - Submit - - Abort - - - - - - - - - - - - - -@code -{ - public List GridData { get; set; } - SfGrid grid { get; set; } - IDictionary groups = new Dictionary() -{ - { "Order Details", new string[] { "OrderID", "CustomerID", "Freight" } }, { "Ship Details", new string[]{ "ShipCountry", "ShipCity" } }, {"Date Details", new string[]{"OrderDate", "ShippedDate"}} - }; - private GridColumn GetColumn(string field, List columns) - { - GridColumn column = null; - if (columns.Any(x => { column = x; return x.Field == field; })) - { - return column; - } - return null; - } - private bool ShouldRenderGroup(string title, List columns) - { - return groups[title].Any(x => columns.Any(y => y.Field == x)); - } - private List GetGroupColumns(string title, List columns) - { - return columns.Where(x => groups[title].Contains(x.Field)).ToList(); - } - - protected override void OnInitialized() - { - GridData = Enumerable.Range(1, 75).Select(x => new OrdersDetails() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - ShippedDate = DateTime.Now.AddDays(+x), - ShipCountry = (new string[] { "Denmark", "Brazil", "Germany", "Austria" })[new Random().Next(4)], - ShipCity = (new string[] { "Berlin", "Madrid", "Marseille" })[new Random().Next(3)] - }).ToList(); - } - - public class OrdersDetails - { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } - public DateTime? ShippedDate { get; set; } - public string ShipCountry { get; set; } - public string ShipCity { get; set; } - } -} - -``` - -![Group column chooser items in Blazor DataGrid](../images/blazor-datagrid-group-items.gif) diff --git a/blazor/datagrid/how-to/prevent-default-grid-action.md b/blazor/datagrid/how-to/prevent-default-grid-action.md deleted file mode 100644 index c984f4cf90..0000000000 --- a/blazor/datagrid/how-to/prevent-default-grid-action.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -layout: post -title: Prevent default action in Blazor DataGrid Component | Syncfusion -description: Learn here all about preventing the default DataGrid action in Syncfusion Blazor DataGrid component and more. -platform: Blazor -control: DataGrid -documentation: ug ---- - -# Prevent Default Datagrid Action in Blazor DataGrid Component - -The default DataGrid actions can be prevented by canceling them in the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event. - -This is demonstrated in the following sample code, where the `Add` operation is prevented by setting `Cancel` argument value of the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event to **false**, - -```cshtml -@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 = 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; } - } - - public void OnActionBegin(ActionEventArgs args) - { - if (args.RequestType == Syncfusion.Blazor.Grids.Action.Add) - { - args.Cancel = true; - } - } -} -``` diff --git a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md new file mode 100644 index 0000000000..ab0292405c --- /dev/null +++ b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md @@ -0,0 +1,120 @@ +--- +layout: post +title: Resize the Blazor DataGrid in various dimension | Syncfusion +description: Learn here all about resize the Grid in various dimension in Syncfusion Blazor DataGrid. +platform: Blazor +control: DataGrid +documentation: ug +--- + +# Resize the Blazor DataGrid in various dimension + +The Syncfusion Blazor DataGrid offers a friendly way to resize the Grid, allowing you to adjust its width and height for improved data visualization. + +To resize the Grid externally, you can use an external button to modify the width of the parent element that contains the Grid. This will effectively resize the Grid along with its parent container. + +The following example demonstrates how to resize the Grid on external button click based on input: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + +
    +
    + + +
    +
    + + +
    +
    + Resize +
    +
    + +
    + + + + + + + + +
    + +@code { + private SfGrid Grid; + public List Orders { get; set; } + private SfNumericTextBox WidthTextBox; + private SfNumericTextBox HeightTextBox; + + private string ParentStyle; + + protected override void OnInitialized() + { + Orders = OrderDetails.GetAllRecords(); + } + + private void ResizeGrid() + { + var width = WidthTextBox?.Value ?? 400; + var height = HeightTextBox?.Value ?? 200; + ParentStyle = $"padding: 5px 5px; width: {width}px; height: {height}px;"; + } + +} + +{% 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/BNVeDJrpLMwucNtH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/how-to/rowcell-index.md b/blazor/datagrid/how-to/rowcell-index.md deleted file mode 100644 index 6b4aca8779..0000000000 --- a/blazor/datagrid/how-to/rowcell-index.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -layout: post -title: Get index value of selected cell in Blazor DataGrid | Syncfusion -description: Learn here all about Get index value of selected rowcell in Syncfusion Blazor DataGrid component and more. -platform: Blazor -control: DataGrid -documentation: ug ---- - -# Get Index Value of Selected Rowcell in Blazor DataGrid Component - -You can get the index value of a selected rowcell or row by using the [GetSelectedRowCellIndexes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRowCellIndexes) method of the DataGrid component. - -This is demonstrated in the below sample code where the [GetSelectedRowCellIndexes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRowCellIndexes) method is called on button click which returns the selected rowcell indexes, - -```cshtml -@using Syncfusion.Blazor.Buttons -@using Syncfusion.Blazor.Grids - - - - - - - - - - - - - - -@code{ - private SfGrid DefaultGrid; - - public List Employees { get; set; } - - protected override void OnInitialized() - { - Employees = Enumerable.Range(1, 9).Select(x => new EmployeeData() - { - EmployeeID = x, - FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)], - LastName = (new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" })[new Random().Next(5)], - Title = (new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager", - "Inside Sales Coordinator" })[new Random().Next(4)], - HireDate = DateTime.Now.AddDays(-x), - }).ToList(); - } - - public async Task SelectedRowCellIndex() - { - var value = await this.DefaultGrid.GetSelectedRowCellIndexes(); - } - - - public class EmployeeData - { - public int? EmployeeID { get; set; } - public string FirstName { get; set; } - public string LastName { get; set; } - public string Title { get; set; } - public DateTime? HireDate { get; set; } - } -} -``` - -N> For getting the rowcell index value, the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property of the [GridSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html) component should be set as **Cell**. diff --git a/blazor/datagrid/how-to/select-grid-rows-based-on-condition.md b/blazor/datagrid/how-to/select-grid-rows-based-on-condition.md deleted file mode 100644 index 1c6de853e1..0000000000 --- a/blazor/datagrid/how-to/select-grid-rows-based-on-condition.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -layout: post -title: Select rows based on certain condition in Blazor DataGrid | Syncfusion -description: Learn here all about Select datagrid rows based on certain condition in Syncfusion Blazor DataGrid component and more. -platform: Blazor -control: DataGrid -documentation: ug ---- - -# Select Rows Based on Certain Condition in Blazor DataGrid Component - -You can select specific rows in the datagrid based on some conditions by using the [SelectRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRows_System_Double___) method in the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_DataBound) event of the DataGrid component. - -This is demonstrated in the following sample code, where the index value of datagrid rows with **Freight** column value greater than 10 are stored in the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event and then selected in the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_DataBound) event, - -```cshtml -@using Syncfusion.Blazor.Grids - - - - - - - - - - - - - -@code{ - private SfGrid DefaultGrid; - - public List Orders { get; set; } - - public List SelectedNodeIndex = new List(); - - 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.5 * 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; } - } - - public async Task OnDataBound(object args) - { - // The filtered index values are selected - await this.DefaultGrid.SelectRows(SelectedNodeIndex.ToArray()); - } - - public void OnRowDataBound(RowDataBoundEventArgs args) - { - // Freight values greater than 10 are filtered by comparing the primary column values - if (args.Data.Freight > 10) - { - var dataSource = this.DefaultGrid.DataSource; - var index = 0; - foreach (var data in dataSource) - { - if (data.OrderID == args.Data.OrderID) - { - SelectedNodeIndex.Add(index); - break; - } - index++; - } - } - } -} -``` \ No newline at end of file diff --git a/blazor/datagrid/how-to/server-side-using-cli.md b/blazor/datagrid/how-to/server-side-using-cli.md index 2f1122c56b..846b421ce2 100644 --- a/blazor/datagrid/how-to/server-side-using-cli.md +++ b/blazor/datagrid/how-to/server-side-using-cli.md @@ -1,21 +1,24 @@ --- layout: post -title: Getting Started with Blazor DataGrid in Server Side | Syncfusion -description: Checkout the documentation for getting started with Syncfusion Blazor DataGrid Component in Visual Side using .NET CLI and much more. +title: Getting Started with Blazor DataGrid in server side using CLI | Syncfusion +description: Check out the documentation for getting started with the Syncfusion Blazor DataGrid in a server-side app using the .NET CLI and more. platform: Blazor control: DataGrid documentation: ug --- - +# Blazor DataGrid in Server Side App using CLI -# Blazor DataGrid Component in Server Side App using CLI +This article provides a step-by-step instructions to build a Blazor Server App with Syncfusion Blazor DataGrid using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet). -This article provides a step-by-step instructions for building Blazor Server App with `Blazor DataGrid` using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet/7.0). +## Manually creating a project -## Prerequisites +This section provides a brief explanation on how to manually create a Blazor Server App using CLI. -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). +### 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 +28,9 @@ dotnet --version {% endhighlight %} {% endtabs %} -## Create a Blazor Server side project using .NET Core CLI +### Create a Blazor Server side project using .NET Core CLI -Run the `dotnet new blazorserver` command to create a new Blazor Server application in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +To create a new Blazor Server application, open your terminal or command prompt and run: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -42,26 +45,27 @@ This command creates new Blazor app project and places it in a new directory cal N> If you have installed multiple SDK versions and need any specific framework version (net5.0/netcoreapp3.1) project, then add -f flag along with dotnet new blazorserver comment. Refer [here](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for the available options. -## Install Syncfusion® Blazor packages in the App - -Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To use Syncfusion® Blazor components in the application, add reference to the corresponding NuGet. Refer to [NuGet packages topic](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details. +### Install Syncfusion Blazor DataGrid and Themes NuGet in the app -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 @@ -69,8 +73,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 Server App. +In your **~/Program.cs** file, register the Syncfusion Blazor service as shown below: {% tabs %} {% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %} @@ -92,13 +97,13 @@ var app = builder.Build(); {% 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 **.NET 6** Blazor Server app, include it in **~/Pages/_Layout.cshtml** file. -* For **.NET 7** Blazor Server app, include it in the **~/Pages/_Host.cshtml** file. +* For **.NET 7,8,9 and 10** Blazor Server app, include it in the **~/Pages/_Host.cshtml** file. ```html @@ -109,39 +114,66 @@ 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/Index.razor** file. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.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(); + } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} - public class Order +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 Server App, use the following command in your terminal or command prompt: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -151,151 +183,476 @@ dotnet run {% endhighlight %} {% endtabs %} -![Blazor DataGrid Component](../images/blazor-datagrid-component.png) +![Blazor DataGrid](../images/blazor-datagrid-component.png) + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrIZoWghZXnoxDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Defining Row Data +### Defining row data -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. +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="Index.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 Syncfusion Blazor DataGrid. + +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. + +Here are the key properties used in the example below: -The columns are automatically generated when columns declaration is empty or undefined while initializing the datagrid. +* [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. -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. +* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) : Sets the displayed column title. -Let’s check the properties used here: +* [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. -* [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. +* [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="Index.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" %} + +### Enable paging -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. +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="Index.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="Index.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" %} + +### 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) component. +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="Index.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" %} + +### Enable grouping -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. +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="Index.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/BlazorServerApp). ## See also diff --git a/blazor/datagrid/how-to/show-or-hide-columns-in-dialog-editing.md b/blazor/datagrid/how-to/show-or-hide-columns-in-dialog-editing.md deleted file mode 100644 index 5a517c623e..0000000000 --- a/blazor/datagrid/how-to/show-or-hide-columns-in-dialog-editing.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -layout: post -title: Show or Hide columns in Dialog editing in Blazor DataGrid | Syncfusion -description: Learn here all about Show or Hide columns in Dialog editing in Syncfusion Blazor DataGrid component and more. -platform: Blazor -control: DataGrid -documentation: ug ---- - -# Show or Hide columns in Dialog Editing in Blazor DataGrid Component - -You can show hidden columns or hide visible column’s editor in the dialog while editing the datagrid record. This can be achieved by **Template**. -In the below example, we have rendered the datagrid columns [OrderDate`] as hidden column and [Freight`] as visible column. In the edit mode, we have changed the [Freight`] column to visible state and [OrderDate`] column to hidden state. - -```cshtml -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.DropDowns -@using Syncfusion.Blazor.Inputs -@using Syncfusion.Blazor.Calendars - - - - - - - - - - - - - - -@code{ - SfGrid Grid; - public List Orders { get; set; } - public bool Enabled = true; - public bool Data = false; - public List GridData = new List -{ - new Order() { OrderID = 10248, CustomerID = "VINET", Freight = 32.38, OrderDate = DateTime.Now.AddDays(-2) }, - new Order() { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61, OrderDate = DateTime.Now.AddDays(-5) }, - new Order() { OrderID = 10250, CustomerID = "HANAR", Freight = 65.83, OrderDate = DateTime.Now.AddDays(-12) }, - new Order() { OrderID = 10251, CustomerID = "VICTE", Freight = 41.34, OrderDate = DateTime.Now.AddDays(-18)}, - new Order() { OrderID = 10252, CustomerID = "SUPRD", Freight = 51.3, OrderDate = DateTime.Now.AddDays(-22)}, - new Order() { OrderID = 10253, CustomerID = "HANAR", Freight = 58.17, OrderDate = DateTime.Now.AddDays(-26) }, - - }; - - public void ActionBeginHandler(ActionEventArgs args) - { - if (args.RequestType == Syncfusion.Blazor.Grids.Action.Add) - { - Data = true; - } - } - - 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; } - } -} -``` - -![Displaying Column Dialog in Blazor DataGrid](../images/blazor-datagrid-column-dialog.PNG) diff --git a/blazor/datagrid/how-to/tool-bar-with-drop-down-list.md b/blazor/datagrid/how-to/tool-bar-with-drop-down-list.md deleted file mode 100644 index 9573ca5170..0000000000 --- a/blazor/datagrid/how-to/tool-bar-with-drop-down-list.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -layout: post -title: Custom toolbar with drop-down list in Blazor DataGrid | Syncfusion -description: Learn here all about Create custom toolbar with drop-down list in Syncfusion Blazor DataGrid component and more. -platform: Blazor -control: DataGrid -documentation: ug ---- - -# Create Custom Toolbar with Drop-down List in Blazor DataGrid Component - -You can create your own ToolBar items in the DataGrid. It can be added by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar). Actions for this ToolBar template items are defined in the [ToolbarClick`] - -**Step 1**: - -Initialize the template for your custom component. Using the following code add the DropDownList component to the ToolBar. - -```cshtml - - - - - - - -``` - -**Step 2**: - -To render the DropDownList component, use the [DropDownListEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html). You can select the datagrid row index based on the selected data in the DropDownList. The output will appear as follows. - -```cshtml -@using Syncfusion.Blazor -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Navigations -@using Syncfusion.Blazor.DropDowns - - - - - - - - - - - - - - - - - - - - -@code{ - - SfGrid Grid; - public List Orders { get; set; } - public class Select - { - public string text { get; set; } - } - List - { - new Select() { text = "0"}, - new Select() { text = "1"}, - new Select() { text = "2"}, - new Select() { text = "3"}, - new Select() { text = "4"}, - new Select() { text = "5"}, - new Select() { text = "6"}, - new Select() { text = "7"}, - new Select() { text = "8"}, - new Select() { text = "9"}, - }; - protected override void OnInitialized() - { - Orders = Enumerable.Range(1, 10).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 OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) - { - await this.Grid.SelectRow(int.Parse(args.Value)); - } - - public class Order - { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } - } -} -``` - -![Blazor DataGrid with Dropdown ToolBar](../images/blazor-datagrid-dropdown-toolbar.PNG) diff --git a/blazor/datagrid/local-data.md b/blazor/datagrid/local-data.md index 6e987b4803..2aaa56f66b 100644 --- a/blazor/datagrid/local-data.md +++ b/blazor/datagrid/local-data.md @@ -1111,6 +1111,107 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/LZVSXfVYgqFBPutf?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +## Change datasource dynamically + +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. + +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" %} + +@using Syncfusion.Blazor.Grids + +Change Data Source + + + + + + + + + + +@code { + private SfGrid grid; + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } + + private void ChangeDataSource() + { + // Replace the DataSource with a new list of records. + Orders = OrderData.GetNewRecords(); + } +} + +{% 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) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.OrderDate = orderDate; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + 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 static List GetNewRecords() + { + 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; } +} + +{% 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) + ## Data binding with SignalR The Syncfusion Blazor DataGrid provides support for real-time data binding using SignalR, allowing you to update the Grid automatically as data changes on the server-side. This feature is particularly useful for applications requiring live updates and synchronization across multiple clients. diff --git a/blazor/datagrid/pdf-export-options.md b/blazor/datagrid/pdf-export-options.md index 89e17daa9b..940d36a7fe 100644 --- a/blazor/datagrid/pdf-export-options.md +++ b/blazor/datagrid/pdf-export-options.md @@ -1690,11 +1690,11 @@ public class OrderData > You can find a complete sample on [GitHub](https://github.com/SyncfusionExamples/exporting-blazor-datagrid/tree/master/Exporting-PDF-Datagrid/Rotate_header). -## Exporting Grid data as stream +## Exporting Blazor DataGrid data as stream The Syncfusion Blazor DataGrid allows exporting Grid data as a memory stream, enabling programmatic handling before saving or processing. The following sections cover how to export Grid data as a memory stream, merge multiple memory streams into one, and convert the memory stream to a file stream for saving the exported file. -### Exporting Grid data as memory stream +### Exporting Blazor DataGrid data as memory stream The export to memory stream feature allows you to export data from a Grid to a memory stream instead of saving it to a file directly on the server. This can be particularly useful when you want to generate and serve the file directly to the client without saving it on the server, ensuring a smooth and efficient download process.