diff --git a/blazor/data/custom-binding.md b/blazor/data/custom-binding.md index eed7f3fc31..dd4d0f712f 100644 --- a/blazor/data/custom-binding.md +++ b/blazor/data/custom-binding.md @@ -1,7 +1,7 @@ --- layout: post -title: Custom Binding in Blazor DataManager Component | Syncfusion -description: Checkout and learn here all about Custom Binding in Syncfusion Blazor DataManager component and more. +title: Custom Binding in Blazor DataManager | Syncfusion +description: Learn how to implement custom binding in Syncfusion Blazor DataManager for flexible data operations and CRUD integration with DataGrid. platform: Blazor control: DataManager documentation: ug @@ -11,213 +11,258 @@ documentation: ug # Custom Binding in Blazor DataManager Component -The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows you to perform manual operations on the data. This is demonstrated below by implementing custom data binding and editing operations in the DataGrid component. +Custom binding in the Syncfusion® Blazor [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.htm) component provides a mechanism to implement custom logic for data retrieval and manipulation. It allows defining how data operations are executed by creating a [custom adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_CustomAdaptor) that overrides default behavior. -For implementing custom data binding in DataGrid, the **DataAdaptor** class is used. This abstract class acts as a base class for the custom adaptor. +Custom binding is applicable in scenarios where: -The **DataAdaptor** abstract class has both synchronous and asynchronous method signatures which can be overridden in the custom adaptor. Following are the method signatures present in this class, +* Data originates from sources that do not conform to standard adaptors, such as **REST APIs** or **in-memory collections**. +* Complete control over data operations is required, including applying custom business rules during **CRUD** operations. +* Built-in adaptors do not meet requirements for data transformation or filtering. + +The [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) class is an abstract base that defines the interaction between the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component and an external data source. A custom adaptor derived from this class can override its virtual members to implement custom **data retrieval** and **CRUD** operations. These members include both synchronous and asynchronous methods such as **Read**, **Insert**, **Update**, **Remove**, and **BatchUpdate**, providing complete flexibility for integrating any data source while maintaining compatibility with Blazor [DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) and other bound controls. ```csharp public abstract class DataAdaptor { /// - /// Performs data Read operation synchronously. + /// Performs data read operation synchronously. /// public virtual object Read(DataManagerRequest dataManagerRequest, string key = null) /// - /// Performs data Read operation asynchronously. + /// Performs data read operation asynchronously. /// public virtual Task ReadAsync(DataManagerRequest dataManagerRequest, string key = null) /// - /// Performs Insert operation synchronously. + /// Performs insert operation synchronously. /// public virtual object Insert(DataManager dataManager, object data, string key) /// - /// Performs Insert operation asynchronously. + /// Performs insert operation asynchronously. /// public virtual Task InsertAsync(DataManager dataManager, object data, string key) /// - /// Performs Remove operation synchronously. + /// Performs remove operation synchronously. /// public virtual object Remove(DataManager dataManager, object data, string keyField, string key) /// - /// Performs Remove operation asynchronously. + /// Performs remove operation asynchronously. /// public virtual Task RemoveAsync(DataManager dataManager, object data, string keyField, string key) /// - /// Performs Update operation synchronously. + /// Performs update operation synchronously. /// - public virtual object Update (DataManager dataManager, object data, string keyField, string key) + public virtual object Update(DataManager dataManager, object data, string keyField, string key) /// - /// Performs Update operation asynchronously. + /// Performs update operation asynchronously. /// public virtual Task UpdateAsync(DataManager dataManager, object data, string keyField, string key) /// - /// Performs Batch CRUD operations synchronously. + /// Performs batch CRUD operations synchronously. /// - public virtual object BatchUpdate(DataManager dataManager, object changedRecords, object addedRecords, object deletedRecords, string keyField, string key) + public virtual object BatchUpdate(DataManager dataManager, object changedRecords, object addedRecords, object deletedRecords, string keyField, string key, int? dropIndex) /// - /// Performs Batch CRUD operations asynchronously. + /// Performs batch CRUD operations asynchronously. /// - public virtual Task BatchUpdateAsync(DataManager dataManager, object changedRecords, object addedRecords, object deletedRecords, string keyField, string key) + public virtual Task BatchUpdateAsync(DataManager dataManager, object changedRecords, object addedRecords, object deletedRecords, string keyField, string key, int? dropIndex) } ``` -For implementing the custom data binding alone in the DataGrid component, provide the custom adaptor class and override the **Read** or **ReadAsync** method of the **DataAdaptor** abstract class. +## Perform Data Operations + +Custom binding enables client-side operations such as **searching**, **sorting**, **filtering**, **paging**, and **aggregation** when using a [CustomAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_CustomAdaptor). These operations are implemented by overriding the [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor-1.html#Syncfusion_Blazor_DataAdaptor_1_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) or [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor-1.html#Syncfusion_Blazor_DataAdaptor_1_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 details for each operation, including search criteria, sort descriptors, filter conditions, and paging parameters. 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 collection. +* [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 collection based on specified fields. +* [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 records using conditions. +* [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Collections_Generic_IEnumerable___0__System_Int32_) – Skips a defined 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_) – Takes a defined number of records for paging. +* [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__) – Calculates aggregate values such as Sum, Average, Min, and Max for a collection. + +> * When the [RequiresCounts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html#Syncfusion_Blazor_DataManagerRequest_RequiresCounts) property of `DataManagerRequest` is **true**, the return type should be a [DataResult](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.DataResult.html) object containing: + +> * **Result** – The processed collection. +> * **Count** – Total number of records. +> * **Aggregate** (optional) – Aggregate values when aggregation is applied. + +> * When `RequiresCounts` is **false**, return only the processed collection. +> * If the `Read` or `ReadAsync` method is not overridden in a custom adaptor, the default read handler processes the request. + +## Perform CRUD Operations + +Custom binding supports full **CRUD** functionality by overriding methods in the [DataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor.html) abstract class. These methods handle data manipulation for components bound to the `SfDataManager`. + +The methods listed below provide signatures for both synchronous and asynchronous operations: + +* **Create** + + * [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_) – Adds new records. + +* **Read** + + * [Read](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor-1.html#Syncfusion_Blazor_DataAdaptor_1_Read_Syncfusion_Blazor_DataManagerRequest_System_String_) / [ReadAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataAdaptor-1.html#Syncfusion_Blazor_DataAdaptor_1_ReadAsync_Syncfusion_Blazor_DataManagerRequest_System_String_) – Retrieves data from the data source. -N> If the Read/ReadAsync method is not overridden in the custom adaptor then it will be handled by the default read handler. +* **Update** -For implementing the CRUD operations for the custom bounded data, override the following CRUD methods of the **DataAdaptor** abstract class, + * [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_) – Modifies existing records. -* Insert/InsertAsync -* Remove/RemoveAsync -* Update/UpdateAsync -* BatchUpdate/BatchUpdateAsync +* **Delete** -N> While using batch editing in datagrid, use BatchUpdate/BatchUpdateAsync method to handle the corresponding CRUD operation + * [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_) – Deletes records. -The following sample code demonstrates implementing custom adaptor of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) for data binding and editing operations in the DataGrid component, +* **Batch Operations** + + * [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 for editing scenarios. + +Overriding these methods enables custom logic for **creating**, **reading**, **updating**, and **deleting** data while maintaining compatibility with Syncfusion Blazor components such as [DataGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). + +## Implementing Custom Adaptor + +Custom binding in the Syncfusion® Blazor `DataManager` component can be integrated with the `DataGrid` by creating a custom adaptor that defines data operations and CRUD functionality. + +**Steps to implement custom binding and integrate with DataGrid** + +1. **Create a custom adaptor** + +* Derive a class from the `DataAdaptor` abstract base to implement custom logic for data retrieval and manipulation. + +2. **Override required methods** + +* For **data operations**, override `Read` or `ReadAsync` to apply **searching**, **sorting**, **filtering**, **paging**, and **aggregation** using the `DataOperations` and `DataUtil` classes. +* For **CRUD operations**, override `Insert`, `Update`, `Remove`, and `BatchUpdate` along with their asynchronous counterparts. + +3. **Bind the custom adaptor to DataManager** + +* Assign the custom adaptor type to the [AdaptorInstance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_AdaptorInstance) property of the `SfDataManager` component. + +4. **Configure the Grid for CRUD operations** + +* Enable editing by setting 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. Specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) property as [EditMode.Normal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#Syncfusion_Blazor_Grids_EditMode_Normal) to allow adding, updating, and deleting records. ```cshtml @using Syncfusion.Blazor @using Syncfusion.Blazor.Data @using Syncfusion.Blazor.Grids - + - - - + + + -@code{ - public static List Orders { get; set; } +@code { + public static List Orders { get; set; } = new(); protected override void OnInitialized() { Orders = Enumerable.Range(1, 75).Select(x => new Order() { OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, + CustomerID = new[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" }[new Random().Next(5)], + Freight = 2.1 * x }).ToList(); } public class Order { public int OrderID { get; set; } - public string CustomerID { get; set; } + public string? CustomerID { get; set; } public double Freight { get; set; } } - // Implementing custom adaptor by extending the DataAdaptor class public class CustomAdaptor : DataAdaptor { - // Performs data Read operation public override object Read(DataManagerRequest dm, string key = null) { - IEnumerable DataSource = Orders; - if (dm.Search != null && dm.Search.Count > 0) - { - // Searching - DataSource = DataOperations.PerformSearching(DataSource, dm.Search); - } - if (dm.Sorted != null && dm.Sorted.Count > 0) - { - // Sorting - DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted); - } - if (dm.Where != null && dm.Where.Count > 0) - { - // Filtering - DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); - } - int count = DataSource.Cast().Count(); + IEnumerable dataSource = Orders; + + if (dm.Search?.Count > 0) + dataSource = DataOperations.PerformSearching(dataSource, dm.Search); + + if (dm.Sorted?.Count > 0) + dataSource = DataOperations.PerformSorting(dataSource, dm.Sorted); + + if (dm.Where?.Count > 0) + dataSource = DataOperations.PerformFiltering(dataSource, dm.Where, dm.Where[0].Operator); + + int count = dataSource.Count(); + if (dm.Skip != 0) - { - //Paging - DataSource = DataOperations.PerformSkip(DataSource, dm.Skip); - } + dataSource = DataOperations.PerformSkip(dataSource, dm.Skip); + if (dm.Take != 0) - { - DataSource = DataOperations.PerformTake(DataSource, dm.Take); - } - return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource; + dataSource = DataOperations.PerformTake(dataSource, dm.Take); + + return dm.RequiresCounts ? new DataResult() { Result = dataSource, Count = count } : (object)dataSource; } - // Performs Insert operation public override object Insert(DataManager dm, object value, string key) { Orders.Insert(0, value as Order); return value; } - // Performs Remove operation public override object Remove(DataManager dm, object value, string keyField, string key) { - Orders.Remove(Orders.Where(or => or.OrderID == int.Parse(value.ToString())).FirstOrDefault()); + Orders.Remove(Orders.FirstOrDefault(or => or.OrderID == int.Parse(value.ToString()))); return value; } - // Performs Update operation public override object Update(DataManager dm, object value, string keyField, string key) { - var data = Orders.Where(or => or.OrderID == (value as Order).OrderID).FirstOrDefault(); + var data = Orders.FirstOrDefault(or => or.OrderID == (value as Order).OrderID); if (data != null) { - data.OrderID = (value as Order).OrderID; data.CustomerID = (value as Order).CustomerID; data.Freight = (value as Order).Freight; } return value; } - // Performs BatchUpdate operation - public override object BatchUpdate(DataManager dm, object Changed, object Added, object Deleted, string KeyField, string Key) + public override object BatchUpdate(DataManager dm, object changed, object added, object deleted, string keyField, string key, int? dropIndex) { - if (Changed != null) + if (changed is IEnumerable changedRecords) { - foreach (var rec in (IEnumerable)Changed) + foreach (var rec in changedRecords) { - Orders[0].CustomerID = rec.CustomerID; + var existing = Orders.FirstOrDefault(o => o.OrderID == rec.OrderID); + if (existing != null) + existing.CustomerID = rec.CustomerID; } - } - if (Added != null) + + if (added is IEnumerable addedRecords) { - foreach (var rec in (IEnumerable)Added) - { + foreach (var rec in addedRecords) Orders.Add(rec); - } - } - if (Deleted != null) - { - foreach (var rec in (IEnumerable)Deleted) - { - Orders.RemoveAt(0); - } + if (deleted is IEnumerable deletedRecords) + { + foreach (var rec in deletedRecords) + Orders.RemoveAll(o => o.OrderID == rec.OrderID); } + return Orders; } + } } ``` -N> If the **DataManagerRequest.RequiresCounts** value is **true**, then the Read/ReadAsync return value must be of **DataResult** with properties **Result** whose value is a collection of records and **Count** whose value is the total number of records. If the **DataManagerRequest.RequiresCounts** is **false**, then simply send the collection of records. - -The following GIF demonstrates the Grid component with data bound using custom adaptor and the CRUD operations being performed on it, ![Custom Binding in Blazor DataManager](./images/blazor-datamanager-custom-binding.gif) \ No newline at end of file diff --git a/blazor/data/data-binding.md b/blazor/data/data-binding.md index 43fa333b79..9072d76b1d 100644 --- a/blazor/data/data-binding.md +++ b/blazor/data/data-binding.md @@ -11,28 +11,45 @@ documentation: ug # Data Binding in Blazor DataManager Component -The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) acts as a gateway for both local and remote data source which uses the query to interact with the data source. It supports both local object binding and RESTful JSON data services binding. +Data binding establishes a connection between a Blazor component and its data source. The Syncfusion® Blazor [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component provides an efficient way to manage this connection. It acts as an intermediary between the data source and UI components such as [SfGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app). + +The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports two primary approaches for data binding: + +* **Local Data Binding** – Binds in-memory collections directly to the component using the [Json](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Json) property. + +* **Remote Data Binding** – Connects to remote services by specifying a service endpoint [URL](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) and configuring the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property. + +Built-in adaptors enable seamless integration with services such as **OData** and **Web API**. Common operations like **filtering**, **sorting**, **paging**, and **grouping** can be executed on the **client** or **server** based on the selected adaptor. ## Local data binding -Local data can be bound to the DataGrid component by assigning the array of objects to the [Json](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Json) property of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). +Local data binding connects a component to data that resides in the application’s memory. This approach is suitable when the dataset is already available and does not require frequent updates from an external source. + +**Key Benefits** + +* Eliminates **network latency**. +* Ideal for **small to medium** sized collections. +* Simplifies configuration since no remote service is involved. +* Operations such as **sorting**, **filtering**, **paging**, and **grouping** are performed entirely on the client. + +To configure local data binding, assign the in-memory collection to the [Json](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Json) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. -The following sample code demonstrates binding local data through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the DataGrid component, ```cshtml @using Syncfusion.Blazor.Data @using Syncfusion.Blazor.Grids - + - - - + + + -@code{ +@code { + public class EmployeeData { public int EmployeeID { get; set; } @@ -40,7 +57,7 @@ The following sample code demonstrates binding local data through the [SfDataMan public string Title { get; set; } } - public EmployeeData[] Employees = new EmployeeData[] + private List Employees { get; set; } = new() { new EmployeeData { EmployeeID = 1, Name = "Nancy Fuller", Title = "Vice President" }, new EmployeeData { EmployeeID = 2, Name = "Steven Buchanan", Title = "Sales Manager" }, @@ -49,21 +66,26 @@ The following sample code demonstrates binding local data through the [SfDataMan new EmployeeData { EmployeeID = 5, Name = "Steven Peacock", Title = "Inside Sales Coordinator" }, new EmployeeData { EmployeeID = 6, Name = "Janet Buchanan", Title = "Sales Representative" }, new EmployeeData { EmployeeID = 7, Name = "Andrew Fuller", Title = "Inside Sales Coordinator" }, - new EmployeeData { EmployeeID = 8, Name = "Steven Davolio", Title = "Inside Sales Coordinato" }, + new EmployeeData { EmployeeID = 8, Name = "Steven Davolio", Title = "Inside Sales Coordinator" }, new EmployeeData { EmployeeID = 9, Name = "Janet Davolio", Title = "Sales Representative" }, new EmployeeData { EmployeeID = 10, Name = "Andrew Buchanan", Title = "Sales Representative" } }; } ``` -The following image represents DataGrid bound with local data through the `SfDataManager` component, ![Data Binding in Blazor DataManager Component](./images/blazor-datamanager-binding.png) ## Remote data binding -Remote data can be bound to the Grid component by binding the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component to it and then assigning the service end point URL to the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). +Remote data binding connects a component to data hosted on an external service. This approach is recommended when working with large datasets or when data changes frequently and must be retrieved dynamically. + +**Key Benefits** -The following sample code demonstrates binding remote data through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the DataGrid component, +* Enables integration with external services and APIs. +* Supports large-scale datasets without loading all data into memory. +* Allows server-side execution of operations such as **filtering**, **sorting**, **paging**, and **grouping** for improved performance. + +To configure remote data binding in the [DataGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html), set the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property to the service endpoint and specify the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property in the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.htm) component to define how data operations are processed. ```cshtml @using Syncfusion.Blazor @@ -73,15 +95,16 @@ The following sample code demonstrates binding remote data through the [SfDataMa - - - - + + + + -@code{ - public class Order { +@code { + public class Order + { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } @@ -90,5 +113,4 @@ The following sample code demonstrates binding remote data through the [SfDataMa } ``` -The following image represents DataGrid bound with remote data through the `SfDataManager` component, ![Remote Data Binding in Blazor DataManager](./images/blazor-datamanager-remote-binding.png) \ No newline at end of file diff --git a/blazor/data/getting-started-with-web-app.md b/blazor/data/getting-started-with-web-app.md index 59d1dd0a07..de68b5927e 100644 --- a/blazor/data/getting-started-with-web-app.md +++ b/blazor/data/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DataManager Component in Web App -This section briefly explains about how to include `Blazor DataManager` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +The Syncfusion® Blazor [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component acts as a data gateway for Syncfusion® Blazor controls that support data binding. It enables interaction with **local** or **remote** data sources using **queries** and **adaptors**. This guide provides step-by-step instructions to configure the component in a **Blazor Web App** created with [Visual Studio](https://visualstudio.microsoft.com/vs/) or [Visual Studio Code](https://code.visualstudio.com/). {% tabcontents %} @@ -17,21 +17,36 @@ This section briefly explains about how to include `Blazor DataManager` componen ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* Ensure the development environment meets the [system requirements for Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) before proceeding with the setup. ## 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). +A **Blazor Web App** can be created using **Visual Studio** with the built-in [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. +1. Open **Visual Studio 2022** (version 17.8 or later). +2. Select **Create a new project**. +3. Choose **Blazor Web App** from the template list and click **Next**. +4. Specify the **project name**, **location**, and **solution settings**, then click **Next**. +5. Select the **target framework** as **.NET 9.0 or later** (choose the latest installed version). +6. Choose the [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes)(Server, WebAssembly, or Auto) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs). +7. Review the remaining options and click **Create** to generate the project. ## Install Syncfusion® Blazor Data and Themes NuGet in the Blazor Web App -To add **Blazor DataManager** 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.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To integrate the **Blazor DataManager** component, install the required Syncfusion® NuGet packages in the solution: -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. +1. Open **NuGet Package Manager** in Visual Studio: -Alternatively, you can utilize the following package manager command to achieve the same. + *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. + +2. Search and install the following packages: + + - [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) + - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + +3. For projects using **WebAssembly** or **Auto** interactive render modes, ensure these packages are installed in the **Client** project. + +4. Alternatively, use the **Package Manager Console**: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +57,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 on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -50,15 +65,15 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* Ensure the development environment meets the [system requirements for Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) before proceeding with the setup. ## 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 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. +A **Blazor Web App** can be created using **Visual Studio Code** with the built-in [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 example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +1. Install the latest **.NET SDK** that supports **.NET 9 or later**. +2. Open **Visual Studio Code** and launch the integrated terminal (**Ctrl + `**). +3. Execute the following command to create a **Blazor Web App** with **Auto** [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes): {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -70,15 +85,18 @@ 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). +N> For other interactive render modes and interactivity locations, refer to Render Modes [documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). ## Install Syncfusion® Blazor Data 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. +To integrate the Blazor DataManager component, install the required Syncfusion® NuGet packages using the **integrated terminal**: -* 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. -* Run the following command to install a [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +1. Open the integrated terminal in Visual Studio Code (**Ctrl + `**). +2. Navigate to the directory containing the **.csproj** file. +3. Run the following commands to install the packages: + + - [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) + - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) {% tabs %} @@ -100,12 +118,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -| 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.| - -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Data` namespace. +1. Import the required namespaces in the **_Imports.razor** file: {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -116,9 +129,14 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Data` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +- For **WebAssembly** or **Auto** interactive render modes, update this file in the **Client** project. +- For **Server** interactive render mode, update this file in the **Components** folder. + +2. Register the Syncfusion® Blazor service in the **Program.cs** file: -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. +**Auto or WebAssembly Render Mode** + +Register the service in both **Server** and **Client** projects: {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +170,9 @@ 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. +**Server Render Mode** + +For **Server** mode, register the service in the **Program.cs** file: {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -175,57 +195,59 @@ var app = builder.Build(); ## 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: +Syncfusion® Blazor themes and scripts are available through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the following references in the **~/Components/App.razor** file: + +**In the <head> section:** ```html - .... -.... +``` + +**At the end of the <body> section:** + +```html - .... ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> +* Refer to [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for various methods to reference themes in a Blazor application: -## Add Blazor DataManager component + * [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) + * [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) + * [Custom Resource Generator (CRG)](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) -[SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component should be used in conjunction with Syncfusion® Blazor components that supports data binding. +* For script reference options, see [Adding Script References](https://blazor.syncfusion.com/documentation/common/adding-script-references). -In the following example, `SfDataManager` is used with Blazor DataGrid component to depict the usage of DataManager. The DataManager acts as a gateway for both local and remote data to interact with the data source based on the provided query. +## Add Blazor DataManager component -### Binding to JSON data +The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component acts as a data gateway for Syncfusion® Blazor components that support data binding. It enables interaction with local or remote data sources using queries. -Local JSON data can be bound to the DataGrid component by assigning the array of objects to the [Json](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Json) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. +### Binding to JSON data -Explore the provided sample code below, which illustrates how to bind local data to the DataGrid component using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). To get started with Blazor DataGrid, please refer to this [link](https://blazor.syncfusion.com/documentation/datagrid/getting-started) for more information. +Local [JSON](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Json) data can be bound to the [DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started) component by assigning a collection of objects to the `Json` property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. {% tabs %} {% highlight razor %} @using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Data - + - - - + + + -@code{ - public class EmployeeData - { - public int EmployeeID { get; set; } - public string Name { get; set; } - public string Title { get; set; } - } +@code { - public EmployeeData[] Employees = new EmployeeData[] + public List Employees { get; set; } = new() { new EmployeeData { EmployeeID = 1, Name = "Nancy Fuller", Title = "Vice President" }, new EmployeeData { EmployeeID = 2, Name = "Steven Buchanan", Title = "Sales Manager" }, @@ -234,38 +256,53 @@ Explore the provided sample code below, which illustrates how to bind local data new EmployeeData { EmployeeID = 5, Name = "Steven Peacock", Title = "Inside Sales Coordinator" }, new EmployeeData { EmployeeID = 6, Name = "Janet Buchanan", Title = "Sales Representative" }, new EmployeeData { EmployeeID = 7, Name = "Andrew Fuller", Title = "Inside Sales Coordinator" }, - new EmployeeData { EmployeeID = 8, Name = "Steven Davolio", Title = "Inside Sales Coordinato" }, + new EmployeeData { EmployeeID = 8, Name = "Steven Davolio", Title = "Inside Sales Coordinator" }, new EmployeeData { EmployeeID = 9, Name = "Janet Davolio", Title = "Sales Representative" }, new EmployeeData { EmployeeID = 10, Name = "Andrew Buchanan", Title = "Sales Representative" } }; -} + public class EmployeeData + { + public int EmployeeID { get; set; } + public string? Name { get; set; } + public string? Title { get; set; } + } +} {% endhighlight %} {% endtabs %} ### Binding to OData -Remote data can be bound to the DataGrid component by binding the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component to it and then assigning the service end point URL to the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). - -The following sample code demonstrates binding OData through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the DataGrid component, +Remote data can be bound by setting the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property and specifying the appropriate adaptor using the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. {% tabs %} {% highlight razor %} +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Data +@using Syncfusion.Blazor.Grids + - + + - - - - + + + + -@code{ - public class Order { +@code { + + public class Order + { public int? OrderID { get; set; } - public string CustomerID { get; set; } + public string? CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; set; } } @@ -276,81 +313,81 @@ The following sample code demonstrates binding OData through the [SfDataManager] ## Component binding -The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can be used with Syncfusion® components which supports data binding. +The Syncfusion® Blazor [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component can be integrated with any Syncfusion® data-bound component to manage local or remote data operations. -In the below example, the `SfDataManager` is bound with DropDownList component to demonstrate data binding for the components. In the same way, you can use `DataManager` with any other data-bound components of Syncfusion® Blazor components. +This configuration demonstrates how the `DataManager` is bound to the [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) component to enable consistent interaction with local or remote data sources. ### Local data binding -Local data can be bound to the DropDownList component by assigning the array of objects to the [Json](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Json) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. - -The following sample code demonstrates binding local data through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) component, +Local data can be bound to components such as `SfDropDownList` by assigning a collection of objects to the [Json](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Json) property of the `SfDataManager` component. {% tabs %} {% highlight razor %} +@using Syncfusion.Blazor.Data @using Syncfusion.Blazor.DropDowns - - + + -@code{ - public class Countries +@code { + public class Country { - public string Name { get; set; } - - public string Code { get; set; } + public string? Name { get; set; } + public string? Code { get; set; } } - public Countries[] Country = new Countries[] + public List Countries = new() { - new Countries { Name = "Australia", Code = "AU" }, - new Countries { Name = "Bermuda", Code = "BM" }, - new Countries { Name = "Canada", Code = "CA" }, - new Countries { Name = "Cameroon", Code = "CM" } + new Country { Name = "Australia", Code = "AU" }, + new Country { Name = "Bermuda", Code = "BM" }, + new Country { Name = "Canada", Code = "CA" }, + new Country { Name = "Cameroon", Code = "CM" } }; } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLztCVEBpQxSKZU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding DropDownList Item in Blazor DataManager Component](./images/blazor-datamanager-binding-dropdown-item.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLeCWWaPtlNQoPM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding DropDownList Item in Blazor DataManager Component](./images/blazor-datamanager-binding-dropdown-item.png)" %} ### Remote data binding -Remote data can be bound to the DropDownList component by binding the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component to it and then assigning the service end point URL to the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). - -The following sample code demonstrates binding remote data through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the DropDownList component, +Remote data can be bound by setting the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property and specifying the appropriate adaptor using the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property of the `SfDataManager` component. {% tabs %} {% highlight razor %} - +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Data +@using Syncfusion.Blazor.DropDowns + + -@code{ +@code { + public class Contact { - public string ContactName { get; set; } - - public string CustomerID { get; set; } + public string? ContactName { get; set; } + public string? CustomerID { get; set; } } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthpNMhYLzkEUBiB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor DataManager Component](./images/blazor-datamanager-data-binding.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZheWWWamGlqvaaF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor DataManager Component](./images/blazor-datamanager-data-binding.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataManager). +N> [View the complete sample on GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataManager). ## See also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Syncfusion® Blazor for client-side using .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +2. [Getting Started with Syncfusion® Blazor for client-side using Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) +3. [Getting Started with Syncfusion® Blazor for server-side using .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) diff --git a/blazor/data/getting-started.md b/blazor/data/getting-started.md index b2e9e98c8a..2fe5a42ce5 100644 --- a/blazor/data/getting-started.md +++ b/blazor/data/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with Blazor DataManager Component | Syncfusion -description: Checkout and learn about getting started with Blazor DataManager component in Blazor WebAssembly Application. +description: Learn how to configure and use the Syncfusion Blazor DataManager component in a Blazor WebAssembly application. platform: Blazor control: DataManager documentation: ug @@ -9,7 +9,9 @@ documentation: ug # Getting Started with Blazor DataManager Component -This section briefly explains about how to include [Blazor DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +The Syncfusion® Blazor [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component provides a robust data access layer for Blazor applications. It enables seamless interaction with both **local** and **remote** data sources and supports essential operations such as **querying**, **sorting**, **filtering**, and **CRUD** actions. The component is designed to work in conjunction with Syncfusion® data-bound controls, ensuring efficient data management across the application. + +This guide explains how to configure and use the `DataManager` component in a **Blazor WebAssembly** application using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). {% tabcontents %} @@ -17,15 +19,35 @@ This section briefly explains about how to include [Blazor DataManager](https:// ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* Ensure the development environment meets the [system requirements for Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) before proceeding with the setup. -## Create a new Blazor App in Visual Studio +## Create a new Blazor WebAssembly App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +A **Blazor WebAssembly App** can be created using **Visual Studio** with the built-in [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-integration/template-studio). -## Install Syncfusion® Blazor Data and Themes NuGet in the App +1. Open **Visual Studio 2022** (v17.8 or later). +2. Select **Create a new project**. +3. Choose **Blazor WebAssembly Standalone App** from the list of templates and click **Next**. +4. Configure the **project name**, **location**, and **solution settings**, then click **Next**. +5. Select the **target framework** as **.NET 9.0 or later** (choose the latest installed version available on the system). +6. Click **Create** to generate the project. + +N> For detailed steps, refer to [Microsoft Blazor tooling documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs). + +## Install Syncfusion® Blazor NuGet Packages + +To integrate the Blazor **DataManager** component, install the required NuGet packages in the **Blazor WebAssembly** project: + +1. Open **NuGet Package Manager** in Visual Studio: + + *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. + +2. Search and install the following packages: + + - [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data) + - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) -To add **Blazor DataManager** 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.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +3. Alternatively, use the **Package Manager Console**: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -36,7 +58,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 on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of packages, refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -44,13 +66,15 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* Ensure the development environment meets the [system requirements for Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) before proceeding with the setup. ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +A **Blazor WebAssembly App** can be created using **Visual Studio Code** with the built-in [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). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +1. Open **Visual Studio Code**. +2. Open the **integrated terminal** (**Ctrl + `**). +3. Run the following commands to create a new **Blazor WebAssembly** project: {% tabs %} @@ -63,11 +87,16 @@ cd BlazorApp {% endtabs %} +4. Open the **project folder** in **Visual Studio Code**. + ## Install Syncfusion® Blazor Data and Themes NuGet in the App -* 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. -* Run the following command to install a [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +1. Press Ctrl+` to open the integrated terminal in Visual Studio Code. +2. Ensure the terminal is in the project root directory where the **.csproj** file is located. +3. Run the following commands to install the required NuGet packages: + + - [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data) + - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) {% tabs %} @@ -89,7 +118,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Data` namespace. +2. Register the Syncfusion® Blazor service in the **~/Program.cs** file: {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -100,7 +129,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +2. Register the Syncfusion® Blazor service in the **~/Program.cs** file: {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -124,7 +153,7 @@ await builder.Build().RunAsync(); ## 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 and script references in the `` section of the **~/index.html** file. +The theme stylesheet and script files are provided through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-asset) in the NuGet packages. Include these references in the **** section of the **~/wwwroot/index.html** file: ```html @@ -133,35 +162,40 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor DataManager component +N> +* Refer to [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for various methods to reference themes in a Blazor application: -[SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component should be used in conjunction with Syncfusion® Blazor components that supports data binding. + * [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) + * [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) + * [Custom Resource Generator (CRG)](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) -In the following example, `SfDataManager` is used with Blazor DataGrid component to depict the usage of DataManager. The DataManager acts as a gateway for both local and remote data to interact with the data source based on the provided query. +* For script reference options, see [Adding Script References](https://blazor.syncfusion.com/documentation/common/adding-script-references). -### Binding to JSON data +## Add Blazor DataManager component + +The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component is designed to work with Syncfusion® data-bound components that support data operations. It serves as a gateway for both local and remote data, enabling interaction with the data source based on the configured query. -Local JSON data can be bound to the DataGrid component by assigning the array of objects to the [Json](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Json) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. +### Binding to JSON data -Explore the provided sample code below, which illustrates how to bind local data to the DataGrid component using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). To get started with Blazor DataGrid, please refer to this [link](https://blazor.syncfusion.com/documentation/datagrid/getting-started) for more information. +Local **JSON** data can be bound to the [DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started) component by assigning a collection of objects to the [Json](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Json) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. {% tabs %} {% highlight razor %} +@using Syncfusion.Blazor.Data @using Syncfusion.Blazor.Grids - + - - - + + + -@code{ +@code { public class EmployeeData { public int EmployeeID { get; set; } @@ -169,7 +203,7 @@ Explore the provided sample code below, which illustrates how to bind local data public string Title { get; set; } } - public EmployeeData[] Employees = new EmployeeData[] + public List Employees = new() { new EmployeeData { EmployeeID = 1, Name = "Nancy Fuller", Title = "Vice President" }, new EmployeeData { EmployeeID = 2, Name = "Steven Buchanan", Title = "Sales Manager" }, @@ -189,27 +223,36 @@ Explore the provided sample code below, which illustrates how to bind local data ### Binding to OData -Remote data can be bound to the DataGrid component by binding the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component to it and then assigning the service end point URL to the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). - -The following sample code demonstrates binding OData through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the DataGrid component, +Remote data can be bound to the [DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started) component by configuring the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property and specifying the appropriate adaptor using the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. {% tabs %} {% highlight razor %} +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Data +@using Syncfusion.Blazor.Grids + - + + - - - - + + + + -@code{ - public class Order { +@code { + + public class Order + { public int? OrderID { get; set; } - public string CustomerID { get; set; } + public string? CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; set; } } @@ -220,74 +263,74 @@ The following sample code demonstrates binding OData through the [SfDataManager] ## Component binding -The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can be used with Syncfusion® components which supports data binding. +The Syncfusion® Blazor [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component can be integrated with any Syncfusion® data-bound component to manage local or remote data operations. -In the below example, the `SfDataManager` is bound with DropDownList component to demonstrate data binding for the components. In the same way, you can use `DataManager` with any other data-bound components of Syncfusion® Blazor components. +This configuration demonstrates how the `DataManager` is bound to the [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) component to enable consistent interaction with local or remote data sources. ### Local data binding -Local data can be bound to the DropDownList component by assigning the array of objects to the [Json](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Json) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. - -The following sample code demonstrates binding local data through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) component, +Local data can be bound to components such as `SfDropDownList` by assigning a collection of objects to the [Json](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Json) property of the `SfDataManager` component. {% tabs %} {% highlight razor %} +@using Syncfusion.Blazor.Data @using Syncfusion.Blazor.DropDowns - - + + -@code{ - public class Countries +@code { + public class Country { - public string Name { get; set; } - - public string Code { get; set; } + public string? Name { get; set; } + public string? Code { get; set; } } - public Countries[] Country = new Countries[] + public List Countries = new() { - new Countries { Name = "Australia", Code = "AU" }, - new Countries { Name = "Bermuda", Code = "BM" }, - new Countries { Name = "Canada", Code = "CA" }, - new Countries { Name = "Cameroon", Code = "CM" } + new Country { Name = "Australia", Code = "AU" }, + new Country { Name = "Bermuda", Code = "BM" }, + new Country { Name = "Canada", Code = "CA" }, + new Country { Name = "Cameroon", Code = "CM" } }; } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLztCVEBpQxSKZU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding DropDownList Item in Blazor DataManager Component](./images/blazor-datamanager-binding-dropdown-item.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLeCWWaPtlNQoPM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding DropDownList Item in Blazor DataManager Component](./images/blazor-datamanager-binding-dropdown-item.png)" %} ### Remote data binding -Remote data can be bound to the DropDownList component by binding the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component to it and then assigning the service end point URL to the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). - -The following sample code demonstrates binding remote data through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to the DropDownList component, +Remote data can be bound by setting the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property and specifying the appropriate adaptor using the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property of the `SfDataManager` component. {% tabs %} {% highlight razor %} - +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Data +@using Syncfusion.Blazor.DropDowns + + -@code{ +@code { + public class Contact { - public string ContactName { get; set; } - - public string CustomerID { get; set; } + public string? ContactName { get; set; } + public string? CustomerID { get; set; } } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthpNMhYLzkEUBiB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor DataManager Component](./images/blazor-datamanager-data-binding.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVyMWMEFjOIhipK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor DataManager Component](./images/blazor-datamanager-data-binding.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataManager). +N> [View Sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataManager). \ No newline at end of file diff --git a/blazor/data/how-to/adding-custom-headers.md b/blazor/data/how-to/adding-custom-headers.md index b515fc8617..144fd7a126 100644 --- a/blazor/data/how-to/adding-custom-headers.md +++ b/blazor/data/how-to/adding-custom-headers.md @@ -9,11 +9,31 @@ documentation: ug -# Adding Custom Headers in Blazor DataManager Component +# Adding Custom Headers in Blazor DataManager -Custom headers can be added to the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) request using its [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Headers) property. +The Syncfusion® Blazor [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started-with-web-app) component supports adding **custom HTTP headers** to all outbound requests. This feature is essential when requests require additional metadata, such as **authentication tokens**, **tenant identifiers**, or **localization details**. -The following sample code demonstrates adding custom headers to the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) request which is bound with the DataGrid component, +The [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Headers) property is used to configure these headers by assigning **key–value** pairs through an **IDictionary** collection. Each request automatically includes the specified headers, enabling secure and context-aware communication without repetitive code. + +**Key Capabilities** + +Use the `Headers` property to add custom HTTP headers to requests made by [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This includes sending authentication details such as a **Bearer token**. + +* **Adaptor Support** + + Works with all built-in adaptors, including **Web API**, **OData**, and **URL adaptors**. + +* **Automatic Integration** + + Headers are included when `DataManager` connects to components such as [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html), [SfChart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html), or [SfListView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html). + +* **Dynamic Updates** + + Modify headers at runtime for scenarios like **token refresh** or **context changes**. + +* **Secure Transmission** + + Sensitive data such as **tokens** and **identifiers** remain in headers, reducing payload size and improving security. ```cshtml @using Syncfusion.Blazor @@ -22,23 +42,29 @@ The following sample code demonstrates adding custom headers to the [SfDataManag - + + - - - - + + + + @code{ - public class Data + + private IDictionary HeaderData = new Dictionary { - public string Grid; + { "Authorization", "Bearer " }, + { "X-Tenant-ID", "Tenant123" } }; - private IDictionary HeaderData = new Dictionary(); - public class Order { public int? OrderID { get; set; } @@ -47,4 +73,4 @@ The following sample code demonstrates adding custom headers to the [SfDataManag public double? Freight { get; set; } } } -``` +``` \ No newline at end of file diff --git a/blazor/data/how-to/offline-mode.md b/blazor/data/how-to/offline-mode.md index 3335bff3a3..30b6b95f4a 100644 --- a/blazor/data/how-to/offline-mode.md +++ b/blazor/data/how-to/offline-mode.md @@ -1,7 +1,7 @@ --- layout: post -title: Working in offline mode in Blazor DataManager Component | Syncfusion -description: Checkout and learn here all about working in offline mode in Syncfusion Blazor DataManager component and more. +title: Working in Offline Mode in Blazor DataManager | Syncfusion +description: Learn how to enable offline mode in Syncfusion® Blazor DataManager to process queries locally without additional server requests. platform: Blazor control: DataManager documentation: ug @@ -11,9 +11,19 @@ documentation: ug # Working in Offline Mode in Blazor DataManager Component -On binding data through remote services, request will be sent to the server-side for every query. To avoid post back to server, you can set the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to load all the data on initialization itself and make the query processing in client-side. This behavior can be enabled by using [Offline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Offline) property of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). +The Syncfusion® Blazor DataManager component provides **offline mode** to execute query operations on the client without additional server requests. When data is sourced from a remote service, enabling offline mode retrieves the complete collection during initialization and processes all subsequent operations locally. The cached data is maintained in the **Json** property. -The following sample code demonstrates enabling offline mode for the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) which is bound with the DataGrid component, +To enable offline mode, set the [Offline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Offline) property to **true** on the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. + +## Key benefits of offline mode + +Enabling the `Offline` property modifies the behavior of the `DataManager` component in the following ways: + +- **Single data load** – Retrieves the complete collection during initialization without additional server requests. +- **Client-side processing** – Executes **filtering**, **sorting**, **paging**, and **grouping** operations in the browser. +- **Improved performance** – Minimizes **network traffic** and enhances responsiveness. +- **Offline functionality** – Maintains query operations even when network connectivity is unavailable. +- **Adaptor compatibility** – Supports **OData**, **Web API**, and **URL adaptors** without requiring extra configuration. ```cshtml @using Syncfusion.Blazor @@ -21,15 +31,16 @@ The following sample code demonstrates enabling offline mode for the [SfDataMana @using Syncfusion.Blazor.Grids - - - - - - + + + + + + -@code{ +@code { + public class EmployeeData { public int OrderID { get; set; } @@ -39,4 +50,4 @@ The following sample code demonstrates enabling offline mode for the [SfDataMana } ``` -N> Return the complete list from server-side when using `Offline` property. \ No newline at end of file +N> * Ensure that the remote endpoint returns the full data collection when the `Offline` property is enabled. \ No newline at end of file