- All features of the component meet the requirement. - Fully meets the requirement.
- Some features of the component do not meet the requirement. - Partially meets the requirement.
- The component does not meet the requirement. - Does not meet the requirement.
-
+
+
-
-
+
@{
- var Page = (context as PagerTemplateContext);
-
-
+ var pageContext = (context as PagerTemplateContext);
+ Orders { get; set; }
- public SfGrid Grid { get; set; }
- public SfPager Pager { get; set; }
- private bool BackButtonDisabled { get; set; } = true;
- private bool ForwardButtonDisabled { get; set; }
- private Query QueryData = new Syncfusion.Blazor.Data.Query().Skip(0).Take(10);
- public int ddlIndex { get; set; } = 0;
+
- private async Task ValueChangeHandler(ChangeEventArgs args)
+@code {
+ private SfGrid? grid;
+ private SfPager? pager;
+ private bool backButtonDisabled = true;
+ private bool forwardButtonDisabled;
+ private Query queryData = new Query().Skip(0).Take(10);
+ private int ddlIndex = 0;
+
+ public List Orders { get; set; } = new();
+ private List dropdownDataSource = new()
{
- var currentPage = args.Value -1;
- int skipValue = (currentPage * Pager.PageSize);
- int takeValue = Pager.PageSize;
- QueryData = new Query().Skip(skipValue).Take(takeValue);
- ddlIndex = currentPage;
- int totalPages = (int)(Math.Ceiling((double)(Pager.TotalItemsCount / Pager.PageSize)));
- if (args.Value == totalPages)
- {
- ForwardButtonDisabled = true;
- BackButtonDisabled = false;
- }
- else if (args.Value == 1)
- {
- ForwardButtonDisabled = false;
- BackButtonDisabled = true;
- }
- else
- {
- ForwardButtonDisabled = false;
- BackButtonDisabled = false;
- }
- await Task.Yield();
- await Grid.Refresh();
- await Pager.GoToPageAsync(args.Value);
- }
+ new TemplateDropdown() { Paging = 1 },
+ new TemplateDropdown() { Paging = 2 },
+ new TemplateDropdown() { Paging = 3 },
+ new TemplateDropdown() { Paging = 4 },
+ new TemplateDropdown() { Paging = 5 },
+ new TemplateDropdown() { Paging = 6 },
+ new TemplateDropdown() { Paging = 7 },
+ new TemplateDropdown() { Paging = 8 }
+ };
- public string EnablePreviousButton()
+ protected override void OnInitialized()
{
- string classNames = BackButtonDisabled ? "e-disabled disable-pointer" : "enable-pointer";
- return classNames;
+ Orders = Enumerable.Range(1, 80).Select(x => new Order()
+ {
+ OrderID = 1000 + x,
+ CustomerID = new[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" }[new Random().Next(5)],
+ Freight = 2.1 * x,
+ OrderDate = DateTime.Now.AddDays(-x),
+ ShippedDate = DateTime.Now.AddDays(x)
+ }).ToList();
}
- public string EnableNextButton()
+ private async Task ValueChangeHandler(ChangeEventArgs args)
{
- string classNames = ForwardButtonDisabled ? "e-disabled e-disable disable-pointer" : "enable-pointer";
- return classNames;
+ var currentPage = args.Value - 1;
+ int skipValue = currentPage * (pager?.PageSize ?? 10);
+ int takeValue = pager?.PageSize ?? 10;
+ queryData = new Query().Skip(skipValue).Take(takeValue);
+ ddlIndex = currentPage;
+
+ int totalPages = (int)Math.Ceiling((double)(pager?.TotalItemsCount ?? 80) / (pager?.PageSize ?? 10));
+ forwardButtonDisabled = args.Value == totalPages;
+ backButtonDisabled = args.Value == 1;
+
+ await grid?.Refresh();
+ await pager?.GoToPageAsync(args.Value);
}
- public async Task NavigatePreviousPage()
+ private string EnablePreviousButton() => backButtonDisabled ? "e-disabled disable-pointer" : "enable-pointer";
+ private string EnableNextButton() => forwardButtonDisabled ? "e-disabled disable-pointer" : "enable-pointer";
+
+ private async Task NavigatePreviousPage()
{
- ForwardButtonDisabled = ForwardButtonDisabled ? false : ForwardButtonDisabled;
- BackButtonDisabled = Pager.CurrentPage == 2 ? true : false;
- int skipValue = (Pager.CurrentPage * Pager.PageSize) - (Pager.PageSize * 2);
- int takeValue = Pager.PageSize;
- QueryData = new Query().Skip(skipValue).Take(takeValue);
+ backButtonDisabled = pager?.CurrentPage == 2;
+ forwardButtonDisabled = false;
+ int skipValue = ((pager?.CurrentPage ?? 2) * (pager?.PageSize ?? 10)) - ((pager?.PageSize ?? 10) * 2);
+ queryData = new Query().Skip(skipValue).Take(pager?.PageSize ?? 10);
ddlIndex--;
- await Grid.Refresh();
- await Pager.GoToPreviousPageAsync();
+ await grid?.Refresh();
+ await pager?.GoToPreviousPageAsync();
}
- public async Task NavigateNextPage()
+ private async Task NavigateNextPage()
{
- BackButtonDisabled = BackButtonDisabled ? false : BackButtonDisabled;
- int totalPages = (int)(Math.Ceiling((double)(Pager.TotalItemsCount / Pager.PageSize)));
- ForwardButtonDisabled = Pager.CurrentPage == totalPages - 1 ? true : false;
- int skipValue = (Pager.CurrentPage * Pager.PageSize);
- int takeValue = Pager.PageSize;
- QueryData = new Query().Skip(skipValue).Take(takeValue);
+ backButtonDisabled = false;
+ int totalPages = (int)Math.Ceiling((double)(pager?.TotalItemsCount ?? 80) / (pager?.PageSize ?? 10));
+ forwardButtonDisabled = pager?.CurrentPage == totalPages - 1;
+ int skipValue = (pager?.CurrentPage ?? 1) * (pager?.PageSize ?? 10);
+ queryData = new Query().Skip(skipValue).Take(pager?.PageSize ?? 10);
ddlIndex++;
- await Grid.Refresh();
- await Pager.GoToNextPageAsync();
- }
-
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 80).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),
- ShippedDate = DateTime.Now.AddDays(x),
- }).ToList();
-
+ await grid?.Refresh();
+ await pager?.GoToNextPageAsync();
}
- public class Order
+ public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
@@ -150,39 +145,12 @@ In this following sample, we have rendered two anchor tags for navigating next a
public double? Freight { get; set; }
public DateTime? ShippedDate { get; set; }
}
+
public class TemplateDropdown
{
public int Paging { get; set; }
}
- List DropdownDataSource = new List
- {
- new TemplateDropdown() { Paging = 1},
- new TemplateDropdown() { Paging = 2},
- new TemplateDropdown() { Paging = 3},
- new TemplateDropdown() { Paging = 4},
- new TemplateDropdown() { Paging = 5},
- new TemplateDropdown() { Paging = 6},
- new TemplateDropdown() { Paging = 7},
- new TemplateDropdown() { Paging = 8}
- };
}
-
-
```
\ No newline at end of file
From d64bca03ebd1062c510a8bcd10f398739aee0d33 Mon Sep 17 00:00:00 2001
From: SadhanaBaskaran
Date: Tue, 18 Nov 2025 13:02:39 +0530
Subject: [PATCH 056/266] 993664: Updated the UG content and samples for Blazor
Pager Component
---
blazor/pager/globalization.md | 26 +++++++++++++++++++++-----
1 file changed, 21 insertions(+), 5 deletions(-)
diff --git a/blazor/pager/globalization.md b/blazor/pager/globalization.md
index 03da1be2d9..b66cd1df74 100644
--- a/blazor/pager/globalization.md
+++ b/blazor/pager/globalization.md
@@ -1,7 +1,7 @@
---
layout: post
title: Globalization in Blazor Pager Component | Syncfusion
-description: Checkout and learn here all about globalization and RTL in Syncfusion Blazor Pager component and much more details.
+description: Learn how to configure localization and right-to-left (RTL) rendering in the Syncfusion Blazor Pager component.
platform: Blazor
control: Pager
documentation: ug
@@ -9,16 +9,32 @@ documentation: ug
# Globalization in Blazor Pager Component
+This article explains how to **localize** the Syncfusion® Blazor Pager component and how to enable **right-to-left (RTL)** rendering.
+
## Localization
-Blazor Pager component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components.
+The Syncfusion® Blazor Pager component supports localization, allowing text and UI elements to adapt to various languages and cultural formats.
+
+> Refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) guide for detailed configuration steps.
## Right to left (RTL)
-RTL provides an option to switch the text direction and layout of the Pager component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). In the following sample, [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_EnableRtl) property is used to enable RTL in the Pager.
+The Syncfusion® Blazor Pager component supports right-to-left (RTL) rendering for languages such as **Arabic**, **Farsi**, and **Urdu**. **RTL** can be enabled by configuring the **Syncfusion Blazor service** during application startup.
+
+**Register the `EnableRtl` option in Program.cs**:
+
+{% tabs %}
+{% highlight C# tabtitle="~/_Program.cs" %}
+
+builder.Services.AddSyncfusionBlazor(options => { options.EnableRtl = true; });
+
+{% endhighlight %}
+{% endtabs %}
```cshtml
@using Syncfusion.Blazor.Navigations
-
Date: Tue, 18 Nov 2025 16:10:38 +0530
Subject: [PATCH 057/266] Updated code snippet syntax
---
.../ai-samples/kanban/smart-task-suggestion.md | 8 ++++----
.../ai-samples/rich-text-editor/writting-assistance.md | 4 ++--
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md b/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md
index a4ad47896a..3ed120de4d 100644
--- a/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md
+++ b/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md
@@ -241,7 +241,7 @@ The Kanban AI interface starts with a simple form where users provide **Project
- **Generate Button:** A progress-enabled button that calls `GenerateTasks()` to start AI-based task creation.
{% tabs %}
-{% highlight %}
+{% highlight razor %}
+
-@code
-{
- public List
- Page
- of @Page.TotalPages
+ Page
+
+
+ of @pageContext.TotalPages
-
+
}
-
+
@@ -320,7 +320,7 @@ The Kanban board uses `SfKanban` to organize tasks into columns like **To Do**,
- **Dynamic Binding:** The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) property binds to `smartSuggestion`, ensuring that newly generated tasks appear instantly.
{% tabs %}
-{% highlight %}
+{% highlight razor %}
@@ -365,7 +365,7 @@ When users switch to **Backlog View**, tasks are displayed in a grid using `SfGr
- **Data Binding:** The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property binds to `smartSuggestion`, just like Kanban.
{% tabs %}
-{% highlight %}
+{% highlight razor %}
@@ -571,7 +571,7 @@ Once the AI-generated content is ready, it needs to be inserted exactly where th
Additionally, users can copy the AI-generated content to the clipboard for use elsewhere. This is handled via a `JavaScript interop` function that copies plain text extracted from the AI result.
{% tabs %}
-{% highlight %}
+{% highlight razor %}
Copy
From 7e8ce2d5a63c13c83cf77311eb0ef1482f4d74ae Mon Sep 17 00:00:00 2001
From: SadhanaBaskaran
Date: Tue, 18 Nov 2025 16:16:06 +0530
Subject: [PATCH 058/266] 993664: Updated the UG content and samples for Blazor
Pager Component
---
blazor/pager/data-binding.md | 2 +-
blazor/pager/getting-started-webapp.md | 241 ++++++++++++-------------
2 files changed, 117 insertions(+), 126 deletions(-)
diff --git a/blazor/pager/data-binding.md b/blazor/pager/data-binding.md
index 7a68fc62f1..ec628dd1ea 100644
--- a/blazor/pager/data-binding.md
+++ b/blazor/pager/data-binding.md
@@ -87,7 +87,7 @@ The Syncfusion® Blazor Pager component can
@code {
- SfGrid Grid;
- SfDialog dialog;
- public DataTable table = new DataTable();
- [Inject] private IWebHostEnvironment HostEnvironment { get; set; }
+ private SfGrid? grid;
+ private SfDialog? dialog;
+ private string[]? columns;
+ private List customerList = new();
+ private string dialogContent = string.Empty;
+ private DataTable table = new();
+
+ [Inject] private IWebHostEnvironment? HostEnvironment { get; set; }
- private async void OnChange(UploadChangeEventArgs args)
+ private async Task OnChange(UploadChangeEventArgs args)
{
if (args.Files[0].FileInfo.Type == "xlsx")
{
foreach (var file in args.Files)
{
var path = GetPath(file.FileInfo.Name);
- ExcelEngine excelEngine = new ExcelEngine();
- IApplication application = excelEngine.Excel;
- application.DefaultVersion = ExcelVersion.Excel2016;
- // Create new file stream at the generated path.
- FileStream openFileStream = new FileStream(path, FileMode.OpenOrCreate, FileAccess.Write);
+ using var openFileStream = new FileStream(path, FileMode.OpenOrCreate, FileAccess.Write);
await file.File.OpenReadStream(long.MaxValue).CopyToAsync(openFileStream);
- openFileStream.Close();
- // Open file stream from saved path.
- FileStream fileStream = new FileStream(path, FileMode.Open, FileAccess.Read, FileShare.ReadWrite);
- IWorkbook workbook = application.Workbooks.Open(fileStream);
- IWorksheet worksheet = workbook.Worksheets[0];
+ using var fileStream = new FileStream(path, FileMode.Open, FileAccess.Read, FileShare.ReadWrite);
+ using var excelEngine = new ExcelEngine();
+ var application = excelEngine.Excel;
+ application.DefaultVersion = ExcelVersion.Excel2016;
+
+ var workbook = application.Workbooks.Open(fileStream);
+ var worksheet = workbook.Worksheets[0];
table = worksheet.ExportDataTable(worksheet.UsedRange, ExcelExportDataTableOptions.ColumnNames);
- GenerateListFromTable(table);
- }
+ await GenerateListFromTable(table);
+ }
}
else
{
- dialog.Content = "Please upload only .xlsx format";
- dialog.ShowAsync(true);
+ dialogContent = "Please upload only .xlsx format";
+ await dialog!.ShowAsync();
}
}
private async Task OnRemove(RemovingEventArgs args)
{
- CustomerList = new List(); // Clear data.
- Columns = null;
+ customerList.Clear();
+ columns = null;
+ await Task.CompletedTask;
}
private string GetPath(string filename)
{
- return Path.Combine(HostEnvironment.WebRootPath, filename);
+ return Path.Combine(HostEnvironment!.WebRootPath, filename);
}
- string[] Columns;
- public List CustomerList = new List();
-
- public void GenerateListFromTable(DataTable input)
+ private async Task GenerateListFromTable(DataTable input)
{
- // Check if at least one cell has meaningful data.
bool hasData = input.Rows.Cast()
.Any(row => row.ItemArray.Any(cell => cell != null && !string.IsNullOrWhiteSpace(cell.ToString())));
if (!hasData)
{
- dialog.Content = "The uploaded Excel file contains only blank rows or invalid data.";
- dialog.ShowAsync();
- return; // Exit if the data is invalid.
+ dialogContent = "The uploaded Excel file contains only blank rows or invalid data.";
+ await dialog!.ShowAsync();
+ return;
}
var list = new List();
- Columns = input.Columns.Cast()
- .Select(x => x.ColumnName)
- .ToArray();
+ columns = input.Columns.Cast().Select(x => x.ColumnName).ToArray();
+
foreach (DataRow row in input.Rows)
{
- System.Dynamic.ExpandoObject e = new System.Dynamic.ExpandoObject();
+ var expando = new ExpandoObject() as IDictionary;
foreach (DataColumn col in input.Columns)
- e.TryAdd(col.ColumnName, row.ItemArray[col.Ordinal]);
- list.Add(e);
+ {
+ expando![col.ColumnName] = row[col];
+ }
+ list.Add((ExpandoObject)expando!);
}
- CustomerList = list;
+
+ customerList = list;
StateHasChanged();
+ await Task.CompletedTask;
}
}
{% endhighlight %}
{% endtabs %}
-[!Binding data from Excel document](./images/excel-import-data.gif)
-
-> You can find the complete sample on [GitHub](https://github.com/SyncfusionExamples/databinding-in-blazor-datagrid/tree/master/Binding_data_from_excel/Excel_Export).
+> Find the complete sample on [GitHub](https://github.com/SyncfusionExamples/databinding-in-blazor-datagrid/tree/master/Binding_data_from_excel/Excel_Export).
## Observable collection
-An Observable collection is a special type of collection in .NET that automatically notifies any subscribers (such as the UI or other components) when changes are made to the collection. This is particularly useful in data-binding scenarios, where you want the UI to reflect changes in the underlying data model without having to manually update the view.
+An **Observable collection** is a specialized collection type in .NET that automatically notifies subscribers—such as UI components—when items are added, removed, or updated. This behavior is especially useful in data-binding scenarios where the interface needs to reflect changes in the underlying data without requiring manual refreshes.
+
+**Key Benefits**
-To achieve this, you can use the [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=netframework-4.8), a dynamic data collection that:
+- **Automatic UI Updates:** Changes to the collection (e.g., adding or removing items) are instantly reflected in the DataGrid.
+- **Simplified Data Management:** Reduces the need for manual calls to StateHasChanged() or other update mechanisms.
+- **Ideal for Dynamic Data:** Suitable for applications where data changes frequently, such as dashboards, real-time feeds, or user-driven interactions.
+
+To achieve this, use the [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=netframework-4.8), a dynamic data collection that:
* Provides notifications when items are added, removed, or moved.
@@ -1577,57 +1587,66 @@ To achieve this, you can use the [ObservableCollection](https://learn.microsoft.
* Implements the [INotifyPropertyChanged](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged?view=netframework-4.8) interface to notify when a property value changes on the client side.
-The following sample demonstrates how the Order class implements the **INotifyPropertyChanged** interface and raises the event when the `CustomerID`property value is changed.
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using System.Collections.ObjectModel
-@using Observable_Collection.Components.Data;
+@using BlazorApp3.Data
-
-
+
-
-
@code {
-
- public ObservableCollection GridData { get; set; }
- public int Count = 32341;
+ private ObservableCollection? gridData;
+ private int count = 32341;
protected override void OnInitialized()
{
- GridData = OrdersDetailsObserveData.GetRecords();
+ gridData = OrdersDetailsObserveData.GetRecords();
}
- public void AddRecords()
+ private void AddRecords()
{
- GridData.Add(new OrdersDetailsObserveData(Count++, "ALFKI", 4343, 2.3 * 43, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
+ gridData!.Add(new OrdersDetailsObserveData(
+ count++, "ALFKI", 4343, 2.3 * 43, false,
+ new DateTime(1991, 5, 15), "Berlin", "Simons bistro",
+ "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
}
- public void DelRecords()
+ private void DelRecords()
{
- GridData.Remove(GridData.First());
+ if (gridData!.Any())
+ {
+ gridData!.Remove(gridData.First());
+ }
}
- public void UpdateRecords()
+ private void UpdateRecords()
{
- var a = GridData.First();
- a.CustomerID = "Update";
+ var record = gridData!.FirstOrDefault();
+ if (record != null)
+ {
+ record.CustomerID = "Updated";
+ }
}
}
@@ -1641,86 +1660,99 @@ using System.ComponentModel;
namespace Observable_Collection.Components.Data
{
public class OrdersDetailsObserveData : INotifyPropertyChanged
+{
+
+ public OrdersDetailsObserveData(
+ int orderID, string customerID, int employeeID, double freight, bool verified,
+ DateTime orderDate, string shipCity, string shipName, string shipCountry,
+ DateTime shippedDate, string shipAddress)
{
- public OrdersDetailsObserveData()
- {
- }
- public OrdersDetailsObserveData(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, DateTime ShippedDate, string ShipAddress)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerId;
- this.EmployeeID = EmployeeId;
- this.Freight = Freight;
- this.ShipCity = ShipCity;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipName = ShipName;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- }
- public static ObservableCollection GetRecords()
- {
- ObservableCollection order = new ObservableCollection();
- int code = 10000;
- for (int i = 1; i < 2; i++)
- {
- order.Add(new OrdersDetailsObserveData(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
- order.Add(new OrdersDetailsObserveData(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
- order.Add(new OrdersDetailsObserveData(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bol�var #65-98 Llano Largo"));
- order.Add(new OrdersDetailsObserveData(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
- order.Add(new OrdersDetailsObserveData(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
- code += 5;
- }
- return order;
- }
+ OrderID = orderID;
+ CustomerID = customerID;
+ EmployeeID = employeeID;
+ Freight = freight;
+ Verified = verified;
+ OrderDate = orderDate;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ ShipCountry = shipCountry;
+ ShippedDate = shippedDate;
+ ShipAddress = shipAddress;
+ }
- public int OrderID { get; set; }
- public string CustomerID
+ public static ObservableCollection GetRecords()
+ {
+ var orders = new ObservableCollection();
+ int code = 10000;
+
+ for (int i = 1; i < 2; i++)
{
- get { return customerID; }
- set
- {
- customerID = value;
- NotifyPropertyChanged("CustomerID");
- }
- }
- public string customerID { get; set; }
- public int? EmployeeID { get; set; }
- public double? Freight { get; set; }
- public string ShipCity { get; set; }
- public bool Verified { get; set; }
- public DateTime? OrderDate { get; set; }
+ orders.Add(new OrdersDetailsObserveData(code + 1, "ALFKI", i + 0, 2.3 * i, false,
+ new DateTime(1991, 5, 15), "Berlin", "Simons bistro", "Denmark",
+ new DateTime(1996, 7, 16), "Kirchgasse 6"));
- public event PropertyChangedEventHandler PropertyChanged;
+ orders.Add(new OrdersDetailsObserveData(code + 2, "ANATR", i + 2, 3.3 * i, true,
+ new DateTime(1990, 4, 4), "Madrid", "Queen Cozinha", "Brazil",
+ new DateTime(1996, 9, 11), "Avda. Azteca 123"));
- public string ShipName { get; set; }
+ orders.Add(new OrdersDetailsObserveData(code + 3, "ANTON", i + 1, 4.3 * i, true,
+ new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany",
+ new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
+
+ orders.Add(new OrdersDetailsObserveData(code + 4, "BLONP", i + 3, 5.3 * i, false,
+ new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria",
+ new DateTime(1996, 12, 30), "Magazinweg 7"));
+
+ orders.Add(new OrdersDetailsObserveData(code + 5, "BOLID", i + 4, 6.3 * i, true,
+ new DateTime(1953, 2, 18), "Tsawassen", "Hanari Carnes", "Switzerland",
+ new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
+
+ code += 5;
+ }
- public string ShipCountry { get; set; }
+ return orders;
+ }
- public DateTime ShippedDate { get; set; }
- public string ShipAddress { get; set; }
+ public int OrderID { get; set; }
- private void NotifyPropertyChanged(String propertyName)
+ private string customerID;
+ public string CustomerID
+ {
+ get => customerID;
+ set
{
- if (PropertyChanged != null)
- {
- PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
- }
+ customerID = value;
+ NotifyPropertyChanged(nameof(CustomerID));
}
}
+ int? EmployeeID { get; set; }
+ public double? Freight { get; set; }
+ public string ShipCity { get; set; }
+ public bool Verified { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public string ShipName { get; set; }
+ public string ShipCountry { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public string ShipAddress { get; set; }
+
+ public event PropertyChangedEventHandler PropertyChanged;
+
+ private void NotifyPropertyChanged(string propertyName)
+ {
+ PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+ }
+}
}
{% endhighlight %}
{% endtabs %}
-The following screenshot represents the Grid with **Observable Collection**.
+
-
+N> * The Grid automatically reflects changes when records are added, removed, or updated.
+* When updating the collection using external triggers (e.g., timers, events), call **StateHasChanged()** to refresh the UI.
-> You can find the complete sample on [GitHub](https://github.com/SyncfusionExamples/databinding-in-blazor-datagrid/tree/master/observable_collection/Observable_Collection).
-
-N> While using an Observable collection, the added, removed, and changed records are reflected in the UI. But while updating the Observable collection using external actions like timers, events, and other notifications, you need to call the StateHasChanged method to reflect the changes in the UI.
+> Find the complete sample on [GitHub](https://github.com/SyncfusionExamples/databinding-in-blazor-datagrid/tree/master/observable_collection/Observable_Collection).
### Add a range of items into ObservableCollection in Blazor DataGrid
@@ -1737,19 +1769,19 @@ The Syncfusion® Blazor DataGrid supports bi
* Ensuring smoother and more efficient data rendering in scenarios with high-frequency data changes.
-By default, the `Add` method is used to insert a single item into the **ObservableCollection**. When multiple items are added one by one using a `foreach` loop, the Grid refreshes after each addition. This can lead to performance issues and UI flickering, especially when adding a large number of items.
+By default, the **Add** method is used to insert a single item into the **ObservableCollection**. When multiple items are added one by one using a **foreach** loop, the Grid refreshes after each addition. This can lead to performance issues and UI flickering, especially when adding a large number of items.
-To optimize performance when adding multiple items at once, you can extend the `ObservableCollection` class by implementing an `AddRange` method. By using this method, you can add a range of items and ensure that the `OnCollectionChanged` event is triggered only once, updating the Grid a single time for the entire batch operation.
+To optimize performance when adding multiple items at once, extend the **ObservableCollection** class by implementing an **AddRange** method. By using this method, add a range of items and ensure that the **OnCollectionChanged** event is triggered only once, updating the Grid a single time for the entire batch operation.
To implement this functionality, follow these steps:
1. **Create a Custom Collection Class**
- Define a new class **SmartObservableCollection** that inherits from `ObservableCollection`. This allows you to customize the behavior of the collection.
+ Define a new class **SmartObservableCollection** that inherits from **ObservableCollection**. This allows customization of the behavior of the collection.
2. **Add a flag to control notifications**
- Introduce a private boolean **flag _preventNotification** to temporarily disable collection change notifications while adding multiple items.
+ Introduce a private boolean **_preventNotification** to temporarily disable collection change notifications while adding multiple items.
3. **Override the OnCollectionChanged method**
@@ -1764,8 +1796,6 @@ To implement this functionality, follow these steps:
* Resetting **_preventNotification** to **false**.
* Raising a single **NotifyCollectionChangedAction.Reset** notification to inform the Grid that the entire collection has changed.
-The following example demonstrates how to use this approach in a Grid:
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1773,41 +1803,50 @@ The following example demonstrates how to use this approach in a Grid:
@using Syncfusion.Blazor.Buttons
@using System.Collections.ObjectModel
@using System.Collections.Specialized
-@using ObservableCollection.Components.Data;
+@using ObservableCollection.Components.Data
+
+
-
+
@code {
- SfGrid Grid;
- public SmartObservableCollection GridData = new SmartObservableCollection();
- public void AddRangeItems()
+ private SfGrid? grid;
+ private SmartObservableCollection gridData = new();
+
+ private void AddRangeItems()
{
- GridData.AddRange(OrdersDetailsObserveData.GetAllRecords());
+ gridData.AddRange(OrdersDetailsObserveData.GetAllRecords());
}
public class SmartObservableCollection : ObservableCollection
{
- private bool _preventNotification = false;
+ private bool preventNotification;
+
protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
{
- if (!_preventNotification)
+ if (!preventNotification)
+ {
base.OnCollectionChanged(e);
+ }
}
+
public void AddRange(IEnumerable list)
{
- _preventNotification = true;
- foreach (T item in list)
+ preventNotification = true;
+ foreach (var item in list)
+ {
Add(item);
- _preventNotification = false;
+ }
+ preventNotification = false;
OnCollectionChanged(new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset));
}
}
@@ -1822,16 +1861,19 @@ namespace ObservableCollection.Components.Data
public class OrdersDetailsObserveData
{
public int? OrderID { get; set; }
- public string CustomerID { get; set; }
+ public string CustomerID { get; set; } = string.Empty;
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
public static IEnumerable GetAllRecords()
{
+ var random = new Random();
+ var customers = new[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" };
+
return Enumerable.Range(1, 10).Select(x => new OrdersDetailsObserveData
{
OrderID = 1000 + x,
- CustomerID = (new[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
+ CustomerID = customers[random.Next(customers.Length)],
Freight = Math.Round(2.1 * x, 2),
OrderDate = DateTime.Now.AddDays(-x)
}).ToList();
@@ -1842,12 +1884,9 @@ namespace ObservableCollection.Components.Data
{% endhighlight %}
{% endtabs %}
-The following screenshot represents the Grid with **Observable Collection**.
-
-
-
-> You can find the complete sample on [GitHub](https://github.com/SyncfusionExamples/databinding-in-blazor-datagrid/tree/master/add_range_items_observableCollection/ObservableCollection).
+> Find the complete sample on [GitHub](https://github.com/SyncfusionExamples/databinding-in-blazor-datagrid/tree/master/add_range_items_observableCollection/ObservableCollection).
## See also
-* [How to clear all Data from Grid](https://www.syncfusion.com/forums/150965/how-to-clear-all-data-from-grid)
+* [How to import data from Excel sheet and bind to Blazor Grid](https://support.syncfusion.com/kb/article/11560/how-to-import-data-from-excel-sheet-and-bind-to-blazor-grid)
+* [How to clear all Data from Grid](https://www.syncfusion.com/forums/150965/how-to-clear-all-data-from-grid)
\ No newline at end of file
From 13cf0f6784e81d863bc20b7257fba1e6b0bb5f0e Mon Sep 17 00:00:00 2001
From: Kokila Poovendran
Date: Wed, 26 Nov 2025 16:17:52 +0530
Subject: [PATCH 112/266] 945108: Staging Failure Resolved
---
.../tools/code-snippet/nesting-table.razor | 63 +++++++++++++++++++
1 file changed, 63 insertions(+)
create mode 100644 blazor/rich-text-editor/tools/code-snippet/nesting-table.razor
diff --git a/blazor/rich-text-editor/tools/code-snippet/nesting-table.razor b/blazor/rich-text-editor/tools/code-snippet/nesting-table.razor
new file mode 100644
index 0000000000..70ca9cde38
--- /dev/null
+++ b/blazor/rich-text-editor/tools/code-snippet/nesting-table.razor
@@ -0,0 +1,63 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+
+
+
+
+
+@code{
+ private List Tools = new List()
+ {
+ new ToolbarItemModel() { Command = ToolbarCommand.Bold },
+ new ToolbarItemModel() { Command = ToolbarCommand.Italic },
+ new ToolbarItemModel() { Command = ToolbarCommand.Underline },
+ new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
+ new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+ new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
+ new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
+ new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+ new ToolbarItemModel() { Command = ToolbarCommand.Formats },
+ new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
+ new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+ new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
+ new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
+ new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+ new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
+ new ToolbarItemModel() { Command = ToolbarCommand.Indent },
+ new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+ new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
+ new ToolbarItemModel() { Command = ToolbarCommand.Image },
+ new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
+ new ToolbarItemModel() { Command = ToolbarCommand.Separator },
+ new ToolbarItemModel() { Command = ToolbarCommand.Undo },
+ new ToolbarItemModel() { Command = ToolbarCommand.Redo }
+ };
+}
\ No newline at end of file
From 2d5d2acac9f696ec960b82ef7ff72900d22e6289 Mon Sep 17 00:00:00 2001
From: sanjaykumar-suresh
Date: Wed, 26 Nov 2025 16:57:18 +0530
Subject: [PATCH 113/266] 995143: Changing Playgroundlinks for Custom Toolbar
Sample
---
blazor/datagrid/custom-toolbar.md | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/blazor/datagrid/custom-toolbar.md b/blazor/datagrid/custom-toolbar.md
index 6c76758b65..ab4eb7d58f 100644
--- a/blazor/datagrid/custom-toolbar.md
+++ b/blazor/datagrid/custom-toolbar.md
@@ -113,7 +113,7 @@ The following example demonstrates, how to render the custom Toolbar using `Temp
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBUsZBuSRVoiYtS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhyWChngaryhJXi?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
## Render image with text in custom Toolbar
@@ -351,7 +351,7 @@ In the **OnChange** method, the text of the selected item is checked to determin
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVgWDUiLWIJdsVg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDreCMLRKkzmjRdG?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
## Render SfAutoComplete in custom toolbar
@@ -470,7 +470,7 @@ The following example demonstrates how to render the `SfAutoComplete` inside the
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthoNTLFzGxGrdMg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBysCBdJXXyIRKP?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
## Render a component or element using the Toolbar Template
@@ -576,4 +576,4 @@ The following example demonstrates how to render a **SfButton** in the Toolbar u
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLUCtDUyMhZgqEX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrSMMhxJXWJIerL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
\ No newline at end of file
From a7f131ecf4a61e5fc4ab4ec493bdebaf891557b5 Mon Sep 17 00:00:00 2001
From: Backiaraj
Date: Wed, 26 Nov 2025 17:00:21 +0530
Subject: [PATCH 114/266] Updated Blazor components Getting Started UG
documentation for Blazor Web App
---
.../data-form/getting-started-with-web-app.md | 119 +++++++++++-------
.../datagrid/getting-started-with-web-app.md | 32 ++---
.../getting-started-with-web-app.md | 119 +++++++++++-------
.../getting-started-with-web-app.md | 119 +++++++++++-------
.../getting-started-with-web-app.md | 119 +++++++++++-------
.../diagram/getting-started-with-web-app.md | 30 ++---
blazor/dialog/getting-started-with-web-app.md | 119 +++++++++++-------
.../getting-started-with-web-app.md | 119 +++++++++++-------
.../getting-started-with-web-app.md | 30 ++---
.../getting-started-webapp.md | 118 ++++++++++-------
10 files changed, 556 insertions(+), 368 deletions(-)
diff --git a/blazor/data-form/getting-started-with-web-app.md b/blazor/data-form/getting-started-with-web-app.md
index c03b87de5b..898d077d5e 100644
--- a/blazor/data-form/getting-started-with-web-app.md
+++ b/blazor/data-form/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
# Getting Started with Blazor DataForm Component in Web App
-This section briefly explains about how to include [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
{% tabcontents %}
@@ -21,15 +21,15 @@ This section briefly explains about how to include [Blazor DataForm](https://www
## Create a new Blazor Web App in Visual Studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
## Install Syncfusion® Blazor DataForm and Themes NuGet in the Blazor Web App
-To add **Blazor DataForm** 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.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor DataForm** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
Alternatively, you can utilize the following package manager command to achieve the same.
@@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}
-N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
{% endtabcontent %}
@@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa
## Create a new Blazor Web App in Visual Studio Code
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
@@ -70,11 +70,9 @@ cd BlazorWebApp.Client
{% endhighlight %}
{% endtabs %}
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
## Install Syncfusion® Blazor DataForm and Themes NuGet in the App
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
* Press Ctrl+` to open the integrated terminal in Visual Studio Code.
* Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +90,69 @@ dotnet restore
{% endtabs %}
-N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
{% endtabcontent %}
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
-## Register Syncfusion® Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion® Blazor DataForm and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor DataForm** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.DataForm --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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+## Add Import Namespaces
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespaces.
{% tabs %}
{% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +163,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespace.
{% endhighlight %}
{% endtabs %}
-Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion® Blazor Service
+
+Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App.
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
{% tabs %}
{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +201,6 @@ await builder.Build().RunAsync();
{% endhighlight %}
{% endtabs %}
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
- .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
## Add stylesheet and script resources
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +221,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
## Add Blazor DataForm component
-Add the Syncfusion® Blazor DataForm component in `.razor` file inside the `Pages` folder. If an interactivity location as Per `page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion® Blazor DataForm component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
| Interactivity location | RenderMode | Code |
| --- | --- | --- |
| Per page/component | Auto | @rendermode InteractiveAuto |
| | WebAssembly | @rendermode InteractiveWebAssembly |
-| | Server | @rendermode InteractiveServer |
| | None | --- |
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
{% tabs %}
{% highlight razor %}
@@ -260,6 +287,8 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
{% endhighlight %}
{% endtabs %}
+* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataForm component in the default web browser.
+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm Component](images/blazor-dataform.png)" %}
N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataForm).
\ No newline at end of file
diff --git a/blazor/datagrid/getting-started-with-web-app.md b/blazor/datagrid/getting-started-with-web-app.md
index 4c7c0773da..de3e2d2e16 100644
--- a/blazor/datagrid/getting-started-with-web-app.md
+++ b/blazor/datagrid/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
# Getting Started with Blazor DataGrid in Web App
-This section briefly explains about how to include [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI.
+This section briefly explains about how to include [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
> **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) @@ -23,17 +23,17 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.  ## Install Blazor DataGrid and Themes NuGet in the Blazor Web App -To add **Syncfusion® Blazor DataGrid** in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Syncfusion® Blazor DataGrid** in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -46,7 +46,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -58,9 +58,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -76,7 +76,7 @@ cd BlazorWebApp.Client ## Install Blazor DataGrid and Themes NuGet in the app -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -94,7 +94,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -130,13 +130,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. ## Install Syncfusion® Blazor Grid and Themes NuGet in the App Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -148,7 +148,7 @@ 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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -156,7 +156,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -171,7 +171,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -277,7 +277,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-component.png)" %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Grid in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Grid component in the default web browser. ## Defining row data diff --git a/blazor/datepicker/getting-started-with-web-app.md b/blazor/datepicker/getting-started-with-web-app.md index baaaddd40e..000dca4d97 100644 --- a/blazor/datepicker/getting-started-with-web-app.md +++ b/blazor/datepicker/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DatePicker Component in Web App -This section explains how to include the [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,15 +21,15 @@ This section explains how to include the [Blazor DatePicker](https://www.syncfus ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App -To add the **Blazor DatePicker** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DatePicker** component in the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor packages in the client project of the Blazor Web App. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, use the following Package Manager commands: @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on NuGet. For the full package list and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, for a Blazor Web App with the `Auto` interactive render mode, use the following commands: @@ -70,11 +70,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For details on creating a **Blazor Web App** with various interactive modes and locations, refer to the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) topic. - ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor component NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the command is run in the project directory that contains the `.csproj` file. @@ -92,20 +90,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on NuGet. For the full package list and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. + +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. | -| Server | Open **~/_Imports.razor** in the `Components` folder. | +Here's an example of how to add the **Blazor DatePicker** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Calendars --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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +163,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (server and client) of the Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,29 +201,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - -N> A valid Syncfusion license is required. For details on generating and registering a license, refer to the [License key registration](https://blazor.syncfusion.com/documentation/common/essential-studio/licensing/overview) documentation. - ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -195,16 +221,15 @@ N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/th ## Add Syncfusion® Blazor DatePicker component -Add the Syncfusion® Blazor DatePicker component in a `.razor` file inside the `Pages` folder. If the interactivity location is set to `Per page/component`, define a render mode at the top of the component as follows: +Add the Syncfusion® Blazor DatePicker component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} diff --git a/blazor/daterangepicker/getting-started-with-web-app.md b/blazor/daterangepicker/getting-started-with-web-app.md index 0c6449b4f4..6b5b32afc4 100644 --- a/blazor/daterangepicker/getting-started-with-web-app.md +++ b/blazor/daterangepicker/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DateRangePicker Component in Web App -This section briefly explains about how to include [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,15 +21,15 @@ This section briefly explains about how to include [Blazor DateRangePicker](http ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App -To add **Blazor DateRangePicker** 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.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DateRangePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,11 +70,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -92,20 +90,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Here's an example of how to add the **Blazor DateRangePicker** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Calendars --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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +163,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,27 +201,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -193,16 +221,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DateRangePicker component -Add the Syncfusion® Blazor DateRangePicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor DateRangePicker component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,7 +248,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateRangePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateRangePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rDhTZCBOqWgwMmva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateRangePicker Component](./images/blazor-daterangepicker-component.png)" %} diff --git a/blazor/datetime-picker/getting-started-with-web-app.md b/blazor/datetime-picker/getting-started-with-web-app.md index f492904f7b..94a8027455 100644 --- a/blazor/datetime-picker/getting-started-with-web-app.md +++ b/blazor/datetime-picker/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DateTimePicker Component in Web App -This section briefly explains about how to include [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,15 +21,15 @@ This section briefly explains about how to include [Blazor DateTimePicker](https ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App -To add **Blazor DateTimePicker** 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.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DateTimePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,11 +70,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -92,20 +90,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Here's an example of how to add the **Blazor DateTimePicker** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Calendars --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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +163,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,27 +201,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -193,16 +221,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DateTimePicker component -Add the Syncfusion® Blazor DateTimePicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor DateTimePicker component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,7 +248,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateTimePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateTimePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLzDsBOKWcNOSex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateTimePicker Component](./images/blazor-datetimepicker-component.png)" %} diff --git a/blazor/diagram/getting-started-with-web-app.md b/blazor/diagram/getting-started-with-web-app.md index 5b6b1f4d09..bf1ae5e49b 100644 --- a/blazor/diagram/getting-started-with-web-app.md +++ b/blazor/diagram/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Diagram Component in Web App -This section briefly explains how to include the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code, and the .NET CLI. +This section briefly explains how to include the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) @@ -23,17 +23,17 @@ This section briefly explains how to include the [Blazor Diagram](https://www.sy ## Step 1: How to Create a New Blazor Web App -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.  ## Step 2: How to Install Syncfusion® Blazor Diagram and Themes NuGet Packages in the Blazor Web App -To add the **Blazor Diagram** 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.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Diagram** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If using the `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, use the following package manager command to achieve the same. @@ -46,7 +46,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. ## Step 3: Add Import Namespaces @@ -65,7 +65,7 @@ Open the **~/_Imports.razor** file in the client project and import the `Syncfus Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -If the Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -158,9 +158,9 @@ N> If the **Interactivity Location** is set to `Global` and the **Render Mode** ## Step 1: How to Create a New Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate interactive render mode and interactivity location when setting up the Blazor Web Application. For more information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, for a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -176,7 +176,7 @@ cd BlazorWebApp.Client ## Step 2: How to Install Syncfusion® Blazor Diagram and Themes NuGet Packages in the App -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the current directory is the project root directory where your `.csproj` file is located. @@ -213,7 +213,7 @@ Open the **~/_Imports.razor** file in the client project and import the `Syncfus Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -If the Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -330,13 +330,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates a new Blazor Web app project and places it in a new directory called `BlazorApp` inside the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. ## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet in the App Here's an example of how to add **Blazor Diagram** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. -If using the `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -348,7 +348,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. ## Step 3: Add Import Namespaces @@ -367,7 +367,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -If the Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} diff --git a/blazor/dialog/getting-started-with-web-app.md b/blazor/dialog/getting-started-with-web-app.md index 28e78564c2..35a6487fcc 100644 --- a/blazor/dialog/getting-started-with-web-app.md +++ b/blazor/dialog/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Dialog Component in Web App -This section briefly explains about how to include [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,15 +21,15 @@ This section briefly explains about how to include [Blazor Dialog](https://www.s ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ## Install Syncfusion® Blazor Popups and Themes NuGet in the Blazor Web App -To add **Blazor Dialog** 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.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Dialog** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,11 +70,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Popups and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -92,20 +90,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Popups and Themes NuGet in the App -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. +Here's an example of how to add the **Blazor Dialog** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Popups --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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +163,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,27 +201,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -193,16 +221,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Dialog component -Add the Syncfusion® Blazor Dialog component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor Dialog component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -225,7 +252,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dialog component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dialog component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog](./images/blazor-dialog.png)" %} diff --git a/blazor/drop-down-menu/getting-started-with-web-app.md b/blazor/drop-down-menu/getting-started-with-web-app.md index 9880938a5a..e5abaf6992 100644 --- a/blazor/drop-down-menu/getting-started-with-web-app.md +++ b/blazor/drop-down-menu/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Dropdown Menu Component in Web App -This section briefly explains about how to include [Blazor DropDown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor DropDown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,15 +21,15 @@ This section briefly explains about how to include [Blazor DropDown Menu](https: ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the Blazor Web App -To add **Blazor DropDown Menu** 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.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DropDown Menu** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,11 +70,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -92,20 +90,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. +Here's an example of how to add the **Blazor DropDown Menu** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.SplitButtons --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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +163,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,27 +201,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -193,16 +221,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Dropdown Menu component -Add the Syncfusion® Blazor DropDown Menu component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor DropDown Menu component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -227,7 +254,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dropdown Menu component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dropdown Menu component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTjshOAyMLHrtb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownMenu Component](./images/blazor-dropdownmenu-component.png)" %} diff --git a/blazor/dropdown-list/getting-started-with-web-app.md b/blazor/dropdown-list/getting-started-with-web-app.md index d49045c12d..11d925e52a 100644 --- a/blazor/dropdown-list/getting-started-with-web-app.md +++ b/blazor/dropdown-list/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DropDown List Component in Web App -This section briefly explains about how to include [Blazor DropDown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI. +This section briefly explains about how to include [Blazor DropDown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor DropDown List](https: ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.  ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the Blazor Web App -To add **Blazor DropDown List** 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.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DropDown List** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -44,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -56,9 +56,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -74,7 +74,7 @@ cd BlazorWebApp.Client ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -128,13 +128,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App Here's an example of how to add **Blazor DropDown List** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -146,7 +146,7 @@ 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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -169,7 +169,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -253,7 +253,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DropDown List component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DropDown List component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.png)" %} diff --git a/blazor/predefined-dialogs/getting-started-webapp.md b/blazor/predefined-dialogs/getting-started-webapp.md index f92710af87..9dbb891573 100644 --- a/blazor/predefined-dialogs/getting-started-webapp.md +++ b/blazor/predefined-dialogs/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Predefined Dialogs in Blazor Web App -This section briefly explains about how to include `Blazor Predefined Dialogs` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include `Blazor Predefined Dialogs` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,15 +21,15 @@ This section briefly explains about how to include `Blazor Predefined Dialogs` c ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ## Install Syncfusion® Blazor Popups and Themes NuGet in the App -To add **Blazor predefined dialog** 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.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor predefined dialog** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,11 +70,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Popups and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -92,20 +90,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. + +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Popups and Themes NuGet in the App + +Here's an example of how to add the **Blazor Predefined Dialog** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Popups --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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +## Add Import Namespaces -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +163,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -154,28 +203,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddScoped();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
## Add stylesheet and script resources
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below:
@@ -214,16 +241,15 @@ Once you added `SfDialogService` and `SfDialogProvider`, you can open predefined
### Show alert dialog
-An alert dialog box used to display an errors, warnings, and information alerts that needs user awareness. This can be achieved by using the [DialogService.AlertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_AlertAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. The alert dialog is displayed along with the `OK` button. When user clicks on `OK` button, alert dialog will get closed. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/*.razor` component, as follows:
+An alert dialog box used to display an errors, warnings, and information alerts that needs user awareness. This can be achieved by using the [DialogService.AlertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_AlertAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. The alert dialog is displayed along with the `OK` button. When user clicks on `OK` button, alert dialog will get closed. If an interactivity location as `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` component, as follows:
| Interactivity location | RenderMode | Code |
| --- | --- | --- |
| Per page/component | Auto | @rendermode InteractiveAuto |
| | WebAssembly | @rendermode InteractiveWebAssembly |
-| | Server | @rendermode InteractiveServer |
| | None | --- |
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
{% tabs %}
{% highlight razor %}
From 64e177730939a020391cda9ea47c5a6e609dcdf6 Mon Sep 17 00:00:00 2001
From: Backiaraj
Date: Wed, 26 Nov 2025 18:36:42 +0530
Subject: [PATCH 115/266] Added project creation image link
---
blazor/3D-chart/getting-started-with-web-app.md | 2 ++
blazor/accordion/getting-started-with-web-app.md | 2 ++
blazor/accumulation-chart/getting-started-with-web-app.md | 2 ++
blazor/ai-assistview/getting-started-webapp.md | 2 ++
blazor/appbar/getting-started-with-web-app.md | 2 ++
blazor/autocomplete/getting-started-with-web-app.md | 2 ++
blazor/avatar/getting-started-with-web-app.md | 2 ++
blazor/badge/getting-started-with-web-app.md | 2 ++
blazor/barcode/getting-started-with-web-app.md | 2 ++
blazor/breadcrumb/getting-started-with-web-app.md | 2 ++
blazor/bullet-chart/getting-started-with-web-app.md | 2 ++
blazor/button-group/getting-started-with-web-app.md | 2 ++
blazor/button/getting-started-with-web-app.md | 2 ++
blazor/calendar/getting-started-with-web-app.md | 2 ++
blazor/card/getting-started-with-web-app.md | 2 ++
blazor/carousel/getting-started-with-web-app.md | 2 ++
blazor/chat-ui/getting-started-webapp.md | 2 ++
blazor/check-box/getting-started-with-web-app.md | 2 ++
blazor/chip/getting-started-with-web-app.md | 2 ++
blazor/circular-gauge/getting-started-with-web-app.md | 2 ++
blazor/color-picker/getting-started-with-web-app.md | 2 ++
blazor/combobox/getting-started-with-web-app.md | 2 ++
blazor/context-menu/getting-started-with-web-app.md | 2 ++
blazor/dashboard-layout/getting-started-with-web-app.md | 2 ++
blazor/data-form/getting-started-with-web-app.md | 2 ++
blazor/data/getting-started-with-web-app.md | 2 ++
blazor/datepicker/getting-started-with-web-app.md | 2 ++
blazor/daterangepicker/getting-started-with-web-app.md | 2 ++
blazor/datetime-picker/getting-started-with-web-app.md | 2 ++
blazor/dialog/getting-started-with-web-app.md | 2 ++
blazor/drop-down-menu/getting-started-with-web-app.md | 2 ++
blazor/predefined-dialogs/getting-started-webapp.md | 2 ++
32 files changed, 64 insertions(+)
diff --git a/blazor/3D-chart/getting-started-with-web-app.md b/blazor/3D-chart/getting-started-with-web-app.md
index aeddc137d8..82e7f52760 100644
--- a/blazor/3D-chart/getting-started-with-web-app.md
+++ b/blazor/3D-chart/getting-started-with-web-app.md
@@ -30,6 +30,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor 3D Chart NuGet in the Blazor Web App
To add the **Blazor 3D Chart** component in the app, open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D).
diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md
index 0f932e583b..9a0c5b81f1 100644
--- a/blazor/accordion/getting-started-with-web-app.md
+++ b/blazor/accordion/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Navigations and Themes NuGet in the App
To add the **Blazor Accordion** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md
index 1c4de686a5..e5ddb0212e 100644
--- a/blazor/accumulation-chart/getting-started-with-web-app.md
+++ b/blazor/accumulation-chart/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Charts and Themes NuGet in the App
To add the **Blazor Accumulation Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/ai-assistview/getting-started-webapp.md b/blazor/ai-assistview/getting-started-webapp.md
index 13107514e1..57287e1d83 100644
--- a/blazor/ai-assistview/getting-started-webapp.md
+++ b/blazor/ai-assistview/getting-started-webapp.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+
+
## Install Syncfusion® Blazor InteractiveChat and Themes NuGet in the App
To add **Blazor AI AssistView** 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.InteractiveChat` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/appbar/getting-started-with-web-app.md b/blazor/appbar/getting-started-with-web-app.md
index a9e6313412..2390147e33 100644
--- a/blazor/appbar/getting-started-with-web-app.md
+++ b/blazor/appbar/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Navigations and Themes NuGet in the App
To add the **Blazor AppBar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md
index f4c0537cb1..a9cf2ceb90 100644
--- a/blazor/autocomplete/getting-started-with-web-app.md
+++ b/blazor/autocomplete/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App
To add the **Blazor AutoComplete** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/avatar/getting-started-with-web-app.md b/blazor/avatar/getting-started-with-web-app.md
index b06b2fe19f..6c729647d7 100644
--- a/blazor/avatar/getting-started-with-web-app.md
+++ b/blazor/avatar/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Themes NuGet in the App
To add the **Blazor Avatar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/badge/getting-started-with-web-app.md b/blazor/badge/getting-started-with-web-app.md
index 1ed10f9008..f18e9de8fc 100644
--- a/blazor/badge/getting-started-with-web-app.md
+++ b/blazor/badge/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Themes NuGet in the App
To add the **Blazor Badge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md
index 4a7e44d19e..d249f8071c 100644
--- a/blazor/barcode/getting-started-with-web-app.md
+++ b/blazor/barcode/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App
To add the **Blazor Barcode** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/breadcrumb/getting-started-with-web-app.md b/blazor/breadcrumb/getting-started-with-web-app.md
index 364a39f936..197482770f 100644
--- a/blazor/breadcrumb/getting-started-with-web-app.md
+++ b/blazor/breadcrumb/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Navigations and Themes NuGet in the App
To add the **Blazor Breadcrumb** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/bullet-chart/getting-started-with-web-app.md b/blazor/bullet-chart/getting-started-with-web-app.md
index 6ac477ab60..422c4955d3 100644
--- a/blazor/bullet-chart/getting-started-with-web-app.md
+++ b/blazor/bullet-chart/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Bullet Chart NuGet in the App
To add the **Blazor Bullet Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart).
diff --git a/blazor/button-group/getting-started-with-web-app.md b/blazor/button-group/getting-started-with-web-app.md
index e3fb9e611b..665dcc439f 100644
--- a/blazor/button-group/getting-started-with-web-app.md
+++ b/blazor/button-group/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App
To add the **Blazor ButtonGroup** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/button/getting-started-with-web-app.md b/blazor/button/getting-started-with-web-app.md
index 3e7dd7afd9..ab969480be 100644
--- a/blazor/button/getting-started-with-web-app.md
+++ b/blazor/button/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Buttons and Themes NuGet in the App
To add the **Blazor Button** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md
index 75877e1c82..35156216b9 100644
--- a/blazor/calendar/getting-started-with-web-app.md
+++ b/blazor/calendar/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App
To add the **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/card/getting-started-with-web-app.md b/blazor/card/getting-started-with-web-app.md
index 8be0bdff56..3f1af2d7e5 100644
--- a/blazor/card/getting-started-with-web-app.md
+++ b/blazor/card/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Cards and Themes NuGet in the Blazor Web App
To add the **Blazor Card** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Cards](https://www.nuget.org/packages/Syncfusion.Blazor.Cards/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/carousel/getting-started-with-web-app.md b/blazor/carousel/getting-started-with-web-app.md
index 367192138a..8a4b836fce 100644
--- a/blazor/carousel/getting-started-with-web-app.md
+++ b/blazor/carousel/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Navigations and Themes NuGet in the Blazor Web App
To add the **Blazor Carousel** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/chat-ui/getting-started-webapp.md b/blazor/chat-ui/getting-started-webapp.md
index cc516ad3ab..3232999c79 100644
--- a/blazor/chat-ui/getting-started-webapp.md
+++ b/blazor/chat-ui/getting-started-webapp.md
@@ -30,6 +30,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor InteractiveChat and Themes NuGet in the App
To add the **Blazor Chat UI** component to your app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md
index e7547dc005..c33cdcf01f 100644
--- a/blazor/check-box/getting-started-with-web-app.md
+++ b/blazor/check-box/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Buttons and Themes NuGet in the Blazor Web App
To add the **Blazor CheckBox** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/chip/getting-started-with-web-app.md b/blazor/chip/getting-started-with-web-app.md
index d51f27b5fe..b81cf8644c 100644
--- a/blazor/chip/getting-started-with-web-app.md
+++ b/blazor/chip/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Buttons and Themes NuGet in the Blazor Web App
To add the **Blazor Chip** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/circular-gauge/getting-started-with-web-app.md b/blazor/circular-gauge/getting-started-with-web-app.md
index ce16e7ce2e..3202295f87 100644
--- a/blazor/circular-gauge/getting-started-with-web-app.md
+++ b/blazor/circular-gauge/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor CircularGauge and Themes NuGet in the Blazor Web App
To add the **Blazor CircularGauge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/color-picker/getting-started-with-web-app.md b/blazor/color-picker/getting-started-with-web-app.md
index 7ab3d99ea0..71d321c71f 100644
--- a/blazor/color-picker/getting-started-with-web-app.md
+++ b/blazor/color-picker/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Inputs and Themes NuGet in the Blazor Web App
To add the **Blazor ColorPicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/combobox/getting-started-with-web-app.md b/blazor/combobox/getting-started-with-web-app.md
index 4de20cb474..5798a4864c 100644
--- a/blazor/combobox/getting-started-with-web-app.md
+++ b/blazor/combobox/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor DropDowns and Themes NuGet in the Blazor Web App
To add the **Blazor ComboBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/context-menu/getting-started-with-web-app.md b/blazor/context-menu/getting-started-with-web-app.md
index 4c2ba355ba..1d8a1a7e20 100644
--- a/blazor/context-menu/getting-started-with-web-app.md
+++ b/blazor/context-menu/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Navigations and Themes NuGet in the Blazor Web App
To add the **Blazor ContextMenu** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/dashboard-layout/getting-started-with-web-app.md b/blazor/dashboard-layout/getting-started-with-web-app.md
index f9235abb09..24989f8638 100644
--- a/blazor/dashboard-layout/getting-started-with-web-app.md
+++ b/blazor/dashboard-layout/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Layouts and Themes NuGet in the Blazor Web App
To add the **Blazor Dashboard Layout** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/data-form/getting-started-with-web-app.md b/blazor/data-form/getting-started-with-web-app.md
index 898d077d5e..6e8a9adf16 100644
--- a/blazor/data-form/getting-started-with-web-app.md
+++ b/blazor/data-form/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor DataForm and Themes NuGet in the Blazor Web App
To add the **Blazor DataForm** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/data/getting-started-with-web-app.md b/blazor/data/getting-started-with-web-app.md
index f3820c68f2..c98c2e5cf0 100644
--- a/blazor/data/getting-started-with-web-app.md
+++ b/blazor/data/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Data and Themes NuGet in the Blazor Web App
To add the **Blazor DataManager** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/datepicker/getting-started-with-web-app.md b/blazor/datepicker/getting-started-with-web-app.md
index 000dca4d97..640cdf1c09 100644
--- a/blazor/datepicker/getting-started-with-web-app.md
+++ b/blazor/datepicker/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App
To add the **Blazor DatePicker** component in the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/daterangepicker/getting-started-with-web-app.md b/blazor/daterangepicker/getting-started-with-web-app.md
index 6b5b32afc4..a9528564e3 100644
--- a/blazor/daterangepicker/getting-started-with-web-app.md
+++ b/blazor/daterangepicker/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App
To add the **Blazor DateRangePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/datetime-picker/getting-started-with-web-app.md b/blazor/datetime-picker/getting-started-with-web-app.md
index 94a8027455..8c8ada7e67 100644
--- a/blazor/datetime-picker/getting-started-with-web-app.md
+++ b/blazor/datetime-picker/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App
To add the **Blazor DateTimePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/dialog/getting-started-with-web-app.md b/blazor/dialog/getting-started-with-web-app.md
index 35a6487fcc..8dace588f2 100644
--- a/blazor/dialog/getting-started-with-web-app.md
+++ b/blazor/dialog/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Popups and Themes NuGet in the Blazor Web App
To add the **Blazor Dialog** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/drop-down-menu/getting-started-with-web-app.md b/blazor/drop-down-menu/getting-started-with-web-app.md
index e5abaf6992..f48e1b16ab 100644
--- a/blazor/drop-down-menu/getting-started-with-web-app.md
+++ b/blazor/drop-down-menu/getting-started-with-web-app.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the Blazor Web App
To add the **Blazor DropDown Menu** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
diff --git a/blazor/predefined-dialogs/getting-started-webapp.md b/blazor/predefined-dialogs/getting-started-webapp.md
index 9dbb891573..97d031d9c2 100644
--- a/blazor/predefined-dialogs/getting-started-webapp.md
+++ b/blazor/predefined-dialogs/getting-started-webapp.md
@@ -25,6 +25,8 @@ You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Temp
Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+
## Install Syncfusion® Blazor Popups and Themes NuGet in the App
To add the **Blazor predefined dialog** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
From d7c9e9a3d578d09ff64310c48e623fcd1c41b378 Mon Sep 17 00:00:00 2001
From: SadhanaBaskaran
Date: Sat, 8 Nov 2025 10:20:54 +0530
Subject: [PATCH 116/266] 991769: Updated the UG content and samples for
Editing in Blazor DataGrid
---
blazor/datagrid/column-validation.md | 65 ++++++++++-------
blazor/datagrid/command-column-editing.md | 38 +++++-----
blazor/datagrid/persisting-data-in-server.md | 47 ++++++++-----
blazor/datagrid/template-editing.md | 73 ++++++++++----------
4 files changed, 125 insertions(+), 98 deletions(-)
diff --git a/blazor/datagrid/column-validation.md b/blazor/datagrid/column-validation.md
index 1967d3dc8f..0972c883ee 100644
--- a/blazor/datagrid/column-validation.md
+++ b/blazor/datagrid/column-validation.md
@@ -1,7 +1,7 @@
---
layout: post
title: Column Validation in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about Column Validation in Syncfusion Blazor DataGrid and much more details.
+description: Learn about Column Validation in Syncfusion Blazor DataGrid, including setup, validation types, and customization options.
platform: Blazor
control: DataGrid
documentation: ug
@@ -9,15 +9,15 @@ documentation: ug
# Validation in Blazor DataGrid
-Validation is a crucial aspect of data integrity in any application. The Syncfusion® Blazor DataGrid provides built-in support for easy and effective data validation. This feature ensures that the data entered or modified adheres to predefined rules, preventing errors and guaranteeing the accuracy of the displayed information.
+Validation is a critical aspect of maintaining data integrity in applications. The Syncfusion® Blazor DataGrid provides built-in support for efficient and reliable data validation. This feature ensures that entered or modified data adheres to predefined rules, helping prevent errors and maintain the accuracy of displayed information.
## Column validation
-Column validation allows you to validate edited or newly added row data before saving it. This feature is particularly useful when you need to enforce specific rules or constraints on individual columns to ensure data integrity. By applying validation rules to columns, you can display error messages for invalid fields and prevent the saving of erroneous data. This feature leverages the **Form Validator** library to perform validation. You can define validation rules using the [GridColumn.ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ValidationRules) property to specify the criteria for validating column values.
+Column validation ensures that edited or newly added row data meets specific criteria before being saved. This feature is useful for enforcing rules or constraints on individual columns to maintain data integrity. Validation rules can be defined using the [GridColumn.ValidationRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ValidationRules) property, which specifies the conditions for validating column values. The validation mechanism utilizes the **Form Validator** library.
-> Validation in Grid works based on the Microsoft Blazor EditForm behavior. Once a validation message is shown, it will be validated again only during form submission or when you focus out from that particular field. Refer to the [Microsoft Validation](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-5.0#data-annotations-validator-component-and-custom-validation) documentation for further reference.
+> Validation in the DataGrid is based on the Microsoft Blazor EditForm behavior. Once a validation message is displayed, the field is revalidated only during form submission or when focus is moved away from the field. Refer to the [Microsoft Validation](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-5.0#data-annotations-validator-component-and-custom-validation) documentation for additional details.
-The following code example demonstrates how to define a validation rule for a Grid column:
+The following example demonstrates how to define a validation rule for a Grid column:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -88,21 +88,21 @@ public class OrderDetails
## Data annotation
-Data annotation validation attributes are used to validate fields in the DataGrid. The following validation attributes are supported in the Grid:
+Data annotation validation attributes are used to validate fields in the Syncfusion® Blazor DataGrid. These attributes define validation rules that are applied during CRUD operations to ensure data integrity.
| Attribute Name | Functionality |
|---------------|--------------|
-| 1. RequiredAttribute
2. StringLengthAttribute
3. RangeAttribute
4. RegularExpressionAttribute
5. MinLengthAttribute
6. MaxLengthAttribute
7. EmailAddressAttribute
8. CompareAttribute
9. DataTypeAttribute
10. DataType.Custom
11. DataType.Date
12. DataType.DateTime
13. DataType.EmailAddress
14. DataType.ImageUrl
15. DataType.Url | These data annotation validation attributes are used as `validation rules` in DataGrid CRUD operations. | +| 1. RequiredAttribute
2. StringLengthAttribute
3. RangeAttribute
4. RegularExpressionAttribute
5. MinLengthAttribute
6. MaxLengthAttribute
7. EmailAddressAttribute
8. CompareAttribute
9. DataTypeAttribute
10. DataType.Custom
11. DataType.Date
12. DataType.DateTime
13. DataType.EmailAddress
14. DataType.ImageUrl
15. DataType.Url | These data annotation attributes are used as `validation rules` in DataGrid CRUD operations. | For more information on data annotation, refer to this [documentation](https://blazor.syncfusion.com/documentation/datagrid/data-annotation) section. ## Custom validation -Custom validation allows users to define their own validation logic based on specific requirements. +Custom validation enables the definition of validation logic tailored to specific application requirements. -To implement custom validation, create a class that inherits from the `ValidationAttribute` class and override the `IsValid` method. All custom validation logic should be placed inside the `IsValid` method. +To implement custom validation, create a class that inherits from the `ValidationAttribute` class and override the `IsValid` method. All custom validation logic should be placed within the `IsValid` method. -The following sample code demonstrates how to implement custom validation for the **EmployeeID** and **Freight** fields. +The following example demonstrates how to implement custom validation for the **EmployeeID** and **Freight** fields: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -223,9 +223,9 @@ public class CustomValidationFreight : ValidationAttribute ### Validate complex column using data annotation attribute -You can validate complex data binding columns by using the [ValidateComplexType](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-5.0#data-annotations-validator-component-and-custom-validation) attribute from data annotations. +Complex data binding columns can be validated using the [ValidateComplexType](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-5.0#data-annotations-validator-component-and-custom-validation) attribute from data annotations. -In the following sample, the `ValidateComplexType` attribute is applied to the `EmployeeName` class to enable validation of its properties. A custom validation message is displayed in the "First Name" column by using the `RequiredAttribute` with a custom error message. +In the following example, the `ValidateComplexType` attribute is applied to the **EmployeeName** class to enable validation of its properties. A custom validation message is displayed in the **First Name** column using the `RequiredAttribute` with a custom error message. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -296,22 +296,27 @@ public class EmployeeInfo {% endhighlight %} {% endtabs %} -> Ensure to include the package **Microsoft.AspNetCore.Components.DataAnnotations.Validation** for complex type validation using the following reference: -`
@@ -463,9 +473,10 @@ The **Validator** property can also be used to disable the built-in validator co
## Display validation message in dialog template
-Use form validation to display a validation message for a field that is not defined as a column in the Syncfusion® Blazor DataGrid.
+Use form validation to show a validation message for a field that is not defined as a column in the Syncfusion® Blazor DataGrid.
+The [Validator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Validator) property can be used to display a validation message for a field within the dialog template, even if the field is not included in the Grid columns.
-You can use the **Validator** property to show a validation message for a field in the dialog template, even if that field is not present in the Grid columns. In the following example, the validation message for **ShipAddress** is displayed in the dialog template, even though the **ShipAddress** field is not defined as a Grid column.
+In the following example, the validation message for **ShipAddress** is shown in the dialog template, although the **ShipAddress** field is not defined as a Grid column.
> Validation messages for fields not defined in the Grid columns will appear as a validation summary at the top of the dialog edit form.
@@ -643,4 +654,6 @@ public class OrderDetails
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBoZChqfqyraNHa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-display-validation-message-in-dialog-template).
\ No newline at end of file
+> A fully working sample is available [here](https://github.com/SyncfusionExamples/blazor-datagrid-display-validation-message-in-dialog-template).
+
+N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation.
\ No newline at end of file
diff --git a/blazor/datagrid/command-column-editing.md b/blazor/datagrid/command-column-editing.md
index 95c07e3b38..5005fd1684 100644
--- a/blazor/datagrid/command-column-editing.md
+++ b/blazor/datagrid/command-column-editing.md
@@ -1,7 +1,7 @@
---
layout: post
title: Command Column Editing in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about Command Column Editing in Syncfusion Blazor DataGrid and much more details.
+description: Learn how to configure Command Column Editing in Syncfusion Blazor DataGrid with setup, usage, and customization tips.
platform: Blazor
control: DataGrid
documentation: ug
@@ -9,12 +9,14 @@ documentation: ug
# Command column editing in Blazor DataGrid
-The command column editing feature allows you to add CRUD (Create, Read, Update and Delete) action buttons in a column for performing operations on individual rows. This feature is commonly used when you want to enable inline editing, deletion, or saving of row changes directly within the Grid.
+The command column editing feature enables CRUD (Create, Read, Update, and Delete) action buttons in a column to perform operations on individual rows. This approach is useful for inline editing, deletion, or saving changes directly within the Grid.
-To enable command column editing, use the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. By defining this property, you can specify the command buttons to display in the command column, such as Edit, Delete, Save, and Cancel.
+To enable command column editing, use the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. This property allows you to define which command buttons—such as Edit, Delete, Save, and Cancel—should appear in the command column.
The available built-in command buttons are:
+The available built-in command buttons:
+
| Command Button | Action |
|---------------|-----------------------------|
| Edit | Edit the current row. |
@@ -22,7 +24,7 @@ The available built-in command buttons are:
| Save | Update the edited row. |
| Cancel | Cancel the edit operation. |
-Here's an example that demonstrates how to add CRUD action buttons in a column using the `GridCommandColumns` property:
+The following example demonstrates how to add CRUD action buttons in a column using the [GridCommandColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridCommandColumns.html) property:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -99,11 +101,11 @@ public class OrderDetails
## Custom command column
-The custom command column feature in the Syncfusion® Blazor DataGrid allows you to add custom command buttons in a column to perform specific actions on individual rows. This feature is particularly useful when you need to provide customized functionality for editing, deleting, or performing any other operation on a row.
+The custom command column feature in the Syncfusion® Blazor DataGrid enables the addition of custom command buttons in a column to perform specific actions on individual rows. This feature is useful for implementing customized functionality such as editing, deleting, or executing other operations on a row.
-To add custom command buttons in a column, you can utilize the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. Furthermore, you can define the actions associated with these custom buttons using the [CommandClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CommandClicked) event.
+To add custom command buttons, configure the [GridColumn.Commands](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Commands) property. Define the actions for these buttons using the [CommandClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_CommandClicked) event.
-Here's an example that demonstrates how to add custom command buttons using the `GridCommandColumns` property and customize the button click behavior to display Grid details in a dialog using the `CommandClicked` event:
+The following example demonstrates how to add custom command buttons using the [GridCommandColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridCommandColumns.html) property and configure the `CommandClicked` event to display Grid details in a dialog:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -204,18 +206,18 @@ public class OrderDetails
{% previewsample "https://blazorplayground.syncfusion.com/embed/htVoDiBhCEmvtthU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> The Syncfusion® Blazor DataGrid does not support adding a new record using the command column. This is because the command column and its buttons are rendered only after a record is created. As a result, the Grid supports only edit, delete, cancel, and update options in the command column.
+> The Syncfusion® Blazor DataGrid does not support **adding new records** using the command column. This limitation exists because the command column and its buttons are rendered only after a record is created. Therefore, the command column supports only **edit**, **delete**, **cancel**, and **update** operations.
-## Hide the command column button in a specific record
+## Hide command column button in specific records
-In the Syncfusion® Blazor DataGrid, command columns are used to perform CRUD operations on records, such as editing or deleting. Sometimes, you may want to hide the command buttons for specific records based on certain conditions. This can be done by using the [`RowDataBound`](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event, which is triggered every time a row is created or updated in the Grid.
+In the Syncfusion® Blazor DataGrid, command columns are used to perform CRUD operations on records, such as editing or deleting. In certain scenarios, command buttons must be hidden for specific records based on defined conditions. This behavior can be achieved using the [RowDataBound](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event, which is triggered whenever a row is created or updated in the Grid.
-This is demonstrated in the following steps where the `RowDataBound` event is triggered when a record is created. Based on the record details, you can add a specific class name to that row and hide the command buttons using CSS styles.
+The following steps demonstrate how to conditionally hide command buttons:
-* Use the `RowDataBound` event of the Grid to access each row's data at the time of rendering.
-* Inside the event, check the value of the **Verified** column for the current record.
-* Based on the value of the **Verified** column, if Verified is **false**, only the **Edit** button will be shown; otherwise **Delete** button will be shown.
-* In order to hide buttons (**display: none** style to the buttons), CSS class is applied to the row inside the `RowDataBound` event based on the record condition using `addClass` method, and corresponding CSS rules are defined to hide the respective command buttons.
+* Use the `RowDataBound` event of the Grid to access each row's data during rendering.
+* Check the value of the **Verified** column for the current record.
+* If the **Verified** value is **false**, display only the **Edit** button; otherwise, display the **Delete** button.
+* To hide buttons, apply a CSS class to the row using the `addClass` method inside the `RowDataBound` event based on the record condition. Define corresponding CSS rules to apply the style to the respective command buttons.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -240,11 +242,11 @@ This is demonstrated in the following steps where the `RowDataBound` event is tr
```
-> Here, **!important** attribute is used to apply custom styles since the column chooser dialog position will be calculated dynamically based on content.
-This can be demonstrated in the following sample:
+> The **!important** directive is used to ensure the custom styles override the dynamically calculated dimensions of the dialog.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -336,11 +340,9 @@ public class OrderData
## Change default search operator of the column chooser
-The column chooser dialog in the Syncfusion® Blazor DataGrid provides a search box that allows you to search for column names. By default, the search functionality uses the **StartsWith** operator to match columns and display the results in the column chooser dialog. However, there might be cases where you need to change the default search operator to achieve more precise data matching.
+The Syncfusion® Blazor DataGrid provides a search box in the column chooser dialog to filter column names. By default, the search uses the **StartsWith** operator.
-To change the default search operator of the column chooser in Grid, you need to use the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Operator.html) property of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) class.
-
-Here’s an example of how to change the default search operator of the column chooser to **Contains** in the Grid:
+To modify this behavior, use the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Operator.html) property of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -412,11 +414,13 @@ public class OrderData
## Column chooser template
-Using the column chooser template, you can customize the column chooser dialog using [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) and [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_FooterTemplate) of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html). You can access the parameters passed to the templates using implicit parameter named context.
+The Syncfusion® Blazor DataGrid allows customizing the column chooser dialog using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) and [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_FooterTemplate) properties of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html). These templates enable injecting custom content into the body and footer of the column chooser.
+
+The parameters passed to the templates can be accessed using the implicit **context** parameter.
### Customize the content of column chooser
-The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) tag in the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) is used to customize the content in the column chooser dialog. You can type cast the context as [ColumnChooserTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserTemplateContext.html) to get columns inside content template.
+The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) property of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) is used to customize the content of the column chooser dialog. The **context** parameter can be typecast to [ColumnChooserTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserTemplateContext.html) to access the list of columns within the template.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -612,19 +616,18 @@ namespace Model
{% endhighlight %}
{% endtabs %}
-> * You can build reusable custom component based on your customization need as like above code example.
-> * In the above example, [ListView](https://blazor.syncfusion.com/documentation/listview/getting-started) is used as custom component in the content template to show/hide columns.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLJiLVTWKyyPjml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLJiLVTWKyyPjml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Column chooser content template in Blazor DataGrid.](images/blazor-datagrid-column-chooser-content-template.png)" %}
+
### Customize the footer of column chooser
-The [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_FooterTemplate) tag in the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) is used to customize the footer in the column chooser dialog. You can type cast the context as [ColumnChooserFooterTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserFooterTemplateContext.html) to get columns inside FooterTemplate.
+The [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_FooterTemplate) property of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) allows customizing the footer area of the column chooser dialog. The **context** parameter can be typecast to [ColumnChooserFooterTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserFooterTemplateContext.html) to access the list of columns and perform actions such as applying or cancelling changes.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Grids
@@ -709,19 +712,14 @@ The [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gri
## 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.
+The Syncfusion® Blazor DataGrid supports grouping items in the column chooser dialog using the [GridColumnChooserItemGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserItemGroup.html) component. This improves usability by organizing columns into logical sections.
-* **Filter group columns** – Write helper methods to fetch grouped columns dynamically using field names.
+To configure this:
-The following example demonstrates how to group column chooser items using these steps:
+1. Set the [ShowColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnChooser) property to **true** and include **"ColumnChooser"** in the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) collection.
+2. Use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) property of [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) to define the layout of chooser items.
+3. Define logical groups using the `GridColumnChooserItemGroup` component and assign a Title for each group.
+4. Use helper methods to filter and render columns dynamically within each group.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/datagrid/column-menu.md b/blazor/datagrid/column-menu.md
index f32d0768db..c929179017 100644
--- a/blazor/datagrid/column-menu.md
+++ b/blazor/datagrid/column-menu.md
@@ -1,7 +1,7 @@
---
layout: post
title: Column Menu in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about column menu in the Syncfusion Blazor DataGrid component and much more details.
+description: Learn how to use and customize the column menu in Syncfusion Blazor DataGrid, including events, actions, and advanced options for better control.
platform: Blazor
control: DataGrid
documentation: ug
@@ -9,20 +9,22 @@ documentation: ug
# Column Menu in Blazor DataGrid
-The column menu in the Syncfusion® Blazor DataGrid provides options to enable features such as sorting, grouping, filtering, column chooser, and autofit. When users click on the column header’s menu icon, a menu will be displayed with these integrated features. To enable the column menu, you need to set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property to true in the Grid configuration.
+The Syncfusion® Blazor DataGrid supports a column menu that provides quick access to features such as sorting, grouping, filtering, column chooser, and autofit. Clicking the column header’s menu icon displays a contextual menu with these options.
-The default menu items are displayed in the following table:
+To enable the column menu, set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnMenu) property to **true** in the [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) configuration.
+
+The default column menu items are listed in the table:
| Item | Description |
|-----|-----|
| **SortAscending** | Sort the current column in ascending order. |
| **SortDescending** | Sort the current column in descending order. |
-| **Group** | Group the current column. |
-| **Ungroup** | Ungroup the current column. |
-| **AutoFit** | Auto fit the current column. |
-| **AutoFitAll** | Auto fit all columns. |
-| **ColumnChooser** | Choose the column visibility. |
-| **Filter** | Show the filter option as given in filterSettings [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) property |
+| **Group** | Groups the current column. |
+| **Ungroup** | Ungroups the current column. |
+| **AutoFit** | Adjusts the width of the current column to fit its content. |
+| **AutoFitAll** | Adjusts the width of all columns to fit their content. |
+| **ColumnChooser** | Opens the column chooser to manage column visibility. |
+| **Filter** | Displays the filter option as defined in the [FilterSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) property. |
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -89,16 +91,16 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLzMLWLKTPWHQcg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> * You can disable column menu for a particular column by defining the column's [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property as false.
-> * You can customize the default menu items by defining the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) with the required items.
+> * To disable the column menu for a specific column, set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
+> * To customize the menu items, define the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) property with the required options.
-## Prevent column menu for particular column
+## Disable column menu for specific column
-The Syncfusion® Blazor DataGrid provides the ability to prevent the appearance of the column menu for specific columns. This feature is useful when you want to restrict certain columns from being customizable through the column menu.
+The Syncfusion® Blazor DataGrid provides the ability to prevent the column menu from appearing for specific columns. This is useful when certain columns should not be customizable through the column menu.
-To prevent the column menu for a particular column, you can set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property to **false** for that specific column configuration. This will disable the column menu options specifically for the designated column, while other columns will have the column menu enabled.
+To disable the column menu for a specific column, set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
-The following example demonstrates how to prevent the column menu for a specific column. In this example, the column menu is disabled for the **OrderID** column by setting the `ShowColumnMenu` property to **false**:
+The column menu is disabled for the **OrderID** column:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -167,9 +169,11 @@ public class OrderData
## Add custom column menu item
-The custom column menu item feature allows you to add additional menu items to the column menu in the Syncfusion® Blazor DataGrid. These custom menu items can be defined using the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) property, which accepts a collection of [ColumnMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuItemModel.html) class.You can define the actions for these custom items in the [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked) event.
+The Syncfusion® Blazor DataGrid supports adding custom items to the column menu using the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) property. This property accepts a collection of [ColumnMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuItemModel.html) objects.
+
+Custom actions for these items can be defined in the [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked) event.
-Consider the following example, which demonstrates how to add a custom column menu item to clear the sorting and grouping of the Grid using the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) and [ClearGroupingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearGroupingAsync) method in the `ColumnMenuItemClicked` event:
+In this configuration, two custom column menu items are added to clear sorting and grouping using the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) and [ClearGroupingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearGroupingAsync) methods:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -260,17 +264,19 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/htVJMrMgCLBDWpXz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Customize menu items for particular columns
+## Customize menu items for specific columns
+
+The Syncfusion® Blazor DataGrid allows customizing the visibility of column menu items for specific columns. This is useful when certain actions, such as filtering or grouping, should not be available for specific columns.
-Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the [MenuItem.Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property as **true** in the [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen) event.
+To hide a menu item for a specific column, set the [MenuItem.Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property to **true** in the [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen) event.
-The following sample, **Filter** item was hidden in column menu when opens for the **OrderID** column:
+The **Filter** item is hidden when the column menu is opened for the **OrderID** column.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
@@ -453,22 +457,23 @@ public class OrderData
## Customize the icon of column menu
-To customize the column menu icon, you need to override the default Grid class `.e-icons.e-columnmenu` with a custom CSS property called **content**. By specifying a Unicode character or an icon font’s CSS class, you can change the icon displayed in the column menu.
+The Syncfusion® Blazor DataGrid allows customizing the column menu icon by overriding the default CSS class **.e-icons.e-columnmenu**. This is achieved by applying a custom CSS rule with the **content** property to display a different icon or Unicode character.
+
+**Steps to customize the icon:**
-1. Add the necessary CSS code to override the default Grid class:
+1. Override the default CSS class:
```css
.e-grid .e-columnheader .e-icons.e-columnmenu::before {
content: "\e99a";
}
```
-2. Import the required icon stylesheets. You can use either the material or bootstrap5 style, depending on your preference. Add the following code to import the stylesheets:
+2. Import the icon stylesheet based on the selected theme preference:
```css
```
-Here is an example that demonstrates how to customize the column menu icon in the Grid:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -539,11 +544,44 @@ public class OrderData
## Column menu events
-The column menu in Syncfusion® Blazor DataGrid provides a set of events that allow customization of behavior and performing actions when the column menu is opened or clicked. The below events are helpful for adding additional functionality or implementing specific actions based on user interactions with the column menu.
+The Syncfusion® Blazor DataGrid provides events that are triggered during column menu interactions. These events allow execution of custom logic before the menu opens and after an item is clicked, enabling customization and UI updates.
+
+1. [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen): Triggered before the column menu opens.
+2. [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked): Triggered when a column menu item is clicked.
+
+### OnColumnMenuOpen
+
+The `OnColumnMenuOpen` event is triggered before the column menu opens. This event can be used to inspect or modify the menu or cancel its opening based on custom logic.
+
+**Event Arguments**
+
+The event uses the [ColumnMenuOpenEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuOpenEventArgs.html) class, which includes:
+
+| Property | Type | Description |
+|-------------------|-------------------------------------|-------------------------------------------------------------------------------------------------|
+| Cancel | bool | Indicates whether to prevent the column menu from opening. Set to **true** to cancel opening. |
+| Column | GridColumn | Represents the grid column where the column menu is currently open. |
+| ColumnMenuIndex | int | Indicates the level of the menu item within the menu hierarchy. Starts from 0 for top-level. |
+| Items | List<MenuItem> | The list of menu items displayed in the column menu. |
+| Left | double | The left position of the column menu relative to the document or container. |
+| ParentItem` | MenuItem | The parent menu item of the currently clicked sub-menu item. Null if no parent exists. |
+| Top | double | The top position of the column menu relative to the document or container. |
-1. The [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen) event triggers before the column menu opens.
+### ColumnMenuItemClicked
+
+The `ColumnMenuItemClicked` event is triggered when a column menu item is clicked. This event can be used to perform actions based on the selected menu item.
+
+**Event Arguments**
+
+The event uses the [ColumnMenuClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuClickEventArgs.html) class, which includes:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| Column | GridColumn | The grid column associated with the column menu popup. |
+| Element | ElementReference | The DOM element that triggered the event. |
+| Event | System.EventArgs | Provides event details for the column menu interaction. |
+| Item | Navigations.MenuItemModel | The menu item that was clicked in the column menu. |
-2. The [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked) event triggers when the user clicks the column menu of the Grid.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -623,182 +661,3 @@ public class OrderData
{% endtabs %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rthfMhiKzNimycPe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
From 00edbc8c89b41a97e1a892228576838dcd23492c Mon Sep 17 00:00:00 2001
From: SadhanaBaskaran
Date: Tue, 2 Dec 2025 10:23:12 +0530
Subject: [PATCH 149/266] 993738: Updated the UG content and samples for
Connecting to DataBase Section in Blazor DataGrid
---
.../connecting-to-database/postgresql-server.md | 12 +++++++-----
1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/blazor/datagrid/connecting-to-database/postgresql-server.md b/blazor/datagrid/connecting-to-database/postgresql-server.md
index fcd108aff6..9f9bea6950 100644
--- a/blazor/datagrid/connecting-to-database/postgresql-server.md
+++ b/blazor/datagrid/connecting-to-database/postgresql-server.md
@@ -15,11 +15,13 @@ The Syncfusion® Blazor DataGrid component s
- Implementing a [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/custom-binding) for custom logic.
- Configuring remote data binding through adaptors such as [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor).
-* **Remote Data Binding using UrlAdaptor**
+This section explains how to connect and retrieve data from a PostgreSQL Server database using [Npgsql EntityFrameworkCore PostgreSQL](https://www.nuget.org/packages/Npgsql.EntityFrameworkCore.PostgreSQL) and bind the data to a Blazor DataGrid component through the following methods:
+
+ **Using UrlAdaptor**
The [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) enables communication between the DataGrid and a remote API service connected to **PostgreSQL** Server. This approach is suitable when the API implements custom logic for data operations and returns results in the **result** and **count** format.
-* **Custom Data Binding using CustomAdaptor**
+**Using CustomAdaptor**
The [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) provides full control over data operations and CRUD functionality. It allows implementing custom logic for **searching**, **filtering**, **sorting**, **paging**, and **grouping** directly in the server-side code.
@@ -181,7 +183,7 @@ Access the theme stylesheet and script from NuGet using [Static Web Assets](http
5. **Configure DataGrid with UrlAdaptor**
-The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component supports multiple adaptors for remote data binding. For API services, set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to [Adaptors.UrlAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_UrlAdaptor) and specify the service endpoint in the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property.
+The [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component supports multiple adaptors for remote data binding. For API services, set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to [Adaptors.UrlAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_UrlAdaptor) and specify the service endpoint in the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property.
{% tabs %}
{% highlight razor tabtitle="Index.razor"%}
@@ -470,7 +472,7 @@ public void Insert([FromBody] CRUDModel Value)
**Update Operation:**
-To edit a row, first select desired row and click the **Edit** toolbar button. The edit form will be displayed and proceed to modify any column value as per your requirement. Clicking the **Update** toolbar button will update the edit record in the Orders table by involving the following **Post** method of an API.
+To edit a row, select the required row and click the **Edit** toolbar button. The edit form will appear, allowing modification of any column value as needed. Clicking the **Update** toolbar button applies the changes to the record in the Orders table by invoking the corresponding **POST** method of the API.
{% tabs %}
{% highlight c# tabtitle="OrdersController.cs" %}
@@ -985,7 +987,7 @@ public class CustomAdaptor : DataAdaptor
When employing `CustomAdaptor`, the grouping operation must be managed within the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the `CustomAdaptor`.
-In the code example below, grouping a custom data source can be achieved by utilizing the [Group](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html#Syncfusion_Blazor_Data_DataUtil_Group__1_System_Collections_IEnumerable_System_String_System_Collections_Generic_List_Syncfusion_Blazor_Data_Aggregate__System_Int32_System_Collections_Generic_IDictionary_System_String_System_String__System_Boolean_System_Boolean_) method from the [DataUtil](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html) class. Alternatively, you can use your own method for grouping operation and bind the resulting data to the Blazor DataGrid component.
+In the code example below, grouping a custom data source can be achieved by utilizing the [Group](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html#Syncfusion_Blazor_Data_DataUtil_Group__1_System_Collections_IEnumerable_System_String_System_Collections_Generic_List_Syncfusion_Blazor_Data_Aggregate__System_Int32_System_Collections_Generic_IDictionary_System_String_System_String__System_Boolean_System_Boolean_) method from the [DataUtil](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html) class. An alternative approach is to implement a custom method for the grouping operation and bind the resulting data to the Blazor DataGrid component.
{% highlight razor %}
public class CustomAdaptor : DataAdaptor
From a49942959939d32436505501f1766bb655cf8cf4 Mon Sep 17 00:00:00 2001
From: SadhanaBaskaran
Date: Tue, 2 Dec 2025 10:36:07 +0530
Subject: [PATCH 150/266] 984957: Updated the UG content and samples for Row in
Blazor DataGrid
---
blazor/datagrid/detail-template.md | 24 +++++-------------------
blazor/datagrid/row-drag-and-drop.md | 12 ++++--------
blazor/datagrid/row-template.md | 6 ------
blazor/datagrid/row.md | 24 ++++--------------------
4 files changed, 13 insertions(+), 53 deletions(-)
diff --git a/blazor/datagrid/detail-template.md b/blazor/datagrid/detail-template.md
index 30f05f2934..b494822110 100644
--- a/blazor/datagrid/detail-template.md
+++ b/blazor/datagrid/detail-template.md
@@ -21,11 +21,9 @@ For an overview of the `detail template` in the grid, watch the following video.
To integrate the detail template in the grid:
1. Add the element within the component to define the detail row content.
-2. Use any HTML structure or Blazor components inside the DetailTemplate to render custom content for each expanded row.
+2. Use any HTML structure or Blazor components inside the **DetailTemplate** to render custom content for each expanded row.
3. Optionally, bind data to the template to display information corresponding to the expanded row.
-The following example demonstrates using `DetailTemplate` to display additional details for each row:
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@page "/"
@@ -182,8 +180,6 @@ Use the [ExpandCollapseDetailRowAsync](https://help.syncfusion.com/cr/blazor/Syn
> Alternatively, call `ExpandCollapseDetailRowAsync` with the row data object in the `DataBound` event.
-The following example expands the record with `EmployeeID` equal to 1 by invoking `ExpandCollapseDetailRowAsync` in the `DataBound` event:
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -309,7 +305,7 @@ The Syncfusion® Blazor DataGrid can render
To render a custom component or build a hierarchical grid inside the detail row, define the template in the [DetailTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_DetailTemplate) within the `GridTemplates` section. The hierarchical DataGrid displays data in expandable or collapsible levels using the expand or collapse button, or custom content such as HTML elements.
-The following example uses the detail template to display parent–child data in a hierarchical structure with multiple levels (Employee → Orders → Customers):
+The following example uses the detail template to display parent–child data in a hierarchical structure with multiple levels (**Employee → Orders → Customers**):
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -480,8 +476,6 @@ A template column in a detail grid within the Syncfusion Employees = new List();
To expand or collapse a specific detail row programmatically, use [ExpandCollapseDetailRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExpandCollapseDetailRowAsync__0_) and pass the corresponding row data object.
-The following example expands or collapses a specific employee’s detail row when the button is clicked.
-
In the example, the `Expand` method validates the row index and then invokes `ExpandCollapseDetailRowAsync` with the selected row’s data:
{% tabs %}
@@ -1438,8 +1430,6 @@ Use the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G
```
-The following example hides the expand/collapse icon for the row with `EmployeeID` equal to `1` when no child records exist:
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1577,8 +1567,6 @@ public class OrderData
Aggregates display summary values in the footer, group footer, or group caption of the detail grid. Use this feature to calculate and show summary information.
-The following example renders aggregates in a detail grid to display the sum and maximum values of the `Freight` column:
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -2082,7 +2070,7 @@ To customize the appearance of the group expand/collapse icons in the detail Gri
}
```
-In this example, the `.e-icon-gdownarrow` and `.e-icon-grightarrow` classes target the expand and collapse icons, respectively. Modify the `content` property to change the icon displayed. You can use the available [Syncfusion® icons](https://blazor.syncfusion.com/documentation/appearance/icons) based on your theme.
+In this example, the `.e-icon-gdownarrow` and `.e-icon-grightarrow` classes target the expand and collapse icons, respectively. Modify the `content` property to change the icon displayed. [Syncfusion® icons](https://blazor.syncfusion.com/documentation/appearance/icons) sets can be used based on the selected theme.
@@ -2282,13 +2270,11 @@ In this example, the `.e-cellselectionbackground` class targets the background c
Detail template is not supported with the following features:
-* Frozen rows and columns
* Immutable mode
* Infinite scrolling
* Virtual scrolling
* Print
* Row template
-* Row spanning
-* Column spanning
* Lazy load grouping
-* State persistence
\ No newline at end of file
+* State persistence
+* Row and Column Spanning
\ No newline at end of file
diff --git a/blazor/datagrid/row-drag-and-drop.md b/blazor/datagrid/row-drag-and-drop.md
index b1477c6d3e..64a2da24ab 100644
--- a/blazor/datagrid/row-drag-and-drop.md
+++ b/blazor/datagrid/row-drag-and-drop.md
@@ -18,9 +18,7 @@ Enable row drag and drop by setting [AllowRowDragAndDrop](https://help.syncfusio
## Drag and drop within DataGrid
-The drag and drop feature enables reordering of rows within the Syncfusion® Blazor DataGrid using the drag handle. Set the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to `true` to enable this feature. By default, the value is `false`.
-
-Here is an example that enables row drag and drop within the grid:
+The drag and drop feature enables reordering of rows within the Syncfusion® Blazor DataGrid using the drag handle. Set the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to **true** to enable this feature. By default, the value is **false**.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -106,9 +104,7 @@ Here is an example that enables row drag and drop within the grid:
## Drag and drop to DataGrid
-The Syncfusion® Blazor DataGrid supports dragging rows from one grid and dropping them into another. Enable this feature by setting the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to `true` on both grids. To specify the target grid, configure the [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property with the target grid's ID.
-
-The following example enables row drag and drop between two grids:
+The Syncfusion® Blazor DataGrid supports dragging rows from one grid and dropping them into another. Enable this feature by setting the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property to **true** on both grids. To specify the target grid, configure the [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property with the target grid's ID.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -287,7 +283,7 @@ public class OrdersDetails
## Drag and drop to custom component
-The Syncfusion® Blazor DataGrid supports dragging rows into custom components. Enable [AllowRowDragAndDrop] and set [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) to the `ID` of the target component.
+The Syncfusion® Blazor DataGrid supports dragging rows into custom components. Enable [AllowRowDragAndDrop] and set [RowDropSettings.TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) to the **ID** of the target component.
In the following example, selected grid rows are dropped into a TreeGrid using the [RowDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropped) event. After the drop, the corresponding rows are removed from the source grid and added to the target:
@@ -795,4 +791,4 @@ public class OrderData
- A single row can be dragged and dropped within the same grid even if multiple selection is not enabled.
- Row drag and drop does not have built-in support when combined with sorting, filtering, hierarchy grid, or row template features.
- Row drag and drop with grouping does not support lazy-load grouping.
-- Drag and drop within the same group key is not supported. Dragging multiple rows from different grouped collections is not supported.
\ No newline at end of file
+- Dragging and dropping within the same group key is not supported. The grid does not allow drag-and-drop for multiple rows that belong to different grouped collections.
\ No newline at end of file
diff --git a/blazor/datagrid/row-template.md b/blazor/datagrid/row-template.md
index fe1eaf17b9..a75adefcef 100644
--- a/blazor/datagrid/row-template.md
+++ b/blazor/datagrid/row-template.md
@@ -21,8 +21,6 @@ For an overview of `row templates` in the Grid, watch the following video.
{% youtube "youtube:https://www.youtube.com/watch?v=Dft0kerEGUQ" %}
-The following example demonstrates a row template that displays employee information with a photo in the first column and details such as name, address, and other fields in the second column for each row.
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -197,8 +195,6 @@ Typically, the Syncfusion® Blazor DataGrid
To format values inside a row template, apply .NET formatting in the template (for example, using `ToString` with a format string) or invoke a helper method to produce the desired output such as dates, currency, or custom text.
-The following example formats the hire date within the template using a custom date format:
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -518,8 +514,6 @@ The Syncfusion® Blazor DataGrid supports em
To render a Syncfusion® Blazor Chart in a row template, use the [RowTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_RowTemplate) property to define the row layout and include the chart markup within the template.
-The following example renders a Syncfusion® chart alongside order details in each row:
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@page "/"
diff --git a/blazor/datagrid/row.md b/blazor/datagrid/row.md
index 8667942787..12663e5543 100644
--- a/blazor/datagrid/row.md
+++ b/blazor/datagrid/row.md
@@ -227,9 +227,6 @@ To change the background color of the selected row, add the following CSS:
background-color: #f9920b;
}
```
-
-The following example uses the `.e-selectionbackground` class to style the selected row:
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -317,8 +314,6 @@ public class OrderData
The Syncfusion® Blazor DataGrid supports customizing row height to display more or less content as needed. Use the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property to change the height of all rows in the Grid.
-The following example demonstrates dynamically changing the row height using the `RowHeight` property:
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -425,8 +420,6 @@ public class OrderData
Customize the row height for a specific row when a single record needs additional space or emphasis. Use the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property in combination with the [RowDataBound](https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound) event to apply a CSS class conditionally.
-In the following example, the row with `OrderID` '10249' is assigned a custom height via a CSS class in the `RowDataBound` event:
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -524,9 +517,7 @@ public class OrderData
The row hover feature applies a visual effect when the mouse pointer is over a row, improving readability and helping to identify the focused record. Enable or disable the effect using the [EnableHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableHover) property.
-By default, `EnableHover` is `true`. Set it to `false` to disable row hover.
-
-The following example enables or disables row hover using a [Switch](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started-webapp) component:
+By default, `EnableHover` is **true**. Set it to **false** to disable row hover.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -617,9 +608,7 @@ The following example enables or disables row hover using a [Switch](https://bla
## Row pinning (Frozen)
-The Syncfusion® Blazor DataGrid can freeze rows to keep them visible while scrolling vertically through large datasets. This maintains important context as users navigate data.
-
-To know about frozen rows in Grid, you can check this video.
+The Syncfusion® Blazor DataGrid provides an option to freeze rows, keeping them visible while scrolling vertically through large datasets. This feature helps maintain important information in view for better readability.
{% youtube "youtube:https://www.youtube.com/watch?v=L2NvKyBomhM"%}
@@ -746,8 +735,6 @@ Apply the following CSS to change the default line color:
}
```
-The following example demonstrates changing the frozen rows’ line color using CSS:
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -851,10 +838,9 @@ The Syncfusion® Blazor DataGrid supports pr
The `AddRecordAsync` method takes two parameters:
-> The **data** object representing the new row to be added
-> The **index** at which the new row should be inserted. If no index is specified, the new row is added at the end.
+ - The **data** object representing the new row to be added
+ - The **index** at which the new row should be inserted. If no index is specified, the new row is added at the end.
-The following example shows how to add a new row using `AddRecordAsync`:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1032,8 +1018,6 @@ The Syncfusion® Blazor DataGrid can display
Use the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event on the master Grid to obtain the selected record. Apply a filter through the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the detail Grid and bind the resulting collection to its [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource).
-In the following sample, selecting a row in the master Grid displays the corresponding orders in the detail Grid:
-
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
From ed39f45f62fc8f932757600854ceedfb07610979 Mon Sep 17 00:00:00 2001
From: SadhanaBaskaran
Date: Wed, 26 Nov 2025 12:36:48 +0530
Subject: [PATCH 151/266] 993738: Updated the UG content and samples for
Connecting to DataBase section in Blazor DataGrid
---
.../datagrid/connecting-to-database/dapper.md | 333 +++++++++------
.../microsoft-sql-server.md | 380 ++++++++++++------
.../connecting-to-database/mysql-server.md | 277 +++++++------
3 files changed, 637 insertions(+), 353 deletions(-)
diff --git a/blazor/datagrid/connecting-to-database/dapper.md b/blazor/datagrid/connecting-to-database/dapper.md
index b056c801d7..ca9dabdd85 100644
--- a/blazor/datagrid/connecting-to-database/dapper.md
+++ b/blazor/datagrid/connecting-to-database/dapper.md
@@ -9,39 +9,83 @@ documentation: ug
# Connecting SQL data to a Blazor DataGrid Component using Dapper
-This section describes how to connect and retrieve data from a Microsoft SQL Server database using [Dapper](https://github.com/DapperLib/Dapper) and [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.6?_src=template) and bind it to the Blazor DataGrid component.
+The Syncfusion® Blazor DataGrid component supports binding data from Microsoft SQL Server using [Dapper](https://github.com/DapperLib/Dapper) and [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.6?_src=template). **Dapper** is a lightweight object-relational mapper (ORM) that simplifies executing SQL queries and mapping results to C# domain models.
-Microsoft SQL Server database can be bound to the Blazor DataGrid component using **Dapper** in different ways (i.e.) using [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property, [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/custom-binding) feature and remote data binding using various adaptors. In this documentation, two approaches will be examined to connect a Microsoft SQL Server database to a Blazor DataGrid component using **Dapper**. Both the approaches have capability to handle data and CRUD operations with built-in methods as well as can be customized as per your own.
+Data from SQL Server can be integrated into the Blazor DataGrid using multiple approaches:
-**Dapper**
+- Using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property for local binding.
+- [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) for advanced customization of data operations.
+- Remote data binding using adaptors such as [UrlAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/url-adaptor).
-Dapper is an open-source and micro **ORM** (object-relational mapping) product developed by the StackOverflow team. It is very lightweight and straightforward to use with a project. It supports **PostgreSQL**, **MySQL**, **SQL** Server, and other databases.
+This guide demonstrates two approaches for integrating SQL Server data with the Blazor DataGrid using **Dapper**:
-Dapper expands upon the functionality of the [IDbConnection interface](https://learn.microsoft.com/en-us/dotnet/api/system.data.idbconnection?view=net-8.0), which offers a connection to a data source compatible with the .NET Framework. Additionally, Dapper facilitates writing queries. It simplifies the execution of SQL queries on a database and the mapping of results to C# domain classes.
+* **Remote binding via API service using UrlAdaptor**
- Dapper can be used to interact with a Microsoft SQL Server database in conjunction with **System.Data.SqlClient**.
+This approach connects the DataGrid to a REST API endpoint that returns data in the required format. The [UrlAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/url-adaptor) handles communication between the component and the API, enabling server-side operations such as **paging**, **sorting**, and **filtering**.
-* **Using UrlAdaptor**
+* **Custom binding using CustomAdaptor**
-The [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) serves as the base adaptor for facilitating communication between remote data services and an UI component. It enables the remote binding of data to the Blazor DataGrid component by connecting to an existing pre-configured API service linked to the Microsoft SQL Server database. While the Blazor DataGrid component supports various adaptors to fulfill this requirement, including [Web API](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor), [OData](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor), [ODataV4](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor), [Url](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor), and [GraphQL](https://blazor.syncfusion.com/documentation/data/adaptors#graphql-service-binding), the `UrlAdaptor` is particularly useful for the scenarios where a custom API service with unique logic for handling data and CRUD operations is in place. This approach allows for custom handling of data and CRUD operations, and the resultant data returned in the `result` and `count` format for display in the Blazor DataGrid component.
+This approach provides complete control over data operations by implementing a [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) class. It allows overriding methods for reading, updating, inserting, and deleting data, making it suitable for scenarios requiring custom business logic or complex queries.
-* **Using CustomAdaptor**
+This guide demonstrates both approaches for integrating SQL Server data with the Blazor DataGrid using Dapper. Each approach supports built-in and customizable CRUD operations.
-The [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/custom-binding) serves as a mediator between the UI component and the database for data binding. While the data source from the database can be directly bound to the `SfGrid` component locally using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property, the `CustomAdaptor` approach is preferred as it allows for customization of both data operations and CRUD operations according to specific requirements. In this approach, for every action in the Blazor DataGrid component, a corresponding request with action details is sent to the `CustomAdaptor`. The Blazor DataGrid component provides predefined methods to perform data operations such as **searching**, **filtering**, **sorting**, **aggregation**, **paging** and **grouping**. Alternatively, your own custom methods can be employed to execute operations and return the data in the `Result` and `Count` format of the `DataResult` class for displaying in the Blazor DataGrid component. Additionally, for CRUD operations, predefined methods can be overridden to provide custom functionality. Further details on this can be found in the latter part of the documentation.
+## Dapper Overview
+
+Dapper is a lightweight, open-source micro ORM (Object-Relational Mapper) developed by the Stack Overflow team. It extends the functionality of the [IDbConnection interface](https://learn.microsoft.com/en-us/dotnet/api/system.data.idbconnection?view=net-8.0), enabling efficient execution of SQL queries and automatic mapping of query results to objects.
+
+**Key characteristics of Dapper:**
+
+* **Performance-focused**: Provides near raw ADO.NET performance while simplifying data access.
+* **Cross-database support**: Compatible with Microsoft SQL Server, PostgreSQL, MySQL, and other relational databases.
+* **Minimal overhead**: Does not require complex configurations or heavy abstractions.
+
+Dapper simplifies database operations by:
+
+* Executing SQL queries directly against the database.
+* Mapping query results to strongly typed C# models without manual data transformation.
+* Reducing boilerplate code compared to traditional ADO.NET approaches.
+
+When combined with S**ystem.Data.SqlClient**, Dapper offers a streamlined way to interact with SQL Server in Blazor applications.
## Binding data using Dapper from Microsoft SQL Server via an API service.
-This section describes step by step process how to use Dapper to retrieve data from a Microsoft SQL Server using an API service and bind it to the Blazor DataGrid component.
+This section explains how to retrieve data from a Microsoft SQL Server database using **Dapper** and expose it through an ASP.NET Core API service for remote binding in the Syncfusion® Blazor DataGrid component. The API service acts as an intermediary between the database and the DataGrid, enabling server-side operations such as paging, sorting, filtering, and CRUD actions.
### Creating an API service
-**1.** Open Visual Studio and create an ASP.NET Core Web App project type, naming it **MyWebService**. To create an ASP.NET Core Web application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022).
+Follow these steps to create an ASP.NET Core API service that retrieves data from Microsoft SQL Server using Dapper:
+
+**Step 1: Create an ASP.NET Core Web API Project**
+
+In Visual Studio, create a new **ASP.NET Core Web API** project named **MyWebService**.
+
+Refer to [Microsoft documentation](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022) for detailed steps.
+
+**Step 2: Install Required NuGet Packages**
+
+- To enable **Dapper** and **SQL Server** access in the Blazor application, install the following packages:
+
+ - [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.6?_src=template)
+ - [Dapper](https://www.nuget.org/packages/Dapper)
+
+- Use **NuGet Package Manager** in Visual Studio:
+
+*Tools → NuGet Package Manager → Manage NuGet Packages* for Solution, then search and install both packages.
+
+- Alternatively, run these commands in the **Package Manager Console**:
+
+```powershell
+Install-Package System.Data.SqlClient
+Install-Package Dapper
+```
+
+**Step3: Create an API Controller**
-**2.** To use Dapper and access the Microsoft SQL Server database in our Blazor application, need to install the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.6?_src=template) and [Dapper](https://www.nuget.org/packages/Dapper) NuGet packages. To add **System.Data.SqlClient** and Dapper in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it.
+Create a controller named **GridController.cs** under the Controllers folder.
-**3.** Create an API controller (aka, GridController.cs) file under **Controllers** folder that helps to establish data communication with the Blazor DataGrid component.
+**Step 4: Implement Data Retrieval Logic**
-**4** In the API controller (aka, GridController), a connection is established to Microsoft SQL Server within the **Get()** method using **SqlConnection** which implements the **IDbConnection** interface. The SQL query string to retrieve data from the database is prepared. Using Dapper, the query is executed and data is fetched directly into a list of `Order` objects. Dapper automates the mapping process, eliminating the need for manual mapping using **SqlDataAdapter** and **DataTable** as shown in the following code snippet.
+In the controller, establish a connection to SQL Server using **SqlConnection** which implements IDbConnection interfface. Execute the query using **Dapper** and map the results to a strongly typed collection.
{% tabs %}
{% highlight razor tabtitle="GridController.cs"%}
@@ -89,91 +133,81 @@ namespace MyWebService.Controllers
{% endhighlight %}
{% endtabs %}
-**5.** Run the application and it will be hosted within the URL `https://localhost:xxxx`.
+5. **Run and test the application**
-**6.** Finally, the retrieved data from Microsoft SQL Server database using Dapper which is in the form of list of array can be found in an API controller available in the URL link `https://localhost:xxxx/api/Grid`, as shown in the browser page below.
+Start the API and access **https://localhost:xxxx/api/Grid** to view the data.
### Connecting Blazor DataGrid to an API service
-**1.** Create a simple Blazor DataGrid component by following steps. This section briefly explains about how to include [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/).
+After hosting the API service, configure the Blazor DataGrid to consume data from the API endpoint using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component and [UrlAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_UrlAdaptor). This enables remote data binding and supports server-side operations such as **paging**, **sorting**, **filtering**, and **CRUD**.
**Prerequisites**
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-**Create a new Blazor Web App**
-
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+1. **Create a Blazor Web App**
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Create a **Blazor Web App** using Visual Studio 2022. Use [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the Syncfusion® Blazor Extension.
-**Install Syncfusion® Blazor Grid and Themes NuGet in the Blazor Web App**
+> Configure the [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) during project creation.
-To add **Blazor DataGrid** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+2. **Install Syncfusion Packages**
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project.
+* Open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*). Search and install the following packages:
-Alternatively, you can utilize the following package manager command to achieve the same.
+ - [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/)
+ - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+* Alternatively, use the Package Manager Console:
+```powershell
Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+```
-{% endhighlight %}
-{% endtabs %}
+> When using **WebAssembly** or **Auto** render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages within the client project.
-> 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.
+> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages.
-**Register Syncfusion® Blazor Service**
+3. **Register Syncfusion Blazor service**
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace.
+- Add the required namespaces in **~/_Imports.razor**:
```cshtml
-
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids
```
-Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app.
+- For apps using **WebAssembly** or **Auto** (Server and WebAssembly) render modes, register the service in both **~/Program.cs** files.
```cshtml
-
-....
using Syncfusion.Blazor;
-....
-builder.Services.AddSyncfusionBlazor();
-....
+builder.Services.AddSyncfusionBlazor();
```
-**Add stylesheet and script resources**
+4. **Add stylesheet and script resources**
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below:
+Access the theme stylesheet and script from NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the section and the script reference at the end of the in **~/Components/App.razor**:
```html
- ....
-....
+
- ....
```
-> * 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.
-> * In this Blazor Web app, set the `rendermode` as either **InteractiveServer** or **InteractiveAuto** as per your configuration.
+> * Refer to [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for additional methods such as [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).
+> * Set the render mode to **InteractiveServer** or **InteractiveAuto** in the Blazor Web App configuration.
-**2.** Map the hosted API's URL link `https://localhost:xxxx/api/Grid` to the Blazor DataGrid component in **Index.razor** by using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). To interact with remote data source, provide the endpoint `Url`.
+5. **Configure DataGrid with UrlAdaptor**
-**3.** The `SfDataManager` offers multiple adaptor options to connect with remote database based on an API service. Below is an example of the [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) configuration where an API service are set up to return the resulting data in the `result` and `count` format.
-
-**4.** The `UrlAdaptor` acts as the base adaptor for interacting with remote data service. Most of the built-in adaptors are derived from the `UrlAdaptor`.
+The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component supports multiple adaptors for remote data binding. For API services, set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to [Adaptors.UrlAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_UrlAdaptor) and specify the service endpoint in the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property.
{% tabs %}
{% highlight razor tabtitle="Index.razor"%}
@@ -260,16 +294,27 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
> In the above Blazor DataGrid component, [AllowSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSearching), [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting), [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering), [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging), [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) and CRUD-related properties have been enabled. The details on how to handle these actions are explained below.
-When you run the application, the resultant Blazor DataGrid component will look like this
-
-> * The Syncfusion® Blazor DataGrid component provides built-in support for handling various data operations such as **searching**, **sorting**, **filtering**, **aggregate** and **paging** on the server-side. These operations can be handled using methods such as `PerformSearching`, `PerformFiltering`, `PerformSorting`, `PerformAggregation`, `PerformTake` and `PerformSkip` available in the **Syncfusion.Blazor.Data** package. Let's explore how to manage these data operations using the `UrlAdaptor`.
-> * In an API service project, add **Syncfusion.Blazor.Data** by opening the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it.
+### Handling data operations in UrlAdaptor
+
+The Syncfusion® Blazor DataGrid supports server-side operations such as **searching**, **sorting**, **filtering**, **aggregating**, and **paging** when using the [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor).
+
+The [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object provides details for each operation, and these can be applied using built-in methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class:
+
+* [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__) -Applies search criteria to the data source based on search filters.
+* [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_) - Filters the data source using conditions specified in the request.
+* [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__) - Sorts the data source according to one or more sort descriptors.
+* [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Linq_IQueryable___0__System_Int32_) - Retrieves a specified number of records for paging.
+* [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Linq_IQueryable___0__System_Int32_) - Skips a defined number of records before returning results.
+
+These methods enable efficient handling of large datasets by performing operations on the server side. The following sections demonstrate how to manage these operations using the `UrlAdaptor`.
+
+> * To enable these operations, add the **Syncfusion.Blazor.Data** package to the API service project using NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*).
### Handling searching operation
-To handle searching operation, ensure that your API endpoint supports custom searching criteria. Implement the searching logic on the server-side using the [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo searching based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object.
+Enable server-side searching by implementing logic in the API controller with the [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This method applies search criteria to the collection based on filters specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html).
{% highlight razor %}
@@ -292,7 +337,7 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest)
### Handling filtering operation
-To handle filtering operation, ensure that your API endpoint supports custom filtering criteria. Implement the filtering logic on the server-side using the [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering_System_Collections_IEnumerable_System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo filtering based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object.
+Enable server-side filtering by implementing logic in the API controller using the [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This method applies filter conditions to the collection based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html).
{% highlight razor %}
[HttpPost]
@@ -315,7 +360,7 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest)
### Handling sorting operation
-To handle sorting operation, ensure that your API endpoint supports custom sorting criteria. Implement the sorting logic on the server-side using the [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo sorting based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object.
+Enable server-side sorting by implementing logic in the API controller using the [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This method sorts the collection based on one or more sort descriptors specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html).
{% highlight razor %}
[HttpPost]
@@ -337,7 +382,7 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest)
### Handling aggregate operation
-To handle aggregate operation, ensure that your API endpoint supports custom aggregate criteria. Implement the aggregate logic on the server-side using the [PerformAggregation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html#Syncfusion_Blazor_Data_DataUtil_PerformAggregation_System_Collections_IEnumerable_System_Collections_Generic_List_Syncfusion_Blazor_Data_Aggregate__) method from the [DataUtil](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html) class. This allows the custom data source to undergo aggregate based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object.
+Enable server-side aggregation by implementing logic in the API controller using the [PerformAggregation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html#Syncfusion_Blazor_Data_DataUtil_PerformAggregation_System_Collections_IEnumerable_System_Collections_Generic_List_Syncfusion_Blazor_Data_Aggregate__) method from the [DataUtil](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html) class. This method calculates aggregate values such as **Sum**, **Average**, **Min**, and **Max** for the specified fields based on the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html).
{% highlight razor %}
[HttpPost]
@@ -358,11 +403,11 @@ To handle aggregate operation, ensure that your API endpoint supports custom agg
}
{% endhighlight %}
-> The server-side management of the `PerformAggregation` method is necessary only for the [Footer Template](https://blazor.syncfusion.com/documentation/datagrid/footer-aggregate) aggregation. There is no need for explicit handling of the Aggregate operation for the [Group Footer template](https://blazor.syncfusion.com/documentation/datagrid/group-and-caption-aggregate#group-footer-aggregates) and [Group Caption template](https://blazor.syncfusion.com/documentation/datagrid/group-and-caption-aggregate#group-caption-aggregates).
+> The server-side implementation of the `PerformAggregation` method is required only for [Footer aggregates](https://blazor.syncfusion.com/documentation/datagrid/footer-aggregate). Explicit handling is not necessary for[ Group Footer aggregates](https://blazor.syncfusion.com/documentation/datagrid/group-and-caption-aggregate#group-footer-aggregates) or [Group Caption aggregates](https://blazor.syncfusion.com/documentation/datagrid/group-and-caption-aggregate#group-caption-aggregates).
### Handling paging operation
-To handle paging operation, ensure that your API endpoint supports custom paging criteria. Implement the paging logic on the server-side using the [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake_System_Collections_IEnumerable_System_Int32_) and [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Collections_Generic_IEnumerable___0__System_Int32_) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo paging based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object.
+Enable server-side paging by implementing logic in the API controller using the [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Collections_Generic_IEnumerable___0__System_Int32_) and [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Collections_Generic_IEnumerable___0__System_Int32_) methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. These methods apply paging based on the **Skip** and **Take** values provided in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html).
{% highlight razor %}
[HttpPost]
@@ -387,13 +432,21 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest)
}
{% endhighlight %}
-> For optimal performance, it is recommended to follow this sequence of operations(Searching, Filtering, Sorting, Aggregate and Paging) in the [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method.
+N> For optimal performance, apply operations in the following sequence: **Searching → Filtering → Sorting → Aggregation → Paging → Grouping** in [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method.
### Handling CRUD operations
-To enable editing in this Blazor DataGrid component, utilize the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) component. The Blazor DataGrid offers multiple edit modes including the [Inline/Normal](https://blazor.syncfusion.com/documentation/datagrid/in-line-editing), [Dialog](https://blazor.syncfusion.com/documentation/datagrid/dialog-editing), and [Batch](https://blazor.syncfusion.com/documentation/datagrid/batch-editing) editing. For more details, refer to the Blazor DataGrid component [editing](https://blazor.syncfusion.com/documentation/datagrid/editing) documentation.
+The Syncfusion® Blazor DataGrid supports Create, Read, Update, and Delete operations through API endpoints. These operations can be implemented using **Dapper**, which executes parameterized queries and maps data efficiently, reducing boilerplate code and improving maintainability.
+
+These operations are mapped to API endpoints using properties such as:
+
+* [InsertUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_InsertUrl) – API endpoint for inserting new records.
+* [UpdateUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_UpdateUrl) – API endpoint for updating existing records.
+* [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_UpdateUrl) – API endpoint for deleting records.
+* [CrudUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_CrudUrl) – Single endpoint for all CRUD operations.
+* [BatchUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_BatchUrl) – API endpoint for batch editing.
-In this scenario, the inline edit `Mode` and [Toolbar](https://blazor.syncfusion.com/documentation/datagrid/tool-bar) property are configured to display toolbar items for editing purposes.
+To enable editing, configure the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) and [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) properties, and set the Mode property to [EditMode.Normal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#Syncfusion_Blazor_Grids_EditMode_Normal) to allow adding, editing, and deleting records.
{% tabs %}
{% highlight razor %}
@@ -411,12 +464,15 @@ In this scenario, the inline edit `Mode` and [Toolbar](https://blazor.syncfusion
{% endhighlight %}
{% endtabs %}
-> * Normal/Inline editing is the default edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) for the Blazor DataGrid component. To enable CRUD operations, ensure that the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is set to **true** for a specific `GridColumn`, ensuring that its value is unique.
-> * If database has an Autogenerated column, ensure to define [IsIdentity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsIdentity) property of `GridColumn` to disable them during adding or editing operations.
+> * Normal(Inline) editing is the default [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) for the Blazor DataGrid component.
+> * To enable CRUD operations, set the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property to **true** for a column that contains unique values.
+> * If the database includes an auto-generated column, set the [IsIdentity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsIdentity) property for that column to disable editing during **add** or **update** operations.
**Insert Operation:**
-To insert a new row, simply click the **Add** toolbar button. The new record edit form will be displayed as shown below. Upon clicking the **Update** toolbar button, the record will be inserted into the Orders table by calling the following **POST** method of an API. Utilizing `Dapper` simplifies database interaction by providing an easy-to-use interface to execute queries and map results to objects, enhancing code readability and maintainability, as shown in the following code snippet.
+To add a new record, click the **Add** toolbar button in the DataGrid. This displays the inline edit form. After entering the required values, click **Update** to submit the changes. The DataGrid sends a **POST** request to the API endpoint, which inserts the record into the Orders table using **Dapper**.
+
+**Dapper** simplifies database interaction by executing parameterized queries and mapping results directly to objects, improving performance and maintainability.
{% tabs %}
{% highlight c# tabtitle="OrdersController.cs" %}
@@ -446,7 +502,7 @@ public void Insert([FromBody] CRUDModel Value)
**Update Operation:**
-To edit a row, first select desired row and click the **Edit** toolbar button. The edit form will be displayed and proceed to modify any column value as per your requirement. Clicking the **Update** toolbar button will update the edit record in the Orders table by involving the following **Post** method of an API. Utilizing `Dapper` simplifies database interaction by providing an easy-to-use interface to execute queries and map results to objects, enhancing code readability and maintainability, as shown in the following code snippet.
+To modify an existing record, select the row and click the **Edit** toolbar button. Update the required values in the inline edit form and click **Update**. The DataGrid sends a **POST** request to the API endpoint, which updates the record in the Orders table using **Dapper**.
{% tabs %}
{% highlight c# tabtitle="OrdersController.cs" %}
@@ -476,7 +532,7 @@ public void Update([FromBody] CRUDModel Value)
**Delete Operation:**
-To delete a row, simply select the desired row and click the **Delete** toolbar button. This action will trigger a **DELETE** request to an API, containing the primary key value of the selected record. As a result corresponding record will be removed from the Orders table. Utilizing `Dapper` simplifies database interaction by providing an easy-to-use interface to execute queries and map results to objects, enhancing code readability and maintainability, as shown in the following code snippet.
+To remove a record, select the row and click the **Delete** toolbar button. The DataGrid sends a **POST** request to the API endpoint, which deletes the record from the Orders table using **Dapper**.
{% tabs %}
{% highlight c# tabtitle="OrdersController.cs" %}
@@ -507,7 +563,13 @@ public void Delete([FromBody] CRUDModel Value)
**Batch Operation:**
-To perform batch operation, define the edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) as `Batch` and specify the [BatchUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_BatchUrl) property in the `SfDataManager`. Use the **Add** toolbar button to insert new row in batch editing mode. To edit a cell, double-click the desired cell and update the value as required. To delete a record, simply select the record and press the **Delete** toolbar button. Now, all CRUD operations will be executed in batch editing mode. Clicking the **Update** toolbar button will update the newly added, edited, or deleted records from the Orders table using a single API **POST** request. Utilizing `Dapper` simplifies database interaction by providing an easy-to-use interface to execute queries and map results to objects, enhancing code readability and maintainability, as shown in the following code snippet.
+To perform batch editing, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property in [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) to **Batch** and specify the [BatchUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_BatchUrl) property in [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html).
+
+- Use the **Add** toolbar button to insert a new row in batch mode.
+- Double-click a cell to edit its value.
+- Select a record and click **Delete** to remove it.
+
+-All changes (insert, update, delete) are sent to the API in a single **POST** request when the **Update** toolbar button is clicked.
{% highlight razor %}
[HttpPost]
@@ -570,23 +632,34 @@ public void Batch([FromBody] CRUDModel Value)
}
{% endhighlight %}
-When you run the application, the resultant Blazor DataGrid component will look like this
-
-> Find the sample from this [GitHub location](https://github.com/SyncfusionExamples/connecting-databases-to-blazor-datagrid-component/tree/master/Binding%20Dapper%20using%20UrlAdaptor).
+> Find the complete implementation in this [GitHub](https://github.com/SyncfusionExamples/connecting-databases-to-blazor-datagrid-component/tree/master/Binding%20Dapper%20using%20UrlAdaptor) repository.
## Binding data from Microsoft SQL Server using Dapper with CustomAdaptor
-This section describes step by step process how to use Dapper to retrieve data from a Microsoft SQL Server using `CustomAdaptor` and bind it to the Blazor DataGrid component.
+This section explains how to use **Dapper** with a [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) to retrieve data from **Microsoft SQL Server** and bind it to the Syncfusion® Blazor DataGrid component.
+
+**Step 1: Create the Blazor DataGrid Component**
+
+Follow the procedure described in [Connecting Blazor DataGrid to an API service](#connecting-blazor-datagrid-to-an-api-service).
-**1.** To create a simple Blazor DataGrid component, the procedure is explained in the above-mentioned topic on [Connecting Blazor DataGrid to an API service](#connecting-blazor-datagrid-to-an-api-service)
+> * Set the rendermode to **InteractiveServer** or **InteractiveAuto** based on application configuration.
-> * In this Blazor Web app, set the `rendermode` as either **InteractiveServer** or **InteractiveAuto** as per your configuration.
+**Step 2: Install MySql NuGet Package**
-**2.** To use `Dapper` and access the Microsoft SQL Server database in our Blazor application, we need to install the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.6?_src=template) and [Dapper](https://www.nuget.org/packages/Dapper) NuGet packages. To add **System.Data.SqlClient** and `Dapper` in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it.
+Add the following packages to the Blazor application:
-**3.** If you intend to inject your own service into the `CustomAdaptor` and utilize it, you can achieve this as follows.
+- [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.6?_src=template)
+- [Dapper](https://www.nuget.org/packages/Dapper)
+
+Use **NuGet Package Manager** in Visual Studio:
+
+*Tools → NuGet Package Manager → Manage NuGet Packages* for Solution, then search and install both packages.
+
+**Step 3: Configure the DataGrid with CustomAdaptor**
+
+Inject a custom service into the `CustomAdaptor` and configure the component as shown below:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -655,11 +728,14 @@ This section describes step by step process how to use Dapper to retrieve data f
{% endhighlight %}
{% endtabs %}
-**4.** Within the `CustomAdaptor` [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method, fetch the data from the service by calling the `GetOrdersAsync` method.
+**Step 4: Implement Data Retrieval Logic**
-* In this `GetOrdersAsync` method, a connection is established to Microsoft SQL Server using **SqlConnection** which implements the **IDbConnection** interface. The SQL query string to retrieve data from the database is prepared. Using Dapper, the query is executed and data is fetched directly into a list of `Order` objects. Dapper automates the mapping process, eliminating the need for manual mapping using **SqlDataAdapter** and **DataTable**
+Implement the [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method in `CustomAdaptor` to retrieve data from the database using **Dapper**.
-* Finally, return the response as a `Result` and `Count` pair object in the `ReadAsync` method to bind the data to the Blazor DataGrid component.
+- Establish a connection to Microsoft SQL Server using **SqlConnection**, which implements the [IDbConnection interface](https://learn.microsoft.com/en-us/dotnet/api/system.data.idbconnection?view=net-9.0).
+- Prepare the SQL query string to fetch records from the database.
+- Execute the query using **Dapper** and map the results directly to a strongly typed collection of Order objects.
+- Return the response as a **Result** and **Count** pair in a [DataResult](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataResult-1.html) object within the `ReadAsync` method for binding to the Blazor DataGrid.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -759,15 +835,42 @@ public class OrderData
> * The `DataManagerRequest` encompasses details about the Blazor DataGrid component actions such as searching, filtering, sorting, aggregate, paging and grouping.
> * In the above Blazor DataGrid, [AllowSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSearching), [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting), [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering), [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging), [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) and CRUD-related properties have been enabled. The details on how to handle these actions are explained below.
-When the application is executed, the Blazor DataGrid component will appear as depicted below.
-
+### Handling data operations in a Custom Adaptor
+
+The Syncfusion® Blazor DataGrid supports server-side operations such as **searching**, **filtering**, **sorting**, **paging**, and **aggregating** when using a `CustomAdaptor`. These operations are implemented by overriding the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class.
+
+The [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object provides the necessary details for each operation, and these can be applied using built-in methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) and [DataUtil](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html) classes:
+
+* [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__) – Applies search criteria to the data source based on search filters.
+
+* [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_) – Filters the data source using conditions specified in the request.
+
+* [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SortedColumn__) – Sorts the data source according to one or more sort descriptors.
+
+* [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Collections_Generic_IEnumerable___0__System_Int32_) – Retrieves a specified number of records for paging.
+
+* [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Collections_Generic_IEnumerable___0__System_Int32_) – Skips a defined number of records before returning results.
+
+* [PerformAggregation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html#Syncfusion_Blazor_Data_DataUtil_PerformAggregation_System_Collections_IEnumerable_System_Collections_Generic_List_Syncfusion_Blazor_Data_Aggregate__) – Applies aggregate details to calculate summary values such as Sum, Average, Min, and Max.
+
+When using **Dapper**, data retrieval is performed by executing parameterized SQL queries and mapping results directly to strongly typed objects. The ReadAsync method typically includes:
+
+- Establishing a connection using **SqlConnection** (implements IDbConnection).
+- Executing the query with **connection.QueryAsync()** to fetch data.
+- Applying operations such as searching, filtering, sorting, paging, and aggregation using the above methods.
+- Returning the response as a `DataResult` object containing **Result** and **Count** for binding to the DataGrid.
+
+N> To enable these operations, install the **Syncfusion.Blazor.Data** package using NuGet Package Manager in Visual Studio:
+
+(*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*).
+
### Handling searching operation
-When utilizing the `CustomAdaptor`, managing the searching operation involves overriding the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class.
+When using `CustomAdaptor`, the searching operation is implemented by overriding the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class.
-In the code example below, searching a custom data source can be accomplished by employing the built-in [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching_System_Collections_IEnumerable_System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__) method of the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. Alternatively, you can implement your own method for searching operation and bind the resultant data to the Blazor DataGrid component.
+The built-in [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__) method of the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class applies search criteria from the [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) to the data source. Custom logic can also be implemented to handle searching as required.
{% highlight razor %}
public class CustomAdaptor : DataAdaptor
@@ -793,9 +896,9 @@ public class CustomAdaptor : DataAdaptor
### Handling filtering operation
-When employing the `CustomAdaptor`, handling the filtering operation involves overriding the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class.
+When implementing `CustomAdaptor`, the filtering operation is managed by overriding the[Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class.
-In the code example below, filtering a custom data source can be achieved by utilizing the built-in [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_) method of the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. Alternatively, you can implement your own method for filtering operation and bind the resulting data to the Blazor DataGrid component.
+The built-in [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_) method in the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class applies filter criteria from the [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) to the data collection. Custom filtering logic can also be implemented to meet specific requirements.
{% highlight razor %}
public class CustomAdaptor : DataAdaptor
@@ -821,9 +924,9 @@ public class CustomAdaptor : DataAdaptor
### Handling sorting operation
-When utilizing the `CustomAdaptor`, managing the sorting operation involves overriding the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class.
+When implementing `CustomAdaptor`, the sorting operation is handled by overriding the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class.
-In the code example below, sorting a custom data source can be accomplished by employing the built-in [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__) method of the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. Alternatively, you can implement your own method for sorting operation and bind the resulting data to the Blazor DataGrid component.
+The built-in [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__) method in the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class applies sort criteria from the [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) to the data collection. Custom sorting logic can also be implemented to meet specific requirements.
{% highlight razor %}
public class CustomAdaptor : DataAdaptor
@@ -849,7 +952,9 @@ public class CustomAdaptor : DataAdaptor
### Handling aggregate operation
-When employing `CustomAdaptor`, the aggregate operation must be managed within the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the `CustomAdaptor`.
+When implementing `CustomAdaptor`, aggregate operations are managed by overriding the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor-1.html) abstract class.
+
+The built-in [PerformAggregation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html#Syncfusion_Blazor_Data_DataUtil_PerformAggregation_System_Collections_IEnumerable_System_Collections_Generic_List_Syncfusion_Blazor_Data_Aggregate__) method in the [DataUtil](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html) class calculates aggregate values based on the criteria specified in the [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html). Custom aggregation logic can also be implemented when specific requirements exist.
The provided sample code illustrated how to implement the aggregate operation within `CustomAdaptor`,
@@ -875,13 +980,13 @@ public class CustomAdaptor : DataAdaptor
}
{% endhighlight %}
-> The server-side management of the `PerformAggregation` method is necessary only for the [Footer Template](https://blazor.syncfusion.com/documentation/datagrid/footer-aggregate) aggregation. There is no need for explicit handling of the Aggregate operation for the [Group Footer template](https://blazor.syncfusion.com/documentation/datagrid/group-and-caption-aggregate#group-footer-aggregates) and [Group Caption template](https://blazor.syncfusion.com/documentation/datagrid/group-and-caption-aggregate#group-caption-aggregates).
+> The server-side implementation of the `PerformAggregation` method is required only for [Footer aggregates](https://blazor.syncfusion.com/documentation/datagrid/footer-aggregate). Explicit handling is not necessary for[ Group Footer aggregates](https://blazor.syncfusion.com/documentation/datagrid/group-and-caption-aggregate#group-footer-aggregates) or [Group Caption aggregates](https://blazor.syncfusion.com/documentation/datagrid/group-and-caption-aggregate#group-caption-aggregates).
### Handling paging operation
-When employing the `CustomAdaptor`, handling paging operation involves overriding the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class.
+When implementing `CustomAdaptor`, paging is managed by overriding the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class.
-In the code example below, paging a custom data source can be achieved by utilizing the built-in [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake_System_Collections_IEnumerable_System_Int32_) and [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Collections_Generic_IEnumerable___0__System_Int32_) method of the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. Alternatively, you can use your own method for paging operation and bind the resulting data to the Blazor DataGrid component.
+The built-in [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Collections_Generic_IEnumerable___0__System_Int32_) and [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Collections_Generic_IEnumerable___0__System_Int32_) methods in the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class apply paging criteria from the [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) to the data collection. Custom paging logic can also be implemented when specific requirements exist.
{% highlight razor %}
public class CustomAdaptor : DataAdaptor
@@ -912,9 +1017,9 @@ public class CustomAdaptor : DataAdaptor
### Handling grouping operation
-When employing `CustomAdaptor`, the grouping operation must be managed within the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the `CustomAdaptor`.
+When implementing `CustomAdaptor`, grouping is managed by overriding the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class.
-In the code example below, grouping a custom data source can be achieved by utilizing the [Group](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html#Syncfusion_Blazor_Data_DataUtil_Group__1_System_Collections_IEnumerable_System_String_System_Collections_Generic_List_Syncfusion_Blazor_Data_Aggregate__System_Int32_System_Collections_Generic_IDictionary_System_String_System_String__System_Boolean_System_Boolean_) method from the [DataUtil](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html) class. Alternatively, you can use your own method for grouping operation and bind the resulting data to the Blazor DataGrid component.
+The built-in [Group](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html#Syncfusion_Blazor_Data_DataUtil_Group__1_System_Collections_IEnumerable_System_String_System_Collections_Generic_List_Syncfusion_Blazor_Data_Aggregate__System_Int32_System_Collections_Generic_IDictionary_System_String_System_String__System_Boolean_System_Boolean_) method in the [DataUtil](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataUtil.html) class applies grouping logic based on the configuration in the [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html). Custom grouping logic can also be implemented when specific requirements exist.
{% highlight razor %}
public class CustomAdaptor : DataAdaptor
@@ -946,8 +1051,7 @@ public class CustomAdaptor : DataAdaptor
}
{% endhighlight %}
-> * For optimal performance, it is recommended to follow this sequence of operations(Searching, Filtering, Sorting, Aggregate, Paging and Grouping) in the `ReadAsync` method.
-> * If both grouping and aggregate operations are enabled, the code provided below demonstrates how to implement these operations within the `CustomAdaptor`.
+N> For optimal performance, apply operations in the following sequence: **Searching → Filtering → Sorting → Aggregation → Paging → Grouping** in [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) method.
```cshtml
public class CustomAdaptor : DataAdaptor
@@ -990,9 +1094,16 @@ public class CustomAdaptor : DataAdaptor
### Handling CRUD operations
-To enable editing in the Blazor DataGrid component, utilize the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) component. The Blazor DataGrid component offers multiple edit modes including the Inline/Normal, Dialog and Batch editing. For more details, refer to the Blazor DataGrid component [editing](https://blazor.syncfusion.com/documentation/datagrid/editing) documentation.
+The Syncfusion® Blazor DataGrid component supports Create, Read, Update, and Delete (CRUD) operations through the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) configuration. Multiple edit modes are available, including **Inline**, **Dialog**, and **Batch** editing. For details, refer to the [Editing](https://blazor.syncfusion.com/documentation/datagrid/editing) documentation.
+
+When using `CustomAdaptor`, CRUD operations are implemented by overriding the following methods of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor-1.html) class:
-In this scenario, the inline edit `Mode` and [Toolbar](https://blazor.syncfusion.com/documentation/datagrid/tool-bar) property configured to display toolbar items for editing purpose.
+* [Insert](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Insert_Syncfusion_Blazor_DataManager_System_Object_System_String_) / [InsertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_InsertAsync_Syncfusion_Blazor_DataManager_System_Object_System_String_) – Handles record insertion.
+* [Update](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Update_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) / [UpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_UpdateAsync_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) – Handles record updates.
+* [Remove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Remove_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) / [RemoveAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_RemoveAsync_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) – Handles record deletion.
+* [BatchUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_BatchUpdate_Syncfusion_Blazor_DataManager_System_Object_System_Object_System_Object_System_String_System_String_System_Nullable_System_Int32__) / [BatchUpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_BatchUpdateAsync_Syncfusion_Blazor_DataManager_System_Object_System_Object_System_Object_System_String_System_String_System_Nullable_System_Int32__) – Handles batch operations (insert, update, delete).
+
+Each method can be customized to execute SQL commands against the Microsoft SQL Server database using **Dapper**, which simplifies database interaction by providing an easy-to-use interface for executing queries and mapping results to objects.
{% highlight razor %}
@@ -1008,21 +1119,13 @@ In this scenario, the inline edit `Mode` and [Toolbar](https://blazor.syncfusion
{% endhighlight %}
-> * Normal/Inline editing is the default edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) for the Blazor DataGrid component. To enable CRUD operations, ensure that the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is set to **true** for a specific `GridColumn`, ensuring that its value is unique.
-> * If database has an Autogenerated column, ensure to define [IsIdentity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsIdentity) property of `GridColumn` to disable them during adding or editing operations.
-
-The CRUD operations can be performed and customized on our own by overriding the following CRUD methods of the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class.
-
-* Insert/InsertAsync
-* Remove/RemoveAsync
-* Update/UpdateAsync
-* BatchUpdate/BatchUpdateAsync
-
-Let's see how to perform CRUD operations using `Dapper` in Microsoft SQL Server data with the Syncfusion® Blazor DataGrid component.
+> * Normal(Inline) editing is the default [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) for the Blazor DataGrid component.
+> * To enable CRUD operations, set the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property to **true** for a column that contains unique values.
+> * If the database includes an auto-generated column, set the [IsIdentity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsIdentity) property for that column to disable editing during **add** or **update** operations.
**Insert Operation:**
-To execute the insert operation, you will need to override the [Insert](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Insert_Syncfusion_Blazor_DataManager_System_Object_System_String_) or [InsertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_InsertAsync_Syncfusion_Blazor_DataManager_System_Object_System_String_) method of the `CustomAdaptor`. Then, integrate the following code snippet into the `CustomAdaptor` class. The below code snippet demonstrated how to handle the insertion of new records within the `InsertAsync` method of `CustomAdaptor` component. Modify the logic within this method according to the requirements of your application. Utilizing `Dapper` simplifies database interaction by providing an easy-to-use interface to execute queries and map results to objects, enhancing code readability and maintainability, as shown in the following code snippet.
+To enable insertion in a Blazor DataGrid using a custom data binding approach, override the [Insert](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Insert_Syncfusion_Blazor_DataManager_System_Object_System_String_) or [InsertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_InsertAsync_Syncfusion_Blazor_DataManager_System_Object_System_String_) method of the `CustomAdaptor` class. This method is invoked when a new record is added to the grid.
{% tabs %}
{% highlight razor tabtitle="Index.razor"%}
@@ -1058,7 +1161,7 @@ public async Task AddOrderAsync(Order Value)
**Update Operation:**
-To execute the update operation, override the [Update](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Update_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) or [UpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_UpdateAsync_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) method of the `CustomAdaptor`. Then, integrate the following code snippet into the `CustomAdaptor` class. The below code snippet demonstrated how to handle the updating of existing records within the `UpdateAsync` method of the `CustomAdaptor` component. Modify the logic within this method according to the requirements of your application. Utilizing `Dapper` simplifies database interaction by providing an easy-to-use interface to execute queries and map results to objects, enhancing code readability and maintainability, as shown in the following code snippet.
+To enable record updates in a Blazor DataGrid using a custom data binding approach, override the [Update](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Update_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) or [UpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_UpdateAsync_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) method of the `CustomAdaptor` class. This method is triggered when an existing record is modified in the grid.
{% tabs %}
{% highlight razor tabtitle="Index.razor"%}
@@ -1095,7 +1198,7 @@ public async Task UpdateOrderAsync(Order Value)
**Delete Operation:**
-To perform the delete operation, you need to override the [Remove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Remove_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) or [RemoveAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_RemoveAsync_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) method of the `CustomAdaptor`. Below is the code snippet that you can add to `CustomAdaptor` class. The below code snippet demonstrated how to handle the deletion of existing records within the `RemoveAsync` method of `CustomAdaptor` component. Modify the logic within this method according to the requirements of your application. Utilizing `Dapper` simplifies database interaction by providing an easy-to-use interface to execute queries and map results to objects, enhancing code readability and maintainability, as shown in the following code snippet.
+To enable deletion in a Blazor DataGrid using a custom data binding approach, override the [Remove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_Remove_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) or [RemoveAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_RemoveAsync_Syncfusion_Blazor_DataManager_System_Object_System_String_System_String_) method of the `CustomAdaptor` class. This method is invoked when a record is removed from the grid.
{% tabs %}
{% highlight razor tabtitle="Index.razor"%}
@@ -1132,7 +1235,7 @@ public async Task RemoveOrderAsync(int? Key)
**Batch Operation:**
-To perform the batch operation, override the [BatchUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_BatchUpdate_Syncfusion_Blazor_DataManager_System_Object_System_Object_System_Object_System_String_System_String_System_Nullable_System_Int32__) or [BatchUpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_BatchUpdateAsync_Syncfusion_Blazor_DataManager_System_Object_System_Object_System_Object_System_String_System_String_System_Nullable_System_Int32__) method of the `CustomAdaptor` and add the following code in the `CustomAdaptor`. The below code snippet demonstrated how to handle the batch update request within the `BatchUpdateAsync` method of `CustomAdaptor` component. Modify the logic within this method according to the requirements of your application.
+To enable batch editing in a Blazor DataGrid using a custom data binding approach, override the [BatchUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_BatchUpdate_Syncfusion_Blazor_DataManager_System_Object_System_Object_System_Object_System_String_System_String_System_Nullable_System_Int32__) or [BatchUpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html#Syncfusion_Blazor_DataAdaptor_BatchUpdateAsync_Syncfusion_Blazor_DataManager_System_Object_System_Object_System_Object_System_String_System_String_System_Nullable_System_Int32__) method of the `CustomAdaptor` class. This method is invoked when multiple records are added, updated, or deleted in batch mode.
{% highlight razor %}
///
@@ -1175,4 +1278,4 @@ public override async Task
+
-
- Add Range of Items
+ Add Range of Items
-| Department | +Details | +||||||
|---|---|---|---|---|---|---|---|
| Sales | +
+
|
+ ||||||
| Marketing | +Campaign planning in progress | +
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) @@ -23,17 +23,17 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.  ## Install Blazor DataGrid and Themes NuGet in the Blazor Web App -To add **Syncfusion® Blazor DataGrid** in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Syncfusion® Blazor DataGrid** in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -46,7 +46,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -58,9 +58,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -76,7 +76,7 @@ cd BlazorWebApp.Client ## Install Blazor DataGrid and Themes NuGet in the app -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -94,7 +94,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -130,13 +130,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. ## Install Syncfusion® Blazor Grid and Themes NuGet in the App Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -148,7 +148,7 @@ 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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -156,7 +156,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -171,7 +171,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -277,7 +277,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-component.png)" %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Grid in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Grid component in the default web browser. ## Defining row data diff --git a/blazor/datepicker/getting-started-with-web-app.md b/blazor/datepicker/getting-started-with-web-app.md index baaaddd40e..000dca4d97 100644 --- a/blazor/datepicker/getting-started-with-web-app.md +++ b/blazor/datepicker/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DatePicker Component in Web App -This section explains how to include the [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,15 +21,15 @@ This section explains how to include the [Blazor DatePicker](https://www.syncfus ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App -To add the **Blazor DatePicker** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DatePicker** component in the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor packages in the client project of the Blazor Web App. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, use the following Package Manager commands: @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on NuGet. For the full package list and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, for a Blazor Web App with the `Auto` interactive render mode, use the following commands: @@ -70,11 +70,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For details on creating a **Blazor Web App** with various interactive modes and locations, refer to the [render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes) topic. - ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If using `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor component NuGet packages in the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the command is run in the project directory that contains the `.csproj` file. @@ -92,20 +90,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on NuGet. For the full package list and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. + +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. | -| Server | Open **~/_Imports.razor** in the `Components` folder. | +Here's an example of how to add the **Blazor DatePicker** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Calendars --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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +163,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (server and client) of the Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,29 +201,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion® Blazor service only in that file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - -N> A valid Syncfusion license is required. For details on generating and registering a license, refer to the [License key registration](https://blazor.syncfusion.com/documentation/common/essential-studio/licensing/overview) documentation. - ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -195,16 +221,15 @@ N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/th ## Add Syncfusion® Blazor DatePicker component -Add the Syncfusion® Blazor DatePicker component in a `.razor` file inside the `Pages` folder. If the interactivity location is set to `Per page/component`, define a render mode at the top of the component as follows: +Add the Syncfusion® Blazor DatePicker component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} diff --git a/blazor/daterangepicker/getting-started-with-web-app.md b/blazor/daterangepicker/getting-started-with-web-app.md index 0c6449b4f4..6b5b32afc4 100644 --- a/blazor/daterangepicker/getting-started-with-web-app.md +++ b/blazor/daterangepicker/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DateRangePicker Component in Web App -This section briefly explains about how to include [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,15 +21,15 @@ This section briefly explains about how to include [Blazor DateRangePicker](http ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App -To add **Blazor DateRangePicker** 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.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DateRangePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,11 +70,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -92,20 +90,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Here's an example of how to add the **Blazor DateRangePicker** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Calendars --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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +163,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,27 +201,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -193,16 +221,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DateRangePicker component -Add the Syncfusion® Blazor DateRangePicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor DateRangePicker component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,7 +248,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateRangePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateRangePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rDhTZCBOqWgwMmva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateRangePicker Component](./images/blazor-daterangepicker-component.png)" %} diff --git a/blazor/datetime-picker/getting-started-with-web-app.md b/blazor/datetime-picker/getting-started-with-web-app.md index f492904f7b..94a8027455 100644 --- a/blazor/datetime-picker/getting-started-with-web-app.md +++ b/blazor/datetime-picker/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DateTimePicker Component in Web App -This section briefly explains about how to include [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,15 +21,15 @@ This section briefly explains about how to include [Blazor DateTimePicker](https ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the Blazor Web App -To add **Blazor DateTimePicker** 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.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DateTimePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,11 +70,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -92,20 +90,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Here's an example of how to add the **Blazor DateTimePicker** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Calendars --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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +163,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,27 +201,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -193,16 +221,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor DateTimePicker component -Add the Syncfusion® Blazor DateTimePicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor DateTimePicker component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,7 +248,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateTimePicker component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DateTimePicker component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLzDsBOKWcNOSex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateTimePicker Component](./images/blazor-datetimepicker-component.png)" %} diff --git a/blazor/diagram/getting-started-with-web-app.md b/blazor/diagram/getting-started-with-web-app.md index 5b6b1f4d09..bf1ae5e49b 100644 --- a/blazor/diagram/getting-started-with-web-app.md +++ b/blazor/diagram/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Diagram Component in Web App -This section briefly explains how to include the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code, and the .NET CLI. +This section briefly explains how to include the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) @@ -23,17 +23,17 @@ This section briefly explains how to include the [Blazor Diagram](https://www.sy ## Step 1: How to Create a New Blazor Web App -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.  ## Step 2: How to Install Syncfusion® Blazor Diagram and Themes NuGet Packages in the Blazor Web App -To add the **Blazor Diagram** 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.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Diagram** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If using the `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, use the following package manager command to achieve the same. @@ -46,7 +46,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. ## Step 3: Add Import Namespaces @@ -65,7 +65,7 @@ Open the **~/_Imports.razor** file in the client project and import the `Syncfus Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -If the Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -158,9 +158,9 @@ N> If the **Interactivity Location** is set to `Global` and the **Render Mode** ## Step 1: How to Create a New Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate interactive render mode and interactivity location when setting up the Blazor Web Application. For more information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, for a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -176,7 +176,7 @@ cd BlazorWebApp.Client ## Step 2: How to Install Syncfusion® Blazor Diagram and Themes NuGet Packages in the App -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the current directory is the project root directory where your `.csproj` file is located. @@ -213,7 +213,7 @@ Open the **~/_Imports.razor** file in the client project and import the `Syncfus Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -If the Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -330,13 +330,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates a new Blazor Web app project and places it in a new directory called `BlazorApp` inside the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. ## Step 2: Install Syncfusion® Blazor Diagram and Themes NuGet in the App Here's an example of how to add **Blazor Diagram** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. -If using the `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -348,7 +348,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. ## Step 3: Add Import Namespaces @@ -367,7 +367,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -If the Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} diff --git a/blazor/dialog/getting-started-with-web-app.md b/blazor/dialog/getting-started-with-web-app.md index 28e78564c2..35a6487fcc 100644 --- a/blazor/dialog/getting-started-with-web-app.md +++ b/blazor/dialog/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Dialog Component in Web App -This section briefly explains about how to include [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,15 +21,15 @@ This section briefly explains about how to include [Blazor Dialog](https://www.s ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ## Install Syncfusion® Blazor Popups and Themes NuGet in the Blazor Web App -To add **Blazor Dialog** 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.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Dialog** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,11 +70,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Popups and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -92,20 +90,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Popups and Themes NuGet in the App -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. +Here's an example of how to add the **Blazor Dialog** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Popups --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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +163,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,27 +201,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -193,16 +221,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Dialog component -Add the Syncfusion® Blazor Dialog component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor Dialog component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -225,7 +252,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dialog component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dialog component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BDhTjVLBVzsCojDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog](./images/blazor-dialog.png)" %} diff --git a/blazor/drop-down-menu/getting-started-with-web-app.md b/blazor/drop-down-menu/getting-started-with-web-app.md index 9880938a5a..e5abaf6992 100644 --- a/blazor/drop-down-menu/getting-started-with-web-app.md +++ b/blazor/drop-down-menu/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Dropdown Menu Component in Web App -This section briefly explains about how to include [Blazor DropDown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include [Blazor DropDown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,15 +21,15 @@ This section briefly explains about how to include [Blazor DropDown Menu](https: ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the Blazor Web App -To add **Blazor DropDown Menu** 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.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DropDown Menu** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,11 +70,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -92,20 +90,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. +Here's an example of how to add the **Blazor DropDown Menu** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.SplitButtons --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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} + +## Add Import Namespaces + +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +163,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,27 +201,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); -.... - -{% endhighlight %} -{% endtabs %} - ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: @@ -193,16 +221,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Dropdown Menu component -Add the Syncfusion® Blazor DropDown Menu component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor DropDown Menu component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | | Per page/component | Auto | @rendermode InteractiveAuto | | | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -227,7 +254,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dropdown Menu component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Dropdown Menu component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTjshOAyMLHrtb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownMenu Component](./images/blazor-dropdownmenu-component.png)" %} diff --git a/blazor/dropdown-list/getting-started-with-web-app.md b/blazor/dropdown-list/getting-started-with-web-app.md index d49045c12d..11d925e52a 100644 --- a/blazor/dropdown-list/getting-started-with-web-app.md +++ b/blazor/dropdown-list/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DropDown List Component in Web App -This section briefly explains about how to include [Blazor DropDown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI. +This section briefly explains about how to include [Blazor DropDown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor DropDown List](https: ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.  ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the Blazor Web App -To add **Blazor DropDown List** 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.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DropDown List** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -44,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -56,9 +56,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -74,7 +74,7 @@ cd BlazorWebApp.Client ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -128,13 +128,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. ## Install Syncfusion® Blazor DropDowns and Themes NuGet in the App Here's an example of how to add **Blazor DropDown List** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -146,7 +146,7 @@ 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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -169,7 +169,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -253,7 +253,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DropDown List component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DropDown List component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.png)" %} diff --git a/blazor/predefined-dialogs/getting-started-webapp.md b/blazor/predefined-dialogs/getting-started-webapp.md index f92710af87..9dbb891573 100644 --- a/blazor/predefined-dialogs/getting-started-webapp.md +++ b/blazor/predefined-dialogs/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Predefined Dialogs in Blazor Web App -This section briefly explains about how to include `Blazor Predefined Dialogs` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains about how to include `Blazor Predefined Dialogs` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,15 +21,15 @@ This section briefly explains about how to include `Blazor Predefined Dialogs` c ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. ## Install Syncfusion® Blazor Popups and Themes NuGet in the App -To add **Blazor predefined dialog** 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.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor predefined dialog** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,11 +70,9 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). - ## Install Syncfusion® Blazor Popups and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -92,20 +90,69 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. {% endtabcontent %} -{% endtabcontents %} +{% tabcontent .NET CLI %} -## Register Syncfusion® Blazor Service +## Prerequisites + +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. + +{% tabs %} +{% highlight c# tabtitle="Blazor Web App" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. + +## Install Syncfusion® Blazor Popups and Themes NuGet in the App + +Here's an example of how to add the **Blazor Predefined Dialog** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. + +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet add package Syncfusion.Blazor.Popups --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 the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. + +{% endtabcontent %} + +{% endtabcontents %} -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +## Add Import Namespaces -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +163,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -154,28 +203,6 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} - -... -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorComponents() - .AddInteractiveServerComponents(); -builder.Services.AddScoped
2. StringLengthAttribute
3. RangeAttribute
4. RegularExpressionAttribute
5. MinLengthAttribute
6. MaxLengthAttribute
7. EmailAddressAttribute
8. CompareAttribute
9. DataTypeAttribute
10. DataType.Custom
11. DataType.Date
12. DataType.DateTime
13. DataType.EmailAddress
14. DataType.ImageUrl
15. DataType.Url | These data annotation validation attributes are used as `validation rules` in DataGrid CRUD operations. | +| 1. RequiredAttribute
2. StringLengthAttribute
3. RangeAttribute
4. RegularExpressionAttribute
5. MinLengthAttribute
6. MaxLengthAttribute
7. EmailAddressAttribute
8. CompareAttribute
9. DataTypeAttribute
10. DataType.Custom
11. DataType.Date
12. DataType.DateTime
13. DataType.EmailAddress
14. DataType.ImageUrl
15. DataType.Url | These data annotation attributes are used as `validation rules` in DataGrid CRUD operations. | For more information on data annotation, refer to this [documentation](https://blazor.syncfusion.com/documentation/datagrid/data-annotation) section. ## Custom validation -Custom validation allows users to define their own validation logic based on specific requirements. +Custom validation enables the definition of validation logic tailored to specific application requirements. -To implement custom validation, create a class that inherits from the `ValidationAttribute` class and override the `IsValid` method. All custom validation logic should be placed inside the `IsValid` method. +To implement custom validation, create a class that inherits from the `ValidationAttribute` class and override the `IsValid` method. All custom validation logic should be placed within the `IsValid` method. -The following sample code demonstrates how to implement custom validation for the **EmployeeID** and **Freight** fields. +The following example demonstrates how to implement custom validation for the **EmployeeID** and **Freight** fields: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -223,9 +223,9 @@ public class CustomValidationFreight : ValidationAttribute ### Validate complex column using data annotation attribute -You can validate complex data binding columns by using the [ValidateComplexType](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-5.0#data-annotations-validator-component-and-custom-validation) attribute from data annotations. +Complex data binding columns can be validated using the [ValidateComplexType](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-5.0#data-annotations-validator-component-and-custom-validation) attribute from data annotations. -In the following sample, the `ValidateComplexType` attribute is applied to the `EmployeeName` class to enable validation of its properties. A custom validation message is displayed in the "First Name" column by using the `RequiredAttribute` with a custom error message. +In the following example, the `ValidateComplexType` attribute is applied to the **EmployeeName** class to enable validation of its properties. A custom validation message is displayed in the **First Name** column using the `RequiredAttribute` with a custom error message. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -296,22 +296,27 @@ public class EmployeeInfo {% endhighlight %} {% endtabs %} -> Ensure to include the package **Microsoft.AspNetCore.Components.DataAnnotations.Validation** for complex type validation using the following reference: -`