diff --git a/blazor/datagrid/connecting-to-ORM/dapper.md b/blazor/datagrid/connecting-to-ORM/dapper.md index 86006974b5..365ad4fcd0 100644 --- a/blazor/datagrid/connecting-to-ORM/dapper.md +++ b/blazor/datagrid/connecting-to-ORM/dapper.md @@ -32,8 +32,8 @@ Ensure the following software and packages are installed before proceeding: | Visual Studio 2026 | 18.0 or later | Development IDE with Blazor workload | | .NET SDK | net8.0 or compatible | Runtime and build tools | | SQL Server | 2019 or later | Database server | -| Syncfusion.Blazor.Grid | {{site.blazorversion}} | DataGrid and UI components | -| Syncfusion.Blazor.Themes | {{site.blazorversion}} | Styling for DataGrid components | +| Syncfusion.Blazor.Grid | {{site.blazorversion}} | Blazor DataGrid and UI components | +| Syncfusion.Blazor.Themes | {{site.blazorversion}} | Styling for Blazor DataGrid components | | Microsoft.Data.SqlClient | Latest | SQL Server ADO.NET provider | | Dapper | Latest | Lightweight micro-ORM for SQL mapping | @@ -415,7 +415,7 @@ The service registration has been completed successfully. ### Step 1: Install and Configure Blazor DataGrid Components -Syncfusion is a library that provides pre-built UI components like DataGrid, which is used to display data in a table format. +Syncfusion is a library that provides pre-built UI components like Blazor DataGrid, which is used to display data in a table format. **Instructions:** @@ -440,7 +440,7 @@ Syncfusion is a library that provides pre-built UI components like DataGrid, whi ``` For this project, the tailwind3 theme is used. A different theme can be selected or the existing theme can be customized based on project requirements. Refer to the [Blazor Components Appearance](https://blazor.syncfusion.com/documentation/appearance/themes) documentation to learn more about theming and customization options. -Blazor components are now configured and ready to use. For additional guidance, refer to the Grid component's [getting‑started](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) documentation. +Blazor components are now configured and ready to use. For additional guidance, refer to the Blazor Grid component's [getting‑started](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) documentation. ### Step 2: Update the Blazor DataGrid @@ -449,7 +449,7 @@ The `Home.razor` component will display the reservation data in a Blazor DataGri **Instructions:** * Open the file named `Home.razor` in the `Components/Pages` folder. -* Add the following code to create a DataGrid with CustomAdaptor: +* Add the following code to create a Blazor DataGrid with CustomAdaptor: ```cshtml @page "/" @@ -479,16 +479,16 @@ The `Home.razor` component will display the reservation data in a Blazor DataGri - **`@rendermode InteractiveServer`**: Enables interactive server-side rendering for the component. - **`@inject ReservationRepository`**: Injects the repository to access database methods. -- **``**: The DataGrid component that displays data in rows and columns. -- **``**: Defines individual columns in the DataGrid. +- **``**: The Blazor DataGrid component that displays data in rows and columns. +- **``**: Defines individual columns in the Blazor DataGrid. -The Home component has been updated successfully with DataGrid. +The Home component has been updated successfully with Blazor DataGrid. ### Step 3: Implement the CustomAdaptor The Blazor DataGrid can bind data from a **SQL Server** database using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html) property to [CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) for scenarios that require full control over data operations. -The `CustomAdaptor` is a bridge between the DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. +The `CustomAdaptor` is a bridge between the Blazor DataGrid and the database. It handles all data operations including reading, searching, filtering, sorting, paging, and CRUD operations. Each operation in the CustomAdaptor's `ReadAsync` method handles specific grid functionality. The Blazor DataGrid sends operation details to the API through a [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. These details can be applied to the data source using methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. **Instructions:** @@ -507,8 +507,8 @@ The `CustomAdaptor` is a bridge between the DataGrid and the database. It handle } /// - /// CustomAdaptor class bridges DataGrid interactions with database operations using Dapper. - /// This adaptor handles all data retrieval and manipulation for the DataGrid. + /// CustomAdaptor class bridges Blazor DataGrid interactions with database operations using Dapper. + /// This adaptor handles all data retrieval and manipulation for the Blazor DataGrid. /// public class CustomAdaptor : DataAdaptor { @@ -619,7 +619,7 @@ The toolbar provides buttons for adding, editing, deleting records, and searchin Toolbar="@ToolbarItems"> - + ``` @@ -692,7 +692,7 @@ Paging divides large datasets into smaller pages to improve performance and usab - + ``` @@ -764,7 +764,7 @@ public async Task> GetReservationsAsync() **How Paging Works:** -- The DataGrid displays 20 records per page (as set in `GridPageSettings`). +- The Blazor DataGrid displays 20 records per page (as set in `GridPageSettings`). - Navigation buttons allow the user to move between pages. - When a page is requested, the `ReadAsync` method receives skip and take values. - The `DataOperations.PerformSkip()` and `DataOperations.PerformTake()` methods handle pagination. @@ -786,7 +786,7 @@ Searching allows the user to find records by entering keywords in the search box Toolbar="@ToolbarItems"> - + ``` @@ -843,10 +843,10 @@ Searching allows the user to find records by entering keywords in the search box **How Searching Works:** -- When the user enters text in the search box and presses Enter, the DataGrid sends a search request to the CustomAdaptor. +- When the user enters text in the search box and presses Enter, the Blazor DataGrid sends a search request to the CustomAdaptor. - The `ReadAsync` method receives the search criteria in `dataManagerRequest.Search`. - The `DataOperations.PerformSearching()` method filters the data based on the search term. -- Results are returned and displayed in the DataGrid. +- Results are returned and displayed in the Blazor DataGrid. Searching feature is now active. @@ -870,7 +870,7 @@ Filtering allows the user to restrict data based on column values using a menu i - + ``` * Update the `ReadAsync` method in the `CustomAdaptor` class to handle filtering: @@ -934,7 +934,7 @@ Filtering allows the user to restrict data based on column values using a menu i - Select filtering criteria (equals, contains, greater than, less than, etc.). - Click the "Filter" button to apply the filter. - The `ReadAsync` method receives the filter criteria in `dataManagerRequest.Where`. -- Results are filtered accordingly and displayed in the DataGrid. +- Results are filtered accordingly and displayed in the Blazor DataGrid. Filtering feature is now active. @@ -960,7 +960,7 @@ Sorting enables the user to arrange records in ascending or descending order bas - + ``` * Update the `ReadAsync` method in the `CustomAdaptor` class to handle sorting: @@ -1027,7 +1027,7 @@ Sorting enables the user to arrange records in ascending or descending order bas - Click again to sort in descending order. - The `ReadAsync` method receives the sort criteria in `dataManagerRequest.Sorted`. - The `DataOperations.PerformSorting()` method sorts the data based on the specified column and direction. -- Records are sorted accordingly and displayed in the DataGrid. +- Records are sorted accordingly and displayed in the Blazor DataGrid. Sorting feature is now active. @@ -1052,7 +1052,7 @@ Grouping organizes records into hierarchical groups based on column values. - + ``` @@ -1141,9 +1141,9 @@ Grouping feature is now active. ### Step 11: Perform CRUD operations -CustomAdaptor methods enable users to create, read, update, and delete records directly from the DataGrid. Each operation calls corresponding data layer methods in **ReservationRepository.cs** to execute SQL commands through Dapper. +CustomAdaptor methods enable users to create, read, update, and delete records directly from the Blazor DataGrid. Each operation calls corresponding data layer methods in **ReservationRepository.cs** to execute SQL commands through Dapper. -Add the Grid **EditSettings** and **Toolbar** configuration to enable create, read, update, and delete (CRUD) operations. +Add the Blazor Grid **EditSettings** and **Toolbar** configuration to enable create, read, update, and delete (CRUD) operations. ```cshtml - + ``` @@ -1172,7 +1172,7 @@ Add the toolbar items list in the `@code` block: **Insert** -Record insertion allows new reservations to be added directly through the DataGrid component. The adaptor processes the insertion request, performs any required business‑logic validation, and saves the newly created record to the SQL Server database via Dapper. +Record insertion allows new reservations to be added directly through the Blazor DataGrid component. The adaptor processes the insertion request, performs any required business‑logic validation, and saves the newly created record to the SQL Server database via Dapper. In **Home.razor**, implement the `InsertAsync` method within the `CustomAdaptor` class: @@ -1273,13 +1273,13 @@ private int CalculateNoOfDays(DateTime checkInDate, DateTime checkOutDate) 1. The form data is collected and validated in the CustomAdaptor's `InsertAsync()` method. 2. The `ReservationRepository.AddReservationAsync()` method is called. 3. Dapper's `ExecuteAsync()` method executes the INSERT query with parameterized values. -4. The DataGrid automatically refreshes to display the new record. +4. The Blazor DataGrid automatically refreshes to display the new record. Now the new reservation is persisted to the database and reflected in the grid. **Update** -Record modification allows reservation details to be updated directly within the DataGrid. The adaptor processes the edited row, validates the updated values, and applies the changes to the **SQL Server database** via Dapper while ensuring data integrity is preserved. +Record modification allows reservation details to be updated directly within the Blazor DataGrid. The adaptor processes the edited row, validates the updated values, and applies the changes to the **SQL Server database** via Dapper while ensuring data integrity is preserved. In **Home.razor**, implement the `UpdateAsync` method within the `CustomAdaptor` class: @@ -1349,13 +1349,13 @@ public async Task UpdateReservationAsync(Reservation? value) 3. The `ReservationRepository.UpdateReservationAsync()` method validates the reservation exists. 4. NoOfDays and TotalAmount are recalculated based on updated dates and amounts. 5. Dapper's `ExecuteAsync()` method executes the UPDATE query with parameterized values. -6. The DataGrid refreshes to display the updated record. +6. The Blazor DataGrid refreshes to display the updated record. Now modifications are synchronized to the database and reflected in the grid UI. **Delete** -Record deletion allows reservations to be removed directly from the DataGrid. The adaptor captures the delete request, executes the corresponding **SQL Server DELETE** operation via Dapper, and updates both the database and the grid to reflect the removal. +Record deletion allows reservations to be removed directly from the Blazor DataGrid. The adaptor captures the delete request, executes the corresponding **SQL Server DELETE** operation via Dapper, and updates both the database and the grid to reflect the removal. In **Home.razor**, implement the `RemoveAsync` method within the `CustomAdaptor` class: @@ -1400,11 +1400,11 @@ public async Task RemoveReservationAsync(int? key) **What happens behind the scenes:** 1. The user selects a record and clicks "Delete". -2. A confirmation dialog appears (built into the DataGrid). +2. A confirmation dialog appears (built into the Blazor DataGrid). 3. If confirmed, the CustomAdaptor's `RemoveAsync()` method is called. 4. The `ReservationRepository.RemoveReservationAsync()` method validates the reservation exists. 5. Dapper's `ExecuteAsync()` method executes the DELETE query. -6. The DataGrid refreshes to remove the deleted record from the UI. +6. The Blazor DataGrid refreshes to remove the deleted record from the UI. Now reservations are removed from the database and the grid UI reflects the changes immediately. @@ -1449,17 +1449,17 @@ public class CustomAdaptor : DataAdaptor } } ``` -> This method is triggered when the DataGrid is operating in [Batch](https://blazor.syncfusion.com/documentation/datagrid/batch-editing) Edit mode. +> This method is triggered when the Blazor DataGrid is operating in [Batch](https://blazor.syncfusion.com/documentation/datagrid/batch-editing) Edit mode. **What happens behind the scenes:** -- The DataGrid collects all added, edited, and deleted records in Batch Edit mode. +- The Blazor DataGrid collects all added, edited, and deleted records in Batch Edit mode. - The combined batch request is passed to the CustomAdaptor's `BatchUpdateAsync()` method. - Each modified record is processed using `ReservationRepository.UpdateReservationAsync()`. - Each newly added record is saved using `ReservationRepository.AddReservationAsync()`. - Each deleted record is removed using `ReservationRepository.RemoveReservationAsync()`. - All repository operations persist changes to the SQL Server database via Dapper. -- The DataGrid refreshes to display the updated, added, and removed records in a single response. +- The Blazor DataGrid refreshes to display the updated, added, and removed records in a single response. Now the adaptor supports bulk modifications with database synchronization. All CRUD operations are now fully implemented, enabling comprehensive data management capabilities within the Blazor DataGrid. @@ -1556,7 +1556,7 @@ Here is the complete and final `Home.razor` component with all features integrat } /// - /// CustomAdaptor class bridges DataGrid interactions with database operations using Dapper. + /// CustomAdaptor class bridges Blazor DataGrid interactions with database operations using Dapper. /// public class CustomAdaptor : DataAdaptor { @@ -1741,7 +1741,7 @@ This guide demonstrates how to: 3. Create data models for database mapping. [🔗](#step-3-create-the-data-model) 4. Configure connection strings for SQL Server. [🔗](#step-4-configure-the-connection-string) 5. Implement the repository pattern with Dapper for efficient data access. [🔗](#step-5-create-the-repository-class) -6. Create a Blazor component with a DataGrid that supports searching, filtering, sorting, paging, and CRUD operations. [🔗](#step-1-install-and-configure-blazor-datagrid-components) +6. Create a Blazor component with a Blazor DataGrid that supports searching, filtering, sorting, paging, and CRUD operations. [🔗](#step-1-install-and-configure-blazor-datagrid-components) 7. Handle bulk operations and batch updates. [🔗](#step-10-perform-crud-operations) The application now provides a complete solution for managing reservation data with a modern, user-friendly interface using Dapper for high-performance database access. \ No newline at end of file diff --git a/blazor/datagrid/connecting-to-ORM/entityframework.md b/blazor/datagrid/connecting-to-ORM/entityframework.md index e76083a913..cfd280e4b2 100644 --- a/blazor/datagrid/connecting-to-ORM/entityframework.md +++ b/blazor/datagrid/connecting-to-ORM/entityframework.md @@ -29,7 +29,7 @@ The Microsoft.EntityFrameworkCore.SqlServer package is the provider that connect **What is UrlAdaptor?** -UrlAdaptor is a DataManager adaptor that communicates with REST API endpoints for all grid operations. The DataGrid sends read, insert, update, delete, and batch requests to controller actions, which use Entity Framework core to access SQL Server. +UrlAdaptor is a DataManager adaptor that communicates with REST API endpoints for all grid operations. The Blazor DataGrid sends read, insert, update, delete, and batch requests to controller actions, which use Entity Framework core to access SQL Server. ## Prerequisites @@ -40,8 +40,8 @@ Ensure the following software and packages are installed before proceeding: | Visual Studio 2026 | 18.0 or later | Development IDE with Blazor workload | | .NET SDK | net10.0 or compatible | Runtime and build tools | | SQL Server | 2019 or later | Database server | -| Syncfusion.Blazor.Grid | {{site.blazorversion}} | DataGrid and UI components | -| Syncfusion.Blazor.Themes | {{site.blazorversion}} | Styling for DataGrid components | +| Syncfusion.Blazor.Grid | {{site.blazorversion}} | Blazor DataGrid and UI components | +| Syncfusion.Blazor.Themes | {{site.blazorversion}} | Styling for Blazor DataGrid components | | Microsoft.EntityFrameworkCore | 10.0.2 | Core framework for database operations | | Microsoft.EntityFrameworkCore.SqlServer | 10.0.2 | SQL Server provider for Entity Framework Core | @@ -233,7 +233,7 @@ A connection string contains the information needed to connect the application t The database connection string has been configured successfully. -### Step 6: Create the Grid API Controller +### Step 6: Create the Blazor Grid API Controller A controller exposes REST API endpoints for the grid to read data. This step adds minimal `POST` endpoint that return empty results. Additional CRUD and batch endpoints will be added later when configuring UrlAdaptor. @@ -338,7 +338,7 @@ app.Run(); ### Step 1: Install and Configure Blazor DataGrid Components -Syncfusion is a library that provides pre-built UI components like DataGrid, which is used to display data in a table format. +Syncfusion is a library that provides pre-built UI components like Blazor DataGrid, which is used to display data in a table format. **Instructions:** @@ -364,7 +364,7 @@ Syncfusion is a library that provides pre-built UI components like DataGrid, whi For this project, the **fluent** theme is used. A different theme can be selected or customized based on project requirements. Refer to the [Blazor Components Appearance](https://blazor.syncfusion.com/documentation/appearance/themes) documentation to learn more about theming and customization options. -Blazor components are now configured and ready to use. For additional guidance, refer to the Grid component's [getting‑started](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) documentation. +Blazor components are now configured and ready to use. For additional guidance, refer to the Blazor Grid component's [getting‑started](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) documentation. ### Step 2: Update the Blazor DataGrid @@ -429,7 +429,7 @@ The `Home.razor` component will display the order data in a Blazor DataGrid with **Component Explanation:** -- **``**: The DataGrid component that displays order data in rows and columns. +- **``**: The Blazor DataGrid component that displays order data in rows and columns. - **``**: Manages data communication with REST API endpoints using UrlAdaptor. The `Url` property points to the read endpoint, while `InsertUrl`, `UpdateUrl`, `RemoveUrl`, and `BatchUrl` point to CRUD endpoints. - **`AllowPaging="true"`**: Enables pagination to display records in pages of 10 records each. - **`AllowFiltering="true"`**: Enables column filtering with menu-based filters. @@ -442,7 +442,7 @@ The `Home.razor` component will display the order data in a Blazor DataGrid with - **`Toolbar`**: "Add", "Edit", "Delete", "Update", "Cancel", "Search" for CRUD and search operations. - **``**: Displays summary calculations (Sum, Count, Average, Min, Max) in footer rows. The `` shows aggregates for each group, while `` displays aggregates for the entire grid at the bottom. -> In **URL Adaptor**, the DataGrid component handles grouping and aggregation operations automatically. +> In **URL Adaptor**, the Blazor DataGrid component handles grouping and aggregation operations automatically. ### Step 3: Implement the Endpoints for UrlAdaptor @@ -588,9 +588,9 @@ The application will start, and the console will display the local URL (typicall 1. Open a web browser. 2. Navigate to the URL displayed in the console. -3. The DataGrid application is now running and ready to use. +3. The Blazor DataGrid application is now running and ready to use. -![Basic DataGrid displaying orders from the SQL Server database](../images/blazor-datagrid-ef-url.webp) +![Basic Blazor DataGrid displaying orders from the SQL Server database](../images/blazor-datagrid-ef-url.webp) ### Step 5: Implement Paging Feature @@ -702,10 +702,10 @@ public object Post([FromBody] DataManagerRequest dataManagerRequest) **How Searching Works:** -- When the user enters text in the search box and presses Enter, the DataGrid sends a search request to the REST API. +- When the user enters text in the search box and presses Enter, the Blazor DataGrid sends a search request to the REST API. - The `Post` method receives the search criteria in `dataManagerRequest.Search`. - The `DataOperations.PerformSearching()` method filters the data based on the search term across all columns. -- Results are returned and displayed in the DataGrid with pagination applied. +- Results are returned and displayed in the Blazor DataGrid with pagination applied. Searching feature is now active. @@ -783,7 +783,7 @@ public object Post([FromBody] DataManagerRequest dataManagerRequest) - Click the "Filter" button to apply the filter. - The `Post` method receives the filter criteria in `dataManagerRequest.Where`. - The `DataOperations.PerformFiltering()` method applies the filter conditions to the data. -- Results are filtered accordingly and displayed in the DataGrid. +- Results are filtered accordingly and displayed in the Blazor DataGrid. Filtering feature is now active. @@ -867,7 +867,7 @@ public object Post([FromBody] DataManagerRequest dataManagerRequest) - Click again to sort in descending order. - The `Post` method receives the sort criteria in `dataManagerRequest.Sorted`. - The `DataOperations.PerformSorting()` method sorts the data based on the specified column and direction. -- Records are sorted accordingly and displayed in the DataGrid. +- Records are sorted accordingly and displayed in the Blazor DataGrid. Sorting feature is now active. @@ -875,7 +875,7 @@ Sorting feature is now active. ### Step 9: Perform CRUD Operations -CRUD operations (Create, Read, Update, Delete) enable users to manage data directly from the DataGrid. The REST API endpoints in the controller handle all database operations using Entity Framework Core. +CRUD operations (Create, Read, Update, Delete) enable users to manage data directly from the Blazor DataGrid. The REST API endpoints in the controller handle all database operations using Entity Framework Core. **Instructions:** @@ -907,7 +907,7 @@ CRUD operations (Create, Read, Update, Delete) enable users to manage data direc **Insert (Create)** -Record insertion allows new orders to be added directly through the DataGrid component. The `Insert` endpoint processes the insertion request and saves the newly created record to the SQL Server database. +Record insertion allows new orders to be added directly through the Blazor DataGrid component. The `Insert` endpoint processes the insertion request and saves the newly created record to the SQL Server database. In **Controllers/GridController.cs**, the insert method is implemented as: @@ -934,15 +934,15 @@ public void Insert([FromBody] CRUDModel value) **What happens behind the scenes:** 1. The user clicks the "Add" button and fills in the form. -2. The DataGrid sends a POST request to `http://localhost:5175/api/Grid/Insert`. +2. The Blazor DataGrid sends a POST request to `http://localhost:5175/api/Grid/Insert`. 3. The `Insert` method receives the new order data in `value.Value`. 4. Entity Framework Core adds the record to the `_context.Orders` collection. 5. `SaveChanges()` persists the record to the SQL Server database. -6. The DataGrid automatically refreshes to display the new order. +6. The Blazor DataGrid automatically refreshes to display the new order. **Update (Edit)** -Record modification allows order details to be updated directly within the DataGrid. The `Update` endpoint processes the edited row and applies the changes to the SQL Server database. +Record modification allows order details to be updated directly within the Blazor DataGrid. The `Update` endpoint processes the edited row and applies the changes to the SQL Server database. In **Controllers/GridController.cs**, the update method is implemented as: @@ -973,16 +973,16 @@ public void Update([FromBody] CRUDModel value) **What happens behind the scenes:** 1. The user clicks the "Edit" button and modifies the record. -2. The DataGrid sends a POST request to `http://localhost:5175/api/Grid/Update`. +2. The Blazor DataGrid sends a POST request to `http://localhost:5175/api/Grid/Update`. 3. The `Update` method receives the modified order data in `value.Value`. 4. The existing order is retrieved from the database by its ID. 5. The properties are updated with the new values using `SetValues()`. 6. `SaveChanges()` persists the changes to the SQL Server database. -7. The DataGrid refreshes to display the updated order. +7. The Blazor DataGrid refreshes to display the updated order. **Delete (Remove)** -Record deletion allows orders to be removed directly from the DataGrid. The `Delete` endpoint executes the corresponding SQL Server DELETE operation and updates both the database and the grid. +Record deletion allows orders to be removed directly from the Blazor DataGrid. The `Delete` endpoint executes the corresponding SQL Server DELETE operation and updates both the database and the grid. In **Controllers/GridController.cs**, the delete method is implemented as: @@ -1014,13 +1014,13 @@ public void Delete([FromBody] CRUDModel value) **What happens behind the scenes:** 1. The user selects an order and clicks "Delete". -2. A confirmation dialog appears (built into the DataGrid). -3. If confirmed, the DataGrid sends a POST request to `http://localhost:5175/api/Grid/Delete`. +2. A confirmation dialog appears (built into the Blazor DataGrid). +3. If confirmed, the Blazor DataGrid sends a POST request to `http://localhost:5175/api/Grid/Delete`. 4. The `Delete` method extracts the order ID from `value.Key`. 5. The order is located in the database by its ID. 6. The order is removed from the `_context.Orders` collection. 7. `SaveChanges()` executes the DELETE statement in SQL Server. -8. The DataGrid refreshes to remove the deleted order from the UI. +8. The Blazor DataGrid refreshes to remove the deleted order from the UI. **Batch Operations (Multiple CRUD in one request)** @@ -1074,13 +1074,13 @@ public void Batch([FromBody] CRUDModel value) **What happens behind the scenes:** -- The DataGrid collects all added, edited, and deleted records. +- The Blazor DataGrid collects all added, edited, and deleted records. - All changes are sent in a single POST request to `http://localhost:5175/api/Grid/BatchUpdate`. - The `Batch` method processes changed records using `UpdateRange()`. - The `Batch` method processes added records using `AddRange()`. - The `Batch` method processes deleted records using `Remove()`. - All operations are saved to the database in a single `SaveChanges()` call for transactional consistency. -- The DataGrid refreshes to display all changes. +- The Blazor DataGrid refreshes to display all changes. All CRUD operations are now fully implemented, enabling comprehensive data management capabilities within the Blazor DataGrid. diff --git a/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md b/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md index 11aba32abe..a1013f9f97 100644 --- a/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md +++ b/blazor/datagrid/connecting-to-adaptors/custom-adaptor.md @@ -12,7 +12,7 @@ documentation: ug The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors, enabling you to perform manual operations on the data. This feature is useful for implementing custom data binding and editing operations in the Blazor DataGrid. -To implement custom data binding in the Grid, the **DataAdaptor** class is used. This abstract class serves as a base class for the custom adaptor. +To implement custom data binding in the Blazor Grid, the **DataAdaptor** class is used. This abstract class serves as a base class for the custom adaptor. The **DataAdaptor** abstract class includes both synchronous and asynchronous method signatures, which can be overridden in the custom adaptor. The following are the method signatures available in this class: @@ -70,7 +70,7 @@ public abstract class DataAdaptor } ``` -To learn more about **Custom Binding** in the Grid, watch this video: +To learn more about **Custom Binding** in the Blazor Grid, watch this video: {% youtube "youtube:https://www.youtube.com/watch?v=LmdUGJBUJqE" %} @@ -178,7 +178,7 @@ The following sample code demonstrates how to implement custom data binding usin > If the **DataManagerRequest.RequiresCounts** value is **true**, the `Read/ReadAsync` return value must be of type **DataResult** with properties **Result** (a collection of records) and **Count** (the total number of records). If the **DataManagerRequest.RequiresCounts** is **false**, simply return the collection of records. -The following image shows the custom-bound data displayed in the Grid: +The following image shows the custom-bound data displayed in the Blazor Grid: ![Custom Binding in Grid](../images/blazor-datagrid-custom-binding.webp) @@ -469,7 +469,7 @@ You can find the complete code in the [Github](https://github.com/SyncfusionExam ## Handling searching operation -When using a custom adaptor, the searching operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` class provides Grid action details, including search criteria. +When using a custom adaptor, the searching operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` class provides Blazor Grid action details, including search criteria. ![Handling Searching in Custom Adaptor](../images/blazor-datagrid-searching-in-custom-adaptor.webp) @@ -541,9 +541,9 @@ When using a custom adaptor, the filtering operation must be handled by overridi ![Handling Filtering in Custom Adaptor](../images/blazor-datagrid-filtering-in-custom-adaptor.webp) -Based on these Grid action details, a custom data source can be filtered using the built-in `PerformFiltering` method of the `DataOperations` class. +Based on these Blazor Grid action details, a custom data source can be filtered using the built-in `PerformFiltering` method of the `DataOperations` class. -> You can also use your own method to perform the filtering operation and bind the resultant data to the Grid. +> You can also use your own method to perform the filtering operation and bind the resultant data to the Blazor Grid. The following sample code demonstrates how to implement the filtering operation for custom-bound data: @@ -609,13 +609,13 @@ The following sample code demonstrates how to implement the filtering operation ## Handling sorting operation -When using a custom adaptor, the sorting operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` class provides Grid action details, as shown in the image below: +When using a custom adaptor, the sorting operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` class provides Blazor Grid action details, as shown in the image below: ![Handling Sorting in Custom Adaptor](../images/blazor-datagrid-sorting-in-custom-adaptor.webp) -Based on these Grid action details, a custom data source can be sorted using the built-in `PerformSorting` method of the `DataOperations` class. +Based on these Blazor Grid action details, a custom data source can be sorted using the built-in `PerformSorting` method of the `DataOperations` class. -N> Alternatively, you can use your own method to perform the sorting operation and bind the resultant data to the Grid. +N> Alternatively, you can use your own method to perform the sorting operation and bind the resultant data to the Blazor Grid. The following sample code demonstrates how to implement the sorting operation for custom-bound data: @@ -681,7 +681,7 @@ The following sample code demonstrates how to implement the sorting operation fo ## Handling paging operation -When using a custom adaptor, the paging operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` class provides Grid action details, including skip and take values for paging. +When using a custom adaptor, the paging operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` class provides Blazor Grid action details, including skip and take values for paging. ![Handling Paging in Custom Adaptor](../images/blazor-datagrid-paging-in-custom-adaptor.webp) @@ -957,14 +957,14 @@ You can find the complete code in the [Github](https://github.com/SyncfusionExam ## Handling CRUD operations -The CRUD operations for custom-bound data in the Blazor DataGrid can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class: +The CRUD operations for custom-bound data in the Blazor DataTable can be implemented by overriding the following CRUD methods of the **DataAdaptor** abstract class: * **Insert/InsertAsync** * **Remove/RemoveAsync** * **Update/UpdateAsync** * **BatchUpdate/BatchUpdateAsync** -N> When using batch editing in the Grid, use the BatchUpdate/BatchUpdateAsync method to handle the corresponding CRUD operation. +N> When using batch editing in the Blazor Grid, use the BatchUpdate/BatchUpdateAsync method to handle the corresponding CRUD operation. The following sample code demonstrates how to implement CRUD operations for custom-bound data: @@ -1098,9 +1098,9 @@ The following sample code demonstrates how to implement CRUD operations for cust } ``` -The following GIF demonstrates the CRUD operations on custom-bound data in the Grid: +The following GIF demonstrates the CRUD operations on custom-bound data in the Blazor Grid: -![Editing Custom Data in Grid](../images/blazor-datagrid-editing-custom-data.webp) +![Editing Custom Data in Blazor Grid](../images/blazor-datagrid-editing-custom-data.webp) You can find the complete code in the [Github](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/CustomAdaptor). @@ -1110,11 +1110,11 @@ You can find the complete code in the [Github](https://github.com/SyncfusionExam The Blazor DataGrid allows you to send custom parameters with each data request. This is particularly useful when you need to pass additional information (e.g., user role, token, or filters) to the server for enhanced processing logic. -You can achieve this by using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the grid along with the `AddParams` method of the `Query` class. +You can achieve this by using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the Blazor Grid along with the `AddParams` method of the `Query` class. -To enable custom parameters in data requests for the Grid, follow these steps: +To enable custom parameters in data requests for the Blazor Grid, follow these steps: -1. **Bind the Query Object to the Grid:** +1. **Bind the Query Object to the Blazor Grid:** Assign the initialized `Query` object to the DataGrid’s `Query` property. 2. **Initialize the Query Object:** Create a new instance of the `Query` class and use the `AddParams` method to add your custom parameters. diff --git a/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md b/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md index edcab51012..d0b96bd94a 100644 --- a/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md +++ b/blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md @@ -31,8 +31,8 @@ Install the following software and packages before starting the process: | Visual Studio 2026 | 18.0 or later | Development IDE with Blazor workload | | .NET SDK | net8.0 or compatible | Runtime and build tools | | HotChocolate.AspNetCore | 15.1 or later | GraphQL server framework | -| Syncfusion.Blazor.Grid | {{site.blazorversion}} | DataGrid component | -| Syncfusion.Blazor.Themes | {{site.blazorversion}} | Styling for DataGrid | +| Syncfusion.Blazor.Grid | {{site.blazorversion}} | Blazor DataGrid component | +| Syncfusion.Blazor.Themes | {{site.blazorversion}} | Styling for Blazor DataGrid | ## Setting Up the GraphQL Backend @@ -44,13 +44,13 @@ For this guide, a Blazor application named **Grid_GraphQLAdaptor** has been crea **Install NuGet Packages** -NuGet packages are software libraries that add functionality to applications. The following packages enable GraphQL server functionality+ and DataGrid components. +NuGet packages are software libraries that add functionality to applications. The following packages enable GraphQL server functionality+ and Blazor DataGrid components. **Required Packages:** - **HotChocolate.AspNetCore** (version 15.1 or later) - GraphQL server framework -- **Syncfusion.Blazor.Grid** (version {{site.blazorversion}}) - DataGrid component -- **Syncfusion.Blazor.Themes** (version {{site.blazorversion}}) - Styling for DataGrid +- **Syncfusion.Blazor.Grid** (version {{site.blazorversion}}) - Blazor DataGrid component +- **Syncfusion.Blazor.Themes** (version {{site.blazorversion}}) - Styling for Blazor DataGrid **Method 1: Using Package Manager Console** @@ -296,7 +296,7 @@ public class GraphQLQuery // Retrieve all expense records from the data source. List dataSource = ExpenseRecord.GetAllRecords(); - // Apply search, filter, sort, and paging operations as provided by the DataGrid. + // Apply search, filter, sort, and paging operations as provided by the Blazor DataGrid. // Operations are applied sequentially: search → filter → sort → paging. // Store the total count before paging. @@ -323,9 +323,9 @@ public class ExpenseRecordDataResponse **Details:** -- The `GetExpenseRecordData` method receives `DataManagerRequestInput`, which contains filter, sort, search, and paging parameters from the DataGrid +- The `GetExpenseRecordData` method receives `DataManagerRequestInput`, which contains filter, sort, search, and paging parameters from the Blazor DataGrid - Hot Chocolate automatically converts the method name `GetExpenseRecordData` to camelCase: `expenseRecordData` in the GraphQL schema -- The response must contain `Count` (total records) and `Result` (current page data) for the DataGrid to process pagination +- The response must contain `Count` (total records) and `Result` (current page data) for the Blazor DataGrid to process pagination The query resolver has been created successfully. @@ -336,7 +336,7 @@ The query resolver has been created successfully. A **DataManagerRequestInput** class is a GraphQL input type that represents all the parameters the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) sends to the backend when requesting data. This class acts as a container for filtering, sorting, searching, paging, and other data operation parameters. **Purpose** -When the DataGrid performs operations like pagination, sorting, filtering, or searching, it packages all these parameters into a `DataManagerRequestInput` object and sends it to the GraphQL backend. The backend then uses these parameters to fetch and return only the data the grid needs. +When the Blazor DataGrid performs operations like pagination, sorting, filtering, or searching, it packages all these parameters into a `DataManagerRequestInput` object and sends it to the GraphQL backend. The backend then uses these parameters to fetch and return only the data the Blazor Grid needs. **Instructions**: @@ -488,7 +488,7 @@ public class WhereFilter **Understanding the DataManagerRequestInput Class** -**Example Scenario:** A sequence of operations is performed on the DataGrid as follows: +**Example Scenario:** A sequence of operations is performed on the Blazor DataGrid as follows: - Searches for **"Finance"** in the Department column. - Filters for amounts greater than 1000. @@ -570,13 +570,13 @@ namespace Grid_GraphQLAdaptor.Models { /// /// GraphQL Mutation class that handles all write operations (Create, Update, Delete). - /// Each method is a resolver that processes data modification requests from the DataGrid. + /// Each method is a resolver that processes data modification requests from the Blazor DataGrid. /// public class GraphQLMutation { /// /// Mutation resolver for creating a new expense record. - /// Called when a user clicks the "Add" button in the DataGrid and submits a new record. + /// Called when a user clicks the "Add" button in the Blazor DataGrid and submits a new record. /// public ExpenseRecord CreateExpense( ExpenseRecord record, @@ -622,7 +622,7 @@ namespace Grid_GraphQLAdaptor.Models A mutation resolver is a C# method decorated with GraphQL attributes that: -- **Receives input parameters** from the DataGrid (record data, primary keys, etc.). +- **Receives input parameters** from the Blazor DataGrid (record data, primary keys, etc.). - **Processes the operation** (validation, calculation, data modification). - **Persists changes** to the data source (database, file, memory). - **Returns results** to the client (modified record or success/failure status). @@ -635,7 +635,7 @@ The GraphQL Mutation class has been successfully created and is ready to handle ### Step 1: Install and Configure Blazor DataGrid Components with GraphQL -Syncfusion is a library that provides pre-built UI components like DataGrid, which is used to display data in a table format. +Syncfusion is a library that provides pre-built UI components like Blazor DataGrid, which is used to display data in a table format. **Instructions:** @@ -664,7 +664,7 @@ Syncfusion is a library that provides pre-built UI components like DataGrid, whi ``` For this project, the tailwind3 theme is used. A different theme can be selected or the existing theme can be customized based on project requirements. Refer to the [Blazor Components Appearance](https://blazor.syncfusion.com/documentation/appearance/themes) documentation to learn more about theming and customization options. -Blazor components are now configured and ready to use. For additional guidance, refer to the Grid component’s [getting‑started](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) documentation. +Blazor components are now configured and ready to use. For additional guidance, refer to the Blazor Grid component’s [getting‑started](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) documentation. ### Step 2: Update the Blazor DataGrid @@ -673,7 +673,7 @@ The `Home.razor` component will display the expense data in a Blazor DataGrid wi **Instructions:** 1. Open the file named `Home.razor` in the `Components/Pages` folder. -2. Add the following code to create a basic DataGrid: +2. Add the following code to create a basic Blazor DataGrid: ```cshtml @page "/" @@ -710,13 +710,13 @@ The `Home.razor` component will display the expense data in a Blazor DataGrid wi **Component Explanation:** - **`@rendermode InteractiveServer`**: Enables interactive server-side rendering for the component. -- **``**: The DataGrid component that displays data in rows and columns. -- **``**: Defines individual columns in the DataGrid. +- **``**: The Blazor DataGrid component that displays data in rows and columns. +- **``**: Defines individual columns in the Blazor DataGrid. - **``**: Configures pagination with 10 records per page. -- **``**: Enable editing functionality directly within the Grid by setting the AllowEditing, AllowAdding, and AllowDeleting properties within the GridEditSettings to **true**. +- **``**: Enable editing functionality directly within the Blazor Grid by setting the AllowEditing, AllowAdding, and AllowDeleting properties within the GridEditSettings to **true**. - **` @@ -73,7 +73,7 @@ To export template columns to a PDF document: public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { - if (args.Item.Id == "Grid_pdfexport") // Id is the combination of Grid's ID and item name. + if (args.Item.Id == "Grid_pdfexport") // Id is the combination of Blazor Grid's ID and item name. { PdfExportProperties ExportProperties = new PdfExportProperties(); ExportProperties.IncludeTemplateColumn = true; // Ensures template columns are included in the export. @@ -150,7 +150,7 @@ The Blazor DataGrid supports exporting grouped data along with a custom caption To customize group caption text in the exported PDF document: 1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event to trigger the export. -2. Use the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method to export the DataGrid. +2. Use the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method to export the Blazor DataGrid. 3. Handle the [PdfGroupCaptionTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfGroupCaptionTemplateInfo) event to customize the group caption text. 4. Use the **args.Cell.Value** property to define the caption using values such as **group key**, **record count**, and **header text**. @@ -262,7 +262,7 @@ public class OrderData The Blazor DataGrid supports exporting both parent and child (detail) records, including nested data, to a PDF document. -By default, the DataGrid exports only the parent rows along with expanded detail rows. To customize this behavior, configure the [PdfDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailRowMode.html) property of [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) inside the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event, and pass it to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method. +By default, the Blazor DataGrid exports only the parent rows along with expanded detail rows. To customize this behavior, configure the [PdfDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailRowMode.html) property of [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) inside the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event, and pass it to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method. **Available Modes** @@ -311,7 +311,7 @@ To format and customize the detail rows in the exported PDF document: - Contact: @employee.Contact + Contact: @employee.Contact @@ -380,7 +380,7 @@ To format and customize the detail rows in the exported PDF document: public List Employees { get; set; } public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { - if (args.Item.Id == "Grid_pdfexport") // Id is the combination of Grid's ID and item name. + if (args.Item.Id == "Grid_pdfexport") // Id is the combination of Blazor Grid's ID and item name. { PdfExportProperties PdfExportProperties = new PdfExportProperties(); PdfExportProperties.PdfDetailRowMode = PdfDetailRowMode.Expand; @@ -618,7 +618,7 @@ The Blazor DataGrid supports exporting hierarchical data to a PDF document using To export hierarchical DataGrid data to a PDF document: -1. Define a [DetailTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_DetailTemplate) in the DataGrid to render child content under each parent row. +1. Define a [DetailTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_DetailTemplate) in the Blazor DataGrid to render child content under each parent row. 2. In the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event, create an instance of [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) and set the [PdfDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailRowMode.html) property to `Expand`. 3. Handle the [PdfDetailTemplateExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfDetailTemplateExporting) event to format the detail rows using the [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_PdfDetailTemplateRowSettings_Headers) and [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_PdfDetailTemplateRowSettings_Rows) properties. 4. If nested child levels are present, use the [ChildRowInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailTemplateRow.html#Syncfusion_Blazor_Grids_PdfDetailTemplateRow_ChildRowInfo) property. @@ -687,7 +687,7 @@ To export hierarchical DataGrid data to a PDF document: // Handles toolbar click event (for PDF export). public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { - if (args.Item.Id == "Grid_pdfexport") // Id is the combination of Grid's ID and item name. + if (args.Item.Id == "Grid_pdfexport") // Id is the combination of Blazor Grid's ID and item name. { PdfExportProperties PdfExportProperties = new PdfExportProperties(); diff --git a/blazor/datagrid/templates-excel-export.md b/blazor/datagrid/templates-excel-export.md index 8486c78a32..d443651f9f 100644 --- a/blazor/datagrid/templates-excel-export.md +++ b/blazor/datagrid/templates-excel-export.md @@ -15,7 +15,7 @@ The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagr * [Caption Template](https://blazor.syncfusion.com/documentation/datagrid/caption-template): Group caption rows with customized display elements. * [Detail Template](https://blazor.syncfusion.com/documentation/datagrid/detail-template): Expanded row content that can include nested data or custom layouts. -These templates are preserved during export, allowing the resulting Excel file to reflect the visual and structural formatting defined in the Grid. +These templates are preserved during export, allowing the resulting Excel file to reflect the visual and structural formatting defined in the Blazor Grid. ## Exporting with column template @@ -54,7 +54,7 @@ The **FirstName** and **EmailID** columns are rendered using templates and expor @{ var employee = (context as EmployeeData); } - @employee.EmailID + @employee.EmailID @@ -73,7 +73,7 @@ The **FirstName** and **EmailID** columns are rendered using templates and expor public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { - if (args.Item.Id == "Grid_excelexport") // Id is the combination of Grid's ID and item name. + if (args.Item.Id == "Grid_excelexport") // Id is the combination of Blazor Grid's ID and item name. { ExcelExportProperties ExportProperties = new ExcelExportProperties(); ExportProperties.IncludeTemplateColumn = true; @@ -90,7 +90,7 @@ The **FirstName** and **EmailID** columns are rendered using templates and expor else if (args.Column.Field == "EmailID") { var email = args.Data.EmailID; - args.Cell.Value = $"{email}"; + args.Cell.Value = $"{email}"; } } } @@ -150,7 +150,7 @@ The Blazor DataGrid supports exporting grouped data along with a custom caption To customize group caption text in the exported Excel document: 1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event to trigger the export. -2. Use the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method to export the Grid. +2. Use the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method to export the Blazor Grid. 3. Handle the [ExcelGroupCaptionTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelGroupCaptionTemplateInfo) event to customize the group caption text. 4. Use the **args.Cell.Value** property to define the caption using values like group key, record count, and header text. @@ -191,7 +191,7 @@ To customize group caption text in the exported Excel document: public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { - if (args.Item.Id == "Grid_excelexport") // Id is the combination of Grid's ID and item name. + if (args.Item.Id == "Grid_excelexport") // Id is the combination of Blazor Grid's ID and item name. { if (args.Item.Id == "Grid_excelexport") { @@ -424,7 +424,7 @@ public class ProductInfo The Blazor DataGrid supports exporting both parent and child (detail) records including nested data to an Excel document. -By default, the Grid exports only the parent rows along with expanded detail rows. To customize this behavior, configure the [ExcelDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_ExcelDetailRowMode) property of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) inside the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event, and pass it to the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method. +By default, the Blazor Grid exports only the parent rows along with expanded detail rows. To customize this behavior, configure the [ExcelDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_ExcelDetailRowMode) property of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) inside the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event, and pass it to the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method. **Available Modes** @@ -471,7 +471,7 @@ To format and customize the detail rows in the exported Excel document: - Contact: @employee.Contact + Contact: @employee.Contact @@ -764,7 +764,7 @@ The Blazor DataGrid supports exporting hierarchical data to Excel using the deta To export hierarchical Grid data to an Excel document: -1. Define a [DetailTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_DetailTemplate) in the Grid to render child content under each parent row. +1. Define a [DetailTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_DetailTemplate) in the Blazor Grid to render child content under each parent row. 2. In the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event, create an instance of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) and set the [ExcelExportProperties.ExcelDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailRowMode.html) property to **Expand**. 3. Handle the [ExcelDetailTemplateExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelDetailTemplateExporting) event to format the detail rows using the [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRowSettings_Headers) and [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRowSettings_Rows)properties. 4. If nested child levels are present, use the [ChildRowInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRow.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRow_ChildRowInfo) property. @@ -834,7 +834,7 @@ To export hierarchical Grid data to an Excel document: // Handles toolbar click event (for Excel export). public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { - // Id is the combination of Grid's ID and item name. + // Id is the combination of Blazor Grid's ID and item name. if (args.Item.Id == "Grid_excelexport") { ExcelExportProperties ExportProperties = new ExcelExportProperties(); diff --git a/blazor/datagrid/tool-bar.md b/blazor/datagrid/tool-bar.md index e9c329bdaf..36e65bfe2e 100644 --- a/blazor/datagrid/tool-bar.md +++ b/blazor/datagrid/tool-bar.md @@ -88,7 +88,7 @@ The toolbar can be configured with built-in toolbar items or custom items using Enable or disable toolbar items dynamically to control which actions are available based on application logic or user interactions. -Toolbar items in the Blazor DataGrid can be enabled or disabled dynamically using the [EnableToolbarItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableToolbarItemsAsync_System_Collections_Generic_List_System_String__System_Boolean_) method. This provides programmatic control over the availability of specific items by their IDs. For built-in toolbar items specified with strings, the Grid generates IDs (for example, **Grid_Add, Grid_Edit**). For custom items created with ItemModel, set the Id property explicitly and use it when enabling or disabling items. +Toolbar items in the Blazor DataGrid can be enabled or disabled dynamically using the [EnableToolbarItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableToolbarItemsAsync_System_Collections_Generic_List_System_String__System_Boolean_) method. This provides programmatic control over the availability of specific items by their IDs. For built-in toolbar items specified with strings, the Blazor Grid generates IDs (for example, **Grid_Add, Grid_Edit**). For custom items created with ItemModel, set the Id property explicitly and use it when enabling or disabling items. {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/toolbar-items.md b/blazor/datagrid/toolbar-items.md index 0d93e223f5..d781d36c1b 100644 --- a/blazor/datagrid/toolbar-items.md +++ b/blazor/datagrid/toolbar-items.md @@ -9,7 +9,7 @@ documentation: ug # Toolbar Items in Blazor Data Grid -The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) offers a flexible toolbar that enables the addition of custom toolbar items or modification of existing ones. The toolbar appears above the DataGrid, providing convenient access to common actions and custom functionality. +The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) offers a flexible toolbar that enables the addition of custom toolbar items or modification of existing ones. The toolbar appears above the Blazor Grid, providing convenient access to common actions and custom functionality. ## Built-in Toolbar item @@ -19,19 +19,19 @@ Add them by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfus | Built-in Toolbar Items | Actions | |------------------------|---------| -| Add | Adds a new row to the DataGrid. | +| Add | Adds a new row to the Blazor DataGrid. | | Edit | Puts the selected row into edit mode. | | Update | Saves changes made during edit mode. | | Delete | Deletes the selected record. | | Cancel | Discards changes made during edit mode. | | Search | Displays a search box to filter the records. | -| Print | Prints the DataGrid content. | +| Print | Prints the Blazor DataGrid content. | | ColumnChooser | Opens the Column Chooser to toggle column visibility. | -| PdfExport | Exports DataGrid data to a PDF file. | -| ExcelExport | Exports DataGrid data to an Excel file. | -| CsvExport | Exports DataGrid data to a CSV file. | +| PdfExport | Exports Blazor DataGrid data to a PDF file. | +| ExcelExport | Exports Blazor DataGrid data to an Excel file. | +| CsvExport | Exports Blazor DataGrid data to a CSV file. | -N> Built-in item IDs are typically prefixed with the grid ID (for example, Grid_add). Use these IDs in event handlers for robust detection. +N> Built-in item IDs are typically prefixed with the Blazor Grid ID (for example, Grid_add). Use these IDs in event handlers for robust detection. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -569,7 +569,7 @@ By default, custom toolbar items are aligned on the left. Modify the position by ## Customize the text name of custom Toolbar Items with same as default Toolbar Items -When creating custom toolbar items using the same text as default items (such as Add, Edit, or Delete), the DataGrid may treat them as default items. This can lead to unexpected behavior—for example, the buttons may be disabled in certain states. +When creating custom toolbar items using the same text as default items (such as Add, Edit, or Delete), the Blazor DataGrid may treat them as default items. This can lead to unexpected behavior—for example, the buttons may be disabled in certain states. To avoid this behavior and ensure proper functionality: @@ -680,14 +680,14 @@ Customize a toolbar item’s tooltip text by adding items externally and setting public List Orders { get; set; } private List ToolbarItems = new List() { - new ItemModel() { Text = "Excel",TooltipText="Export to Excel", PrefixIcon = "e-excelexport", Id = "Grid_excelexport"}, //Here Grid is SfGrid ID. + new ItemModel() { Text = "Excel",TooltipText="Export to Excel", PrefixIcon = "e-excelexport", Id = "Grid_excelexport"}, //Here Blazor Grid is SfGrid ID. new ItemModel(){ Text = "Pdf",TooltipText="Export to PDF", PrefixIcon= "e-pdfexport", Id="Grid_pdfexport"}, new ItemModel(){ Text = "CSV",TooltipText="Export to CSV", PrefixIcon= "e-csvexport", Id="Grid_csvexport"}, }; public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { - if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname. + if (args.Item.Id == "Grid_pdfexport") //Id is combination of Blazor Grid's ID and itemname. { await this.Grid.ExportToPdfAsync(); } diff --git a/blazor/datagrid/virtual-scrolling.md b/blazor/datagrid/virtual-scrolling.md index 3f719b0b35..c4586fe721 100644 --- a/blazor/datagrid/virtual-scrolling.md +++ b/blazor/datagrid/virtual-scrolling.md @@ -184,7 +184,7 @@ public class OrderDetails * Variable row heights in template columns—where each row has a different height—are not supported. * By default, the group expand/collapse state is not persisted. To persist the state, set the [GridGroupSettings.PersistGroupState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_PersistGroupState) property to **true**. For more details, refer to the [documentation](https://blazor.syncfusion.com/documentation/datagrid/grouping#persist-grouped-row-expand-or-collapse-state). * Due to browser element height limits, the maximum number of records is bounded by browser capabilities. -* Grid content height is calculated from row height and total record count; features that change row height (such as text wrapping) are not supported. +* Blazor Grid content height is calculated from row height and total record count; features that change row height (such as text wrapping) are not supported. * To increase row height while keeping all rows uniform, specify a fixed height: ```css @@ -194,7 +194,7 @@ public class OrderDetails ``` * Because data is virtualized, aggregate and group totals reflect the current view items. -* For smooth scrolling, the page size should be at least two times the number of visible rows; otherwise, the Grid determines an appropriate size. +* For smooth scrolling, the page size should be at least two times the number of visible rows; otherwise, the Blazor Grid determines an appropriate size. * A static height is required for the component or its parent container when using row virtualization. Using 100% height requires both the component and its parent to have defined heights. ## Column virtualization @@ -392,7 +392,7 @@ Column virtualization in Blazor DataGrid renders only the columns currently visi [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization): Renders only the visible columns. Additional columns are loaded dynamically during horizontal scrolling. -Enabling both features together significantly improves the responsiveness and scalability of the Grid, even when working with thousands of rows and hundreds of columns. +Enabling both features together significantly improves the responsiveness and scalability of the Blazor Grid, even when working with thousands of rows and hundreds of columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -569,7 +569,7 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/hNBHDQXRrOjmiEVu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -> * Column [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) is required for column virtualization. If a column’s width is not defined, the Grid considers it as `200px`. +> * Column [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) is required for column virtualization. If a column’s width is not defined, the Blazor Grid considers it as `200px`. > * The collapsed/expanded state of grouped data persists only for local data while scrolling. ### Limitations @@ -885,8 +885,8 @@ public class VirtualData ## Scroll the content by external button -In certain scenarios, it may be necessary to programmatically scroll the Grid content into view rather than relying on manual scrolling. The Blazor DataGrid provides the [ScrollIntoViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ScrollIntoViewAsync_System_Int32_System_Int32_System_Int32_) method, which enables scrolling to a specific row or column by passing their respective indices as parameters. -To ensure smooth scrolling behavior, virtualization must be enabled in the Grid. +In certain scenarios, it may be necessary to programmatically scroll the Blazor Grid content into view rather than relying on manual scrolling. The Blazor DataGrid provides the [ScrollIntoViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ScrollIntoViewAsync_System_Int32_System_Int32_System_Int32_) method, which enables scrolling to a specific row or column by passing their respective indices as parameters. +To ensure smooth scrolling behavior, virtualization must be enabled in the Blazor Grid. * **Horizontal scrolling:** enable both [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) and [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization). * **Vertical scrolling:** enable [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization). @@ -992,9 +992,9 @@ public class OrderDetails ## Refresh virtualized Grid externally -The [UpdatePageSizeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdatePageSizeAsync_System_Int32_System_Int32_) method in the Blazor DataGrid refreshes the virtualized Grid’s PageSize externally by using the specified Grid height or container height along with the row height. This method calculates the `PageSize` programmatically and updates the Grid with the new value. +The [UpdatePageSizeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdatePageSizeAsync_System_Int32_System_Int32_) method in the Blazor DataGrid refreshes the virtualized Grid’s PageSize externally by using the specified Blazor Grid height or container height along with the row height. This method calculates the `PageSize` programmatically and updates the Blazor Grid with the new value. -To enable external refresh of the virtualized Grid, set [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) to **true**. +To enable external refresh of the virtualized Blazor Grid, set [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) to **true**. ```cshtml @using Syncfusion.Blazor.Grids @@ -1064,10 +1064,10 @@ To enable external refresh of the virtualized Grid, set [EnableVirtualization](h } ``` -> If [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) is specified, the page size is calculated using the given row height; otherwise, it is determined from the Grid row’s offset height. +> If [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) is specified, the page size is calculated using the given row height; otherwise, it is determined from the Blazor Grid row’s offset height. > 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=fluent2) to understand data presentation and manipulation. ## See also -* [Row virtualization with Lazy load grouping in Grid](https://blazor.syncfusion.com/documentation/datagrid/lazy-load-grouping#lazy-load-grouping-with-virtual-scrolling) \ No newline at end of file +* [Row virtualization with Lazy load grouping in Blazor Grid](https://blazor.syncfusion.com/documentation/datagrid/lazy-load-grouping#lazy-load-grouping-with-virtual-scrolling) \ No newline at end of file diff --git a/blazor/datagrid/webassembly-performance.md b/blazor/datagrid/webassembly-performance.md index ee452dea12..e8ec4ed076 100644 --- a/blazor/datagrid/webassembly-performance.md +++ b/blazor/datagrid/webassembly-performance.md @@ -15,14 +15,14 @@ N> Refer to Getting Started for configuration details: [Blazor Server DataGrid]( ## Avoid unnecessary component renders -During the Blazor diffing process, each DataGrid cell and child component is evaluated for re-rendering. `Event callbacks` can trigger additional renders across the component tree. Fine-grained control over DataGrid rendering helps avoid unnecessary work. +During the Blazor diffing process, each Blazor DataGrid cell and child component is evaluated for re-rendering. `Event callbacks` can trigger additional renders across the component tree. Fine-grained control over Blazor DataGrid rendering helps avoid unnecessary work. -Use [PreventRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PreventRender_System_Boolean_) on the DataGrid instance to skip participation in the next render cycle. This method internally affects the DataGrid’s [ShouldRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShouldRender) behavior. +Use [PreventRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PreventRender_System_Boolean_) on the Blazor DataGrid instance to skip participation in the next render cycle. This method internally affects the DataGrid’s [ShouldRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShouldRender) behavior. In the following example: - PreventRender is called in a click callback. -- The DataGrid is excluded from the render cycle caused by the click, and only currentCount updates. +- The Blazor DataGrid is excluded from the render cycle caused by the click, and only currentCount updates. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -110,16 +110,16 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/VtrntmNHrYKBrMhu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} > - `PreventRender` accepts a Boolean argument to disable (**true**) or enable (**false**) participation in rendering. -> - Call `PreventRender` only after the DataGrid completes its initial render; calling during initial render has no effect. +> - Call `PreventRender` only after the Blazor DataGrid completes its initial render; calling during initial render has no effect. ## Avoid unnecessary component renders after Blazor DataGrid events -When callback methods are assigned to DataGrid events, the parent component re-renders once the event completes. To prevent re-rendering of the DataGrid in that cycle, set the [PreventRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.RowSelectEventArgs-1.html#Syncfusion_Blazor_Grids_RowSelectEventArgs_1_PreventRender) property on the corresponding event args to true (when available). +When callback methods are assigned to Blazor DataGrid events, the parent component re-renders once the event completes. To prevent re-rendering of the Blazor DataGrid in that cycle, set the [PreventRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.RowSelectEventArgs-1.html#Syncfusion_Blazor_Grids_RowSelectEventArgs_1_PreventRender) property on the corresponding event args to true (when available). In the following example: - [RowSelected](https://blazor.syncfusion.com/documentation/datagrid/events#rowselected) invokes a callback that would normally trigger `StateHasChanged` in the parent. -- Setting `RowSelectEventArgs.PreventRender` to **true** prevents the DataGrid from participating in that re-render. +- Setting `RowSelectEventArgs.PreventRender` to **true** prevents the Blazor DataGrid from participating in that re-render. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -154,7 +154,7 @@ In the following example: private void OnRowSelected(RowSelectEventArgs args) { - args.PreventRender = true; //Without this, you may see noticeable delay in selection with rows in Grid. + args.PreventRender = true; //Without this, you may see noticeable delay in selection with rows in Blazor Grid. SelectedOrder = args.Data; } } @@ -206,10 +206,10 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/LZLRDGNxBEqcogXh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} > - `args.PreventRender` affects rendering only for the event-triggered cycle and does not change component state beyond that cycle. -> - Prefer setting `PreventRender` to **true** for user-interactive events (for example, [RowSelected](https://blazor.syncfusion.com/documentation/datagrid/events#rowselected), [RowSelecting](https://blazor.syncfusion.com/documentation/datagrid/events#rowselecting)) to reduce UI latency. For events without args (for example, [DataBound](https://blazor.syncfusion.com/documentation/datagrid/events#databound)), call the grid’s `PreventRender` method. +> - Prefer setting `PreventRender` to **true** for user-interactive events (for example, [RowSelected](https://blazor.syncfusion.com/documentation/datagrid/events#rowselected), [RowSelecting](https://blazor.syncfusion.com/documentation/datagrid/events#rowselecting)) to reduce UI latency. For events without args (for example, [DataBound](https://blazor.syncfusion.com/documentation/datagrid/events#databound)), call the Blazor Grid’s `PreventRender` method. ## Use paging or virtualization to load only visible rows -The DataGrid renders each row and cell as a component. Rendering a large number of elements can impact memory and CPU. Load only what is visible using [Paging](./paging) or [Virtualization](./virtualization). Keep page sizes reasonable to avoid reintroducing performance bottlenecks even with these features enabled. +The Blazor DataGrid renders each row and cell as a component. Rendering a large number of elements can impact memory and CPU. Load only what is visible using [Paging](./paging) or [Virtualization](./virtualization). Keep page sizes reasonable to avoid reintroducing performance bottlenecks even with these features enabled. N> Even with paging or virtualization, very large page sizes can still cause performance issues. Choose sizes that balance usability and responsiveness. \ No newline at end of file