### Install and Start NGINX on Linux
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/common/deployment/deployment-linux-nginx.md
Installs NGINX, starts the service, and enables it to start on boot. Verifies the installation by checking the service status.
```bash
sudo dnf install nginx
sudo systemctl start nginx
sudo systemctl enable nginx
sudo systemctl status nginx
```
--------------------------------
### Clone Physical File System Provider Sample
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/file-manager/physical-file-system-provider.md
Clone the sample project from GitHub to get started with the physical file system provider. Navigate into the cloned directory to proceed with setup.
```bash
git clone https://github.com/SyncfusionExamples/ej2-aspcore-file-provider ej2-aspcore-file-provider
cd ej2-aspcore-file-provider
```
--------------------------------
### Clone SharePoint File Provider Repository
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/file-manager/sharePoint-file-provider.md
Clone the example repository to get started with the SharePoint file provider. Navigate into the cloned directory to proceed with the setup.
```bash
git clone https://github.com/SyncfusionExamples/sharepoint-aspcore-file-provider sharepoint-aspcore-file-provider
cd sharepoint-aspcore-file-provider
```
--------------------------------
### Install and Run LiteLLM Proxy
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/ai-assistview/ai-integrations/lite-llm-integration.md
Install the LiteLLM package and start the proxy server with a configuration file. Ensure the port and host are correctly specified.
```bash
pip install "litellm[proxy]"
litellm --config "./config.yaml" --port 4000 --host 0.0.0.0
```
--------------------------------
### Install a Specific NuGet Package
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/installation/install-nuget-packages.md
Example of adding the Syncfusion Blazor Grid package to your project.
```bash
dotnet add package Syncfusion.Blazor.Grid
```
--------------------------------
### Start-to-Start with Lag Example
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/gantt-chart/task-dependencies.md
Defines a Start-to-Start dependency with a 1-day lag. The successor task starts 1 day after the predecessor task starts.
```plaintext
4SS+1d
```
--------------------------------
### Complete Symbol Palette Example
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/diagram/symbol-palette/symbol-palette.md
A comprehensive example demonstrating the setup of a Blazor Symbol Palette. It includes defining symbol margins, initializing the palette component, and populating it with various symbol types (nodes, connectors, groups) through helper methods.
```csharp
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.SymbolPalette
@code
{
private SymbolMargin _symbolMargin = new SymbolMargin
{
Left = 15,
Right = 15,
Top = 15,
Bottom = 15
};
private SfSymbolPaletteComponent _symbolPalette;
//Define palettes collection.
private DiagramObjectCollection _palettes = new DiagramObjectCollection();
// Defines palette's flow-shape collection.
private DiagramObjectCollection _paletteNodes = new DiagramObjectCollection();
// Defines palette's group collection.
private DiagramObjectCollection _paletteGroup = new DiagramObjectCollection();
// Defines palette's connector collection.
private DiagramObjectCollection _paletteConnectors = new DiagramObjectCollection();
protected override void OnInitialized()
{
InitPaletteModel();
}
private void InitPaletteModel()
{
CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
CreatePaletteGroup();
_palettes = new DiagramObjectCollection()
{
new Palette() { Symbols = _paletteNodes, Title = "Flow Shapes", ID = "Flow Shapes" },
new Palette() { Symbols = _paletteConnectors, Title = "Connectors", IsExpanded = true },
new Palette() { Symbols = _paletteGroup, Title = "Group Shapes", IsExpanded = true }
};
}
private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
{
Node node = new Node()
{
ID = id,
Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" },
};
_paletteNodes.Add(node);
}
private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
{
Connector connector = new Connector()
{
ID = id,
Type = type,
SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
TargetPoint = new DiagramPoint() { X = 60, Y = 60 },
Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#757575" },
```
--------------------------------
### Clone SQL Server Database File Provider Sample
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/file-manager/SQL-database-file-system-provider.md
Clone the sample project from GitHub to get started with the SQL Server database file provider.
```bash
git clone https://github.com/SyncfusionExamples/sql-server-database-aspcore-file-provider sql-server-database-aspcore-file-provider
```
--------------------------------
### Clone FTP File Provider Sample Project
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/file-manager/File-Transfer-Protocol-file-system-provider.md
Clone the EJ2.ASP.NET Core FTP File Provider sample project from GitHub to get started.
```bash
git clone https://github.com/SyncfusionExamples/ej2-ftp-aspcore-file-provider.git ej2-ftp-aspcore-file-provider.git
```
--------------------------------
### Complete Blazor Symbol Palette and Diagram Example
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/diagram/symbol-palette/symbol-palette.md
This comprehensive example shows the complete setup for a Blazor application featuring a Symbol Palette and a Diagram component. It includes UI structure, component references, data initialization for palettes, nodes, and connectors, and the crucial logic for enabling drag and drop.
```csharp
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.SymbolPalette
@code
{
private SymbolMargin _symbolMargin = new SymbolMargin
{
Left = 15,
Right = 15,
Top = 15,
Bottom = 15
};
private SfDiagramComponent _diagram;
private SfSymbolPaletteComponent _symbolPalette;
//Define nodes collection.
private DiagramObjectCollection _nodes = new DiagramObjectCollection();
//Define connectors collection.
private DiagramObjectCollection _connectors = new DiagramObjectCollection();
//Define palettes collection.
private DiagramObjectCollection _palettes = new DiagramObjectCollection();
// Defines palette's flow-shape collection.
private DiagramObjectCollection _paletteNodes = new DiagramObjectCollection();
// Defines palette's group collection.
private DiagramObjectCollection _paletteGroup = new DiagramObjectCollection();
// Defines palette's connector collection.
private DiagramObjectCollection _paletteConnectors = new DiagramObjectCollection();
protected override async Task OnAfterRenderAsync(bool firstRender)
{
_symbolPalette.Targets = new DiagramObjectCollection() { };
_symbolPalette.Targets.Add(_diagram);
}
protected override void OnInitialized()
{
InitPaletteModel();
}
private void InitPaletteModel()
{
CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator");
CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow);
CreatePaletteGroup();
_palettes = new DiagramObjectCollection()
{
new Palette() { Symbols = _paletteNodes, Title = "Flow Shapes", ID = "Flow Shapes" },
new Palette() { Symbols = _paletteConnectors, Title = "Connectors", IsExpanded = true },
new Palette() { Symbols = _paletteGroup, Title = "Group Shapes", IsExpanded = true }
};
}
private void CreatePaletteNode(NodeFlowShapes flowShape, string id)
{
Node node = new Node()
{
ID = id,
Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape },
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" },
};
_paletteNodes.Add(node);
}
private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape)
{
Connector connector = new Connector()
{
ID = id,
Type = type,
SourcePoint = new DiagramPoint() { X = 0, Y = 0 },
TargetPoint = new DiagramPoint() { X = 60, Y = 60 },
Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#757575" },
TargetDecorator = new DecoratorSettings()
{
Shape = decoratorShape,
Style = new ShapeStyle() { StrokeColor = "#757575", Fill = "#757575" }
}
};
_paletteConnectors.Add(connector);
}
private void CreatePaletteGroup()
{
```
--------------------------------
### Start Blazor Project
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/common/integration/blazor-azure-functions.md
Navigate to the Blazor client project directory and start the Blazor application using the .NET CLI.
```bash
cd ../Client
dotnet run
```
--------------------------------
### Validate DataGrid DataSource Count with MSTest
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/common/how-to/configure-blazor-component-in-bunit-testing.md
Tests the total count of items in the DataGrid's DataSource, asserting it to be 75. This is based on the DataGrid getting started code example.
```csharp
using Microsoft.VisualStudio.TestTools.UnitTesting;
using System.Linq;
using Bunit;
// Replace with your actual project namespace, e.g., MyApp.Components.Pages
using BlazorApp.Components.Pages;
[TestClass]
public class DataGridTests : TestBase
{
// Validate DataSource count as 75 which is based on DataGrid getting started code example
[TestMethod]
public void DataGrid_DataSource_Count()
{
var comp = Render();
var instance = comp.Instance;
Assert.AreEqual(75, instance.Orders.Count);
}
```
--------------------------------
### Create a new Blazor WebAssembly App using .NET CLI and navigate to directory
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/accordion/getting-started.md
Create a new Blazor WebAssembly project and then navigate into the project directory using the .NET CLI.
```bash
dotnet new blazorwasm -o BlazorApp
cd BlazorApp
```
--------------------------------
### Check DataGrid Column Definitions
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/common/how-to/configure-blazor-component-in-bunit-testing.md
Finds all header cells in a DataGrid component and asserts that there are 5 columns, validating their text content. This is based on the DataGrid getting started code example.
```csharp
var comp = Render();
var headers = comp.FindAll(".e-headercell");
// Validate column header count as 5 which is based on DataGrid getting started code example
Assert.That(headers.Count, Is.EqualTo(5));
Assert.That(headers[0].TextContent.Trim(), Is.EqualTo("Order ID"));
Assert.That(headers[1].TextContent.Trim(), Is.EqualTo("Customer Name"));
Assert.That(headers[2].TextContent.Trim(), Is.EqualTo("Order Date"));
Assert.That(headers[3].TextContent.Trim(), Is.EqualTo("Freight"));
Assert.That(headers[4].TextContent.Trim(), Is.EqualTo("Ship Country"));
```
--------------------------------
### Validate Row Count in bUnit Test
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/common/how-to/configure-blazor-component-in-bunit-testing.md
Validates the number of rows on the first page of a Blazor component, assuming a PageSize of 12. This snippet is based on the DataGrid getting started code example.
```csharp
// Validate first page row count (PageSize = 12) which is based on DataGrid getting started code example
var rows = comp.FindAll(".e-row");
Assert.That(rows.Count, Is.EqualTo(12));
```
--------------------------------
### Recommended Blazor Package Setup
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/common/how-to/package-management-issues.md
Illustrates the recommended setup for Blazor packages, including only individual component packages. This avoids redundancy and ensures clarity.
```xml
...
```
--------------------------------
### Blazor DataGrid Cell Range Selection Example
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/datagrid/cell-selection.md
This example demonstrates how to select a range of cells in the Blazor DataGrid. It uses SfNumericTextBox components to get the start and end row/column indices and a SfButton to trigger the selection via the SelectCellsByRangeAsync method. Ensure the GridSelectionSettings are configured for multiple cell selection.
```razor
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs
Select range of Cell
@code {
private SfGrid Grid;
public List OrderData { get; set; }
protected override void OnInitialized()
{
OrderData = OrderDetails.GetAllRecords();
}
public int StartRowIndexValue;
public int StartColumnIndexValue;
public int EndRowIndexValue;
public int EndColumnIndexValue;
public async Task SelectCells()
{
await Grid.ClearCellSelectionAsync();
await Grid.SelectCellsByRangeAsync((StartRowIndexValue, StartColumnIndexValue), (EndRowIndexValue, EndColumnIndexValue));
}
}
```
--------------------------------
### Example Blob Container and File Path Configuration
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/file-manager/azure-cloud-file-system-provider.md
An example demonstrating how to set the blob container and file path using actual Azure storage URLs. Ensure these URLs are correct for your storage account.
```csharp
public AzureProviderController(IHostingEnvironment hostingEnvironment)
{
this.operation = new AzureFileProvider();
blobPath = "https://azure_service_account.blob.core.windows.net/blob/";
filePath = "https://azure_service_account.blob.core.windows.net/blob/Files";
...
}
```
--------------------------------
### Check DataGrid Column Definitions with MSTest
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/common/how-to/configure-blazor-component-in-bunit-testing.md
Asserts the number of column headers in a DataGrid component (expected 5) and validates the text content of each header. This is based on the DataGrid getting started code example.
```csharp
[TestMethod]
public void DataGrid_Column_Definition_Check()
{
var comp = Render();
// Validate column header count as 5 which is based on DataGrid getting started code example
var headers = comp.FindAll(".e-headercell");
Assert.AreEqual(5, headers.Count);
Assert.AreEqual("Order ID", headers[0].TextContent.Trim());
Assert.AreEqual("Customer Name", headers[1].TextContent.Trim());
Assert.AreEqual("Order Date", headers[2].TextContent.Trim());
Assert.AreEqual("Freight", headers[3].TextContent.Trim());
Assert.AreEqual("Ship Country", headers[4].TextContent.Trim());
}
```
--------------------------------
### Configure and Validate DataGrid Paging with MSTest
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/common/how-to/configure-blazor-component-in-bunit-testing.md
Renders a DataGrid component and verifies that the pager element is present and that the first page contains the expected number of rows (12). This is based on the DataGrid getting started code example.
```csharp
[TestMethod]
public void DataGrid_Paging_Is_Configured()
{
var comp = Render();
// Pager exists
var pager = comp.Find(".e-pager");
Assert.IsNotNull(pager);
// Validate first page row count (PageSize = 12) which is based on DataGrid getting started code example
var rows = comp.FindAll(".e-row");
Assert.AreEqual(12, rows.Count);
}
```
--------------------------------
### Create SQL Server Database and Table with Sample Data
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/datagrid/connecting-to-ORM/dapper.md
This script creates the 'HotelBookingDB' database and the 'Rooms' table, then inserts sample reservation data. Ensure you have SQL Server Management Studio or a similar tool to execute this script.
```sql
IF NOT EXISTS (SELECT * FROM sys.databases WHERE name = 'HotelBookingDB')
BEGIN
CREATE DATABASE HotelBookingDB;
END
GO
USE HotelBookingDB;
GO
IF NOT EXISTS (SELECT * FROM sys.tables WHERE name = 'Rooms')
BEGIN
CREATE TABLE dbo.Rooms (
Id INT IDENTITY(1,1) PRIMARY KEY,
ReservationId VARCHAR(50) NOT NULL,
GuestName VARCHAR(100) NOT NULL,
GuestEmail VARCHAR(250) NULL,
CheckInDate DATE NOT NULL,
CheckOutDate DATE NULL,
RoomType VARCHAR(100) NULL,
RoomNumber VARCHAR(20) NULL,
AmountPerDay DECIMAL(18,2) NULL,
NoOfDays INT NULL,
TotalAmount DECIMAL(18,2) NULL,
PaymentStatus VARCHAR(50) NOT NULL,
ReservationStatus VARCHAR(50) NOT NULL
);
INSERT INTO dbo.Rooms (ReservationId, GuestName, GuestEmail, CheckInDate, CheckOutDate, RoomType, RoomNumber, AmountPerDay, NoOfDays, TotalAmount, PaymentStatus, ReservationStatus)
VALUES
('RES001001', 'John Doe', 'john.doe@example.com', '2026-01-13', '2026-01-15', 'Deluxe Suite', 'D-204', 150.00, 2, 300.00, 'Paid', 'Confirmed'),
('RES001002', 'Mary Smith', 'mary.smith@example.com', '2026-01-14', '2026-01-17', 'Standard Room', 'S-108', 90.00, 3, 270.00, 'Pending', 'Confirmed');
GO
```
--------------------------------
### Install bUnit Template
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/common/how-to/configure-blazor-component-in-bunit-testing.md
Installs the bunit.template from NuGet. This command only needs to be run once.
```bash
dotnet new install bunit.template
```
--------------------------------
### Blazor DataGrid Frozen Column Example
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/datagrid/frozen-column.md
This example demonstrates how to implement frozen columns in a Blazor DataGrid. It includes sample data and the necessary component setup.
```csharp
public class OrderDetails
{
public OrderDetails(int orderID, string customerID, int employeeID, double freight, DateTime orderDate, string shipCity, string shipName, string shipCountry, string shipAddress, string shipPostalCode, string shipRegion)
{
OrderID = orderID;
CustomerID = customerID;
EmployeeID = employeeID;
Freight = freight;
OrderDate = orderDate;
ShipCity = shipCity;
ShipName = shipName;
ShipCountry = shipCountry;
ShipAddress = shipAddress;
ShipPostalCode = shipPostalCode;
ShipRegion = shipRegion;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public int EmployeeID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public DateTime OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public string ShipAddress { get; set; }
public string ShipRegion { get; set; }
public string ShipPostalCode { get; set; }
}
public class Data
{
public static List Order = new List();
static Data()
{
order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10), "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67", "05454-876", "RJ"));
order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11), "Bern", "Chop-suey Chinese", "Switzerland", "Hauptstr. 31", "3012", "CJ"));
order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12), "Genève", "Richter Supermarkt", "Switzerland", "Starenweg 5", "1204", "CJ"));
order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15), "Resende", "Wellington Importadora", "Brazil", "Rua do Mercado, 12", "08737-363", "SP"));
order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16), "San Cristóbal", "HILARION-Abastos", "Venezuela", "Carrera 22 con Ave. Carlos Soublette #8-35", "5022", "Táchira"));
order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17), "Graz", "Ernst Handel", "Austria", "Kirchgasse 6", "8010", "CJ"));
order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18), "México D.F.", "Centro comercial Moctezuma", "Mexico", "Sierras de Granada 9993", "05022", "CJ"));
order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19), "Köln", "Ottilies Käseladen", "Germany", "Mehrheimerstr. 369", "50739", "CJ"));
order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19), "Rio de Janeiro", "Que Delícia", "Brazil", "Rua da Panificadora, 12", "02389-673", "RJ"));
order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22), "Albuquerque", "Rattlesnake Canyon Grocery", "USA", "2817 Milton Dr.", "87110", "NM"));
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public int EmployeeID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public DateTime OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public string ShipAddress { get; set; }
public string ShipRegion { get; set; }
public string ShipPostalCode { get; set; }
}
```
--------------------------------
### Configure Blazor DatePicker with Decade Start View
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/datepicker/view.md
Use the Start property to define the initial rendering view of the DatePicker. This example sets the initial view to Decade.
```cshtml
@using Syncfusion.Blazor.Calendars
@code {
public DateTime? DateValue {get;set;} = DateTime.Now;
}
```
--------------------------------
### Install Syncfusion Blazor Scaffolding Tool
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/visual-studio-integration/scaffolding.md
Install the syncfusion.scaffolding tool globally using the dotnet CLI.
```bash
dotnet tool install -g syncfusion.scaffolding
```
--------------------------------
### Initialize Git Repository and Commit
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/common/deployment/blazor-deploying-github-pages.md
Initialize a Git repository, add all project files, commit them with a message, set the remote origin, rename the branch to main, and push to GitHub.
```cs
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com//.git
git branch -M main
git push -u origin main
```
--------------------------------
### Get Selected Nodes in Blazor TreeView
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/treeview/node-selection.md
This example demonstrates how to get the selected nodes from the Blazor TreeView component. It utilizes a preview sample that allows interactive testing.
```html
Music
Songs
Albums
Movies
Genre
Actors
@code {
public List SelectedNodes = new List();
public void NodeSelected(NodeSelectedEventArgs args) {
// Handle node selection event if needed
}
public void NodeChecked(NodeCheckedEventArgs args) {
// Handle node check event if needed
}
}
```
--------------------------------
### Blazor DataGrid Column Validation Example
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/datagrid/column-validation.md
Demonstrates how to set up column validation in the Blazor DataGrid. This example shows a basic setup for validating input within grid columns.
```blazor
@code {
public List Orders { get; set; } = new List();
private ValidationRules _orderIDValidationRules = new ValidationRules {
Required = true
};
private ValidationRules _orderDateValidationRules = new ValidationRules {
Required = true
};
private ValidationRules _freightValidationRules = new ValidationRules {
Required = true,
Range = new RangeValidationRule { Min = 0, Max = 1000 }
};
protected override void OnInitialized() {
Orders = Enumerable.Range(1, 80).Select(i => new Order() {
OrderID = 1000 + i,
CustomerID = "ALFKI",
OrderDate = new DateTime(1997, 1, 1).AddDays(i),
Freight = 30 + i
}).ToList();
}
public class Order {
public int OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime OrderDate { get; set; }
public decimal Freight { get; set; }
}
}
```
--------------------------------
### Configure Web API Services in Startup.cs
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/treemap/data-binding.md
Add necessary services and endpoints for Web API controllers in your Startup.cs file. This includes registering data access layers and enabling controller endpoints.
```csharp
using Newtonsoft.Json.Serialization;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSingleton();
// Adds services for controllers to the specified Microsoft.Extensions.DependencyInjection.IServiceCollection.
services.AddControllers().AddNewtonsoftJson(options =>
{
options.SerializerSettings.ContractResolver = new DefaultContractResolver();
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
....
....
app.UseEndpoints(endpoints =>
{
// Adds endpoints for controller actions to the Microsoft.AspNetCore.Routing.IEndpointRouteBuilder
endpoints.MapDefaultControllerRoute();
.....
.....
});
}
}
}
```
--------------------------------
### Blazor DataGrid Row Selection Example
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/datagrid/row-selection.md
Demonstrates a basic Blazor DataGrid setup with row selection enabled. This example shows how to define the DataGrid and its columns, and includes sample data for demonstration purposes.
```csharp
public class OrderDetails
{
public OrderDetails(int orderId, string customerId, double? freight, string shipCountry)
{
OrderID = orderId;
CustomerID = customerId;
Freight = freight;
ShipCountry = shipCountry;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double? Freight { get; set; }
public string ShipCountry { get; set; }
}
public List GetOrderDetails()
{
List order = new List();
order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela"));
order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria"));
order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico"));
order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany"));
order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil"));
order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA"));
return order;
}
```
--------------------------------
### Configure Web API Controller Services in Startup.cs
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/chart/working-with-data.md
Adds services and endpoints for the Web API Controller in the Startup.cs file, including dependency injection for OrderDataAccessLayer and controller services.
```csharp
using EFChart.Data;
using Newtonsoft.Json.Serialization;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSingleton();
// Adds services for controllers to the specified Microsoft.Extensions.DependencyInjection.IServiceCollection.
services.AddControllers().AddNewtonsoftJson(options =>
{
options.SerializerSettings.ContractResolver = new DefaultContractResolver();
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
....
....
app.UseEndpoints(endpoints =>
{
// Adds endpoints for controller actions to the Microsoft.AspNetCore.Routing.IEndpointRouteBuilder
endpoints.MapDefaultControllerRoute();
.....
.....
});
}
}
}
```
--------------------------------
### Get Filtered Records in Blazor QueryBuilder
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/query-builder/how-to/gets-filtered-records.md
This snippet demonstrates how to get the filtered records from the QueryBuilder component. It includes the QueryBuilder setup, sample data, and a button click event to trigger the GetFilteredRecordsAsync method.
```cshtml
@using Syncfusion.Blazor.QueryBuilder
@using Syncfusion.Blazor.Buttons
Get Filtered Datasource
@code {
SfQueryBuilder QueryBuilderObj;
List Rules = new List()
{
new RuleModel { Field="Country", Label="Country", Type="String", Operator="equal", Value = "England" },
new RuleModel { Field="EmployeeID", Label="EmployeeID", Type="Number", Operator="notequal", Value = 1001 }
};
public List EmployeeData = new List
{
new EmployeeDetails{ FirstName = "Martin", EmployeeID = 1001, Country = "England", City = "Manchester", HireDate = new DateTime(2014, 4, 23) },
new EmployeeDetails{ FirstName = "Benjamin", EmployeeID = 1002, Country = "England", City = "Birmingham", HireDate = new DateTime(2014, 6, 19) },
new EmployeeDetails{ FirstName = "Stuart", EmployeeID = 1003, Country = "England", City = "London", HireDate = new DateTime(2014, 7, 4) },
new EmployeeDetails{ FirstName = "Ben", EmployeeID = 1004, Country = "USA", City = "California", HireDate = new DateTime(2014, 8, 15) },
new EmployeeDetails{ FirstName = "Joseph", EmployeeID = 1005, Country = "Spain", City = "Madrid", HireDate = new DateTime(2014, 8, 29) }
};
public class EmployeeDetails
{
public string FirstName { get; set; }
public int EmployeeID { get; set; }
public string Country { get; set; }
public string City { get; set; }
public DateTime HireDate { get; set; }
}
private async Task getData()
{
var FilteredData = await QueryBuilderObj.GetFilteredRecordsAsync();
}
}
```
--------------------------------
### Create a Blazor Web App (Server Render Mode)
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/getting-started/blazor-electron-app.md
Use the .NET CLI to create a new Blazor Web App in Server render mode and navigate into the project directory.
```bash
dotnet new blazor -o BlazorElectronApp -int Server
cd BlazorElectronApp
```
--------------------------------
### Initialize Connectors with Different Tooltip Open Modes
Source: https://github.com/syncfusion-content/blazor-docs/blob/development/blazor/diagram/tool-tip.md
This code snippet demonstrates how to initialize a collection of connectors, each with a different tooltip open mode (Auto, Hover, Custom, Click) and content. It also shows how to add these connectors to the diagram.
```csharp
//Intialize diagram's nodes collection
_connectors = new DiagramObjectCollection();
Connector connector = new Connector()
{
ID = "Connector1",
SourcePoint = new DiagramPoint() { X = 100, Y = 200 },
TargetPoint = new DiagramPoint() { X = 200, Y = 100 },
Tooltip = new DiagramTooltip() { Content = "Auto", OpensOn = "Auto" },
Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip,
};
Connector connector1 = new Connector()
{
ID = "Connector2",
SourcePoint = new DiagramPoint() { X = 300, Y = 200 },
TargetPoint = new DiagramPoint() { X = 400, Y = 100 },
Tooltip = new DiagramTooltip() { Content = "Hover", OpensOn = "Hover" },
Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip,
};
Connector connector2 = new Connector()
{
ID = "Connector3",
SourcePoint = new DiagramPoint() { X = 500, Y = 200 },
TargetPoint = new DiagramPoint() { X = 600, Y = 100 },
Tooltip = new DiagramTooltip() { Content = "Custom", OpensOn = "Custom" },
Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip,
};
Connector connector3 = new Connector()
{
ID = "Connector4",
SourcePoint = new DiagramPoint() { X = 700, Y = 200 },
TargetPoint = new DiagramPoint() { X = 800, Y = 100 },
Tooltip = new DiagramTooltip() { Content = "Click", OpensOn = "Click" },
Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip,
};
_connectors.Add(connector);
_connectors.Add(connector1);
_connectors.Add(connector2);
_connectors.Add(connector3);
}
```