From 0da70107c77d288802e4e3bfc143e4da23ecf96e Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Wed, 7 May 2025 09:06:23 +0530 Subject: [PATCH 1/2] 956732: Review the revamped topics --- blazor/datagrid/aggregates.md | 12 +- blazor/datagrid/custom-aggregate.md | 8 +- blazor/datagrid/custom-toolbar.md | 30 ++-- blazor/datagrid/footer-aggregate.md | 10 +- .../datagrid/group-and-caption-aggregate.md | 12 +- blazor/datagrid/paging.md | 152 +++++------------- blazor/datagrid/performance.md | 53 +++--- blazor/datagrid/print.md | 18 +-- blazor/datagrid/reactive-aggregate.md | 11 +- blazor/datagrid/tool-bar.md | 14 +- blazor/datagrid/toolbar-items.md | 22 +-- 11 files changed, 134 insertions(+), 208 deletions(-) diff --git a/blazor/datagrid/aggregates.md b/blazor/datagrid/aggregates.md index a480d7893f..0701b9bcb5 100644 --- a/blazor/datagrid/aggregates.md +++ b/blazor/datagrid/aggregates.md @@ -7,13 +7,13 @@ control: DataGrid documentation: ug --- -# Aggregates in Blazor DataGrid Component +# Aggregates in Blazor DataGrid -The Aggregates feature in the Syncfusion® Blazor Grid component allows you to display aggregate values in the footer, group footer, and group caption of the grid. With this feature, you can easily perform calculations on specific columns and show summary information.This feature can be configured using the **GridAggregates** component.To represent an aggregate column, you need to specify the minimum required properties, such as [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Field) and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type). +The Aggregates feature in the Syncfusion Blazor DataGrid allows you to display aggregate values in the footer, group footer, and group caption of the Grid. With this feature, you can easily perform calculations on specific columns and show summary information.This feature can be configured using the **GridAggregates** component.To represent an aggregate column, you need to specify the minimum required properties, such as [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Field) and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type). **Displaying aggregate values** -By default, the aggregate values are displayed in the footer, group, and caption cells of the grid. However, you can choose to display the aggregate value in any of these cells by using the following properties: +By default, the aggregate values are displayed in the footer, group, and caption cells of the Grid. However, you can choose to display the aggregate value in any of these cells by using the following properties: * [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate): Use this property to display the aggregate value in the footer cell. You can define a custom template to format the aggregate value as per your requirements. @@ -128,12 +128,12 @@ By default, the aggregate values are displayed in the footer, group, and caption {% previewsample "https://blazorplayground.syncfusion.com/embed/hZrACXUDUeyrfGOs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * When using local data, the total summary is calculated based on the entire dataset available in the grid. The aggregate values will reflect calculations across all the rows in the grid. +> * When using local data, the total summary is calculated based on the entire dataset available in the Grid. The aggregate values will reflect calculations across all the rows in the Grid. > * When working with remote data, the total summary is calculated based on the current page records. This means that if you have enabled pagination and are displaying data in pages, the aggregate values in the footer will represent calculations only for the visible page. ## Built-in aggregate types -The Syncfusion® Blazor Grid component provides several built-in aggregate types that can be specified in the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property to configure an aggregate column. +The Syncfusion Blazor DataGrid provides several built-in aggregate types that can be specified in the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property to configure an aggregate column. The available built-in aggregate types are : @@ -146,7 +146,7 @@ The available built-in aggregate types are : * **TrueCount:** Counts the number of true values in the column. * **FalseCount:** Counts the number of false values in the column. -Here is an example that demonstrates how to use built-in aggregates types in the Syncfusion® Grid: +Here is an example that demonstrates how to use built-in aggregates types in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/custom-aggregate.md b/blazor/datagrid/custom-aggregate.md index 640f70b2ca..2bdf9ed7a4 100644 --- a/blazor/datagrid/custom-aggregate.md +++ b/blazor/datagrid/custom-aggregate.md @@ -7,9 +7,9 @@ control: DataGrid documentation: ug --- -# Custom aggregate in Blazor Grid component +# Custom aggregate in Blazor DataGrid -The custom aggregate feature in Syncfusion’s Blazor Grid component allows you to calculate aggregate values using your own aggregate function. This feature can be useful in scenarios where the built-in aggregate functions do not meet your specific requirements. To use the custom aggregate option, follow the steps below: +The custom aggregate feature in Syncfusion’s Blazor DataGrid allows you to calculate aggregate values using your own aggregate function. This feature can be useful in scenarios where the built-in aggregate functions do not meet your specific requirements. To use the custom aggregate option, follow the steps below: * Set the **AggregateType** as Custom in **GridAggregateColumn** component. @@ -21,7 +21,7 @@ The custom aggregate function will be invoked differently for total and group ag **Group Aggregation:** The custom aggregate function will be called with the current group details and the aggregate column object as arguments. -Here’s an example that demonstrates how to use the custom aggregate feature in the Blazor Grid component: +Here’s an example that demonstrates how to use the custom aggregate feature in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -152,7 +152,6 @@ Here’s an example that demonstrates how to show the count of distinct values f - @code { private SfGrid Grid; public List Orders { get; set; } @@ -218,5 +217,4 @@ Here’s an example that demonstrates how to show the count of distinct values f > To display the aggregate value of the current column in another column, you can use the [ColumnName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_ColumnName) property. If the `ColumnName` property is not defined, the field name value will be assigned to the `ColumnName` property. - > You can refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data. \ No newline at end of file diff --git a/blazor/datagrid/custom-toolbar.md b/blazor/datagrid/custom-toolbar.md index 4f30b6f774..568a25d4bc 100644 --- a/blazor/datagrid/custom-toolbar.md +++ b/blazor/datagrid/custom-toolbar.md @@ -6,13 +6,13 @@ platform: Blazor control: DataGrid documentation: ug --- -# Custom toolbar in Blazor DataGrid component +# Custom toolbar in Blazor DataGrid -Custom toolbar in Syncfusion® Blazor Grid allows you to create a distinctive toolbar layout, style, and functionality that aligns with the specific needs of your application, providing a personalized experience within the Grid component. +Custom toolbar in Syncfusion Blazor DataGrid allows you to create a distinctive toolbar layout, style, and functionality that aligns with the specific needs of your application, providing a personalized experience within the Grid. This can be achieved by utilizing the `Template` property, which offers extensive customization options for the Toolbar. You can define a custom Template for the Toolbar and handle the actions of the ToolbarItems in the **OnClick** event. -The following example demonstrates, how to render the custom Toolbar using `Template`. +The following example demonstrates, how to render the custom Toolbar using `Template`: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -118,11 +118,11 @@ The following example demonstrates, how to render the custom Toolbar using `Temp ## Render image with text in custom Toolbar -Render an image with text in custom Toolbar in Syncfusion® Blazor Grid allows easily render an image along with text in the Toolbar of the DataGrid. This feature enhances the visual presentation of the Grid, providing additional context and improving the overall experience. +Render an image with text in custom Toolbar in Syncfusion Blazor DataGrid allows easily render an image along with text in the Toolbar of the Grid. This feature enhances the visual presentation of the Grid, providing additional context and improving the overall experience. To render an image with text in Custom Toolbar, you can utilize the Template in [SfToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfToolbar.html) in your code. -The following example demonstrates how to render an image in the Toolbar of the grid using `Template`. +The following example demonstrates how to render an image in the Toolbar of the Grid using `Template`: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -226,11 +226,11 @@ The following example demonstrates how to render an image in the Toolbar of the ## Render SfDropDownList in Custom Toolbar -Render SfDropDownList in Custom Toolbar in Syncfusion® Blazor Grid enables you to extend the functionality of the Custom Toolbar by incorporating a [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) component, allowing you to perform various actions within the DataGrid based on their selections. +Render **SfDropDownList** in Custom Toolbar in Syncfusion Blazor DataGrid enables you to extend the functionality of the Custom Toolbar by incorporating a [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html), allowing you to perform various actions within the Grid based on their selections. -This can be achieved by utilizing the `Template`. The example below demonstrates how to render the **SFDropDownList** component in the Custom Toolbar, where the Toolbar Template includes the its [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ValueChanged) event is bound to the **OnChange** method. +This can be achieved by utilizing the `Template`. The example below demonstrates how to render the **SFDropDownList** in the Custom Toolbar, where the Toolbar Template includes the its [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ValueChanged) event is bound to the **OnChange** method. -In the **OnChange** method, the text of the selected item is checked to determine the appropriate action. For example, if **Update** is chosen, the [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) method is called to exit the edit mode. If **Edit** is selected, the selected record is passed to the [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) method to initiate the edit mode dynamically. Similarly, if **Delete** is picked, the selected record is passed to the [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) method to remove it from the grid. +In the **OnChange** method, the text of the selected item is checked to determine the appropriate action. For example, if **Update** is chosen, the [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) method is called to exit the edit mode. If **Edit** is selected, the selected record is passed to the [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) method to initiate the edit mode dynamically. Similarly, if **Delete** is picked, the selected record is passed to the [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) method to remove it from the Grid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -271,10 +271,10 @@ In the **OnChange** method, the text of the selected item is checked to determin public string text { get; set; } } List -{ - new Select() { text = "Edit"}, - new Select() { text = "Delete"}, - new Select() { text = "Update"}, + { + new Select() { text = "Edit"}, + new Select() { text = "Delete"}, + new Select() { text = "Update"}, }; protected override void OnInitialized() @@ -358,11 +358,11 @@ In the **OnChange** method, the text of the selected item is checked to determin ## Render a component or element using the Toolbar Template -Rendering a component or element using the Toolbar Template in the Syncfusion® Blazor Grid allows you to extend the capabilities of the grid Toolbar by incorporating custom components or elements. This provides flexibility to enhance the Toolbar with custom buttons, dropdowns, input fields, icons, or any other desired UI elements. You can bind event handlers or handle interactions within the Template to enable specific actions or behaviors associated with the added components or elements. +Rendering a component or element using the Toolbar Template in the Syncfusion Blazor DataGrid allows you to extend the capabilities of the Grid Toolbar by incorporating custom components or elements. This provides flexibility to enhance the Toolbar with custom buttons, dropdowns, input fields, icons, or any other desired UI elements. You can bind event handlers or handle interactions within the Template to enable specific actions or behaviors associated with the added components or elements. -To render custom components or elements within the Toolbar, use the `Template` directive. This allows you to include other components, such as a [SfButton](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.buttons.sfbutton.html), and perform specific grid actions based on the button click. For example, when the **ExcelExport** button is clicked, the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method is called to export the grid to Excel. Similarly, when the **PdfExport** button is clicked, the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method is called to export the grid to PDF format.Likewise, when the Print button is clicked, the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method will triggered to print the grid. +To render custom components or elements within the Toolbar, use the `Template` directive. This allows you to include other components, such as a [SfButton](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.buttons.sfbutton.html), and perform specific Grid actions based on the button click. For example, when the **ExcelExport** button is clicked, the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method is called to export the Grid to Excel. Similarly, when the **PdfExport** button is clicked, the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method is called to export the Grid to PDF format.Likewise, when the Print button is clicked, the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method will triggered to print the Grid. -The following example demonstrates how to render a **SfButton** component in the Toolbar using `Template` and perform grid action based on the respected button click. +The following example demonstrates how to render a **SfButton** in the Toolbar using `Template` and perform Grid action based on the respected button click. {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/footer-aggregate.md b/blazor/datagrid/footer-aggregate.md index c0f43c541a..ff27fc249d 100644 --- a/blazor/datagrid/footer-aggregate.md +++ b/blazor/datagrid/footer-aggregate.md @@ -7,9 +7,9 @@ control: DataGrid documentation: ug --- -# Footer aggregate in Blazor Grid component +# Footer aggregate in Blazor DataGrid -The Syncfusion® Blazor Grid component allows you to calculate and display aggregate values in the footer cells. The footer aggregate value is calculated from all the rows in the grid. You can use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate) property to render the aggregate value in the footer cells. +The Syncfusion Blazor DataGrid allows you to calculate and display aggregate values in the footer cells. The footer aggregate value is calculated from all the rows in the Grid. You can use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate) property to render the aggregate value in the footer cells. To access the aggregate values inside the **FooterTemplate**, you can use the implicit named parameter **context**. You can type cast the **context** as **AggregateTemplateContext** to get aggregate values inside template. @@ -118,7 +118,7 @@ To access the aggregate values inside the **FooterTemplate**, you can use the im ## Format the aggregate value -To format the aggregate value result in the Syncfusion® Blazor Grid component, you can use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Format) property of the **AggregateColumn**. The `Format` property allows you to specify a format string that determines how the aggregate value will be displayed. +To format the aggregate value result in the Syncfusion Blazor DataGrid, you can use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Format) property of the **AggregateColumn**. The `Format` property allows you to specify a format string that determines how the aggregate value will be displayed. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -221,6 +221,4 @@ To format the aggregate value result in the Syncfusion® Blazor Grid component allow you to calculate aggregate values based on the current group items. These aggregate values can be displayed in the group footer cells and group caption cells, respectively. To achieve this, you can use the [GroupFooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupFooterTemplate) and [GroupCaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupCaptionTemplate) properties of the [GridAggregateColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn__ctor) component. +Group footer and caption aggregates in the Syncfusion Blazor DataGrid allow you to calculate aggregate values based on the current group items. These aggregate values can be displayed in the group footer cells and group caption cells, respectively. To achieve this, you can use the [GroupFooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupFooterTemplate) and [GroupCaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupCaptionTemplate) properties of the [GridAggregateColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn__ctor) component. -> When working with group aggregates in Syncfusion® Grid, it is important to set the property **AllowGrouping** of the column to true.To maintain grouped columns in the grid after grouping, set [showGroupedColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_ShowGroupedColumn) to true. +> When working with group aggregates in Syncfusion Grid, it is important to set the property **AllowGrouping** of the column to true.To maintain grouped columns in the Grid after grouping, set [showGroupedColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_ShowGroupedColumn) to true. ## Group footer aggregates Group footer aggregates are displayed in the footer cells of each group. These cells appear at the bottom of each group and provide aggregate values based on the grouped data. To display group footer aggregates, you need to provide a template using the [GroupFooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupFooterTemplate) property. The template will be used to render the aggregate values in the group footer cells. -Here’s an example that demonstrates how to use group footer aggregates in the Syncfusion® Blazor Grid component: +Here’s an example that demonstrates how to use group footer aggregates in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -117,7 +117,7 @@ Here’s an example that demonstrates how to use group footer aggregates in the Group caption aggregates are displayed in the caption cells of each group. These cells appear at the top of each group and provide a summary of the grouped data. To display group caption aggregates, you can use the [GroupCaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupCaptionTemplate) property. This property allows you to define a template that will be used to display the aggregate values in the group caption cells. -Here’s an example that demonstrates how to use group and caption aggregates in the Syncfusion® Blazor Grid component: +Here’s an example that demonstrates how to use group and caption aggregates in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -213,4 +213,4 @@ Here’s an example that demonstrates how to use group and caption aggregates in {% previewsample "https://blazorplayground.syncfusion.com/embed/VZrAsjqWAiLCkcxM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> The group total summary in Syncfusion® Grid is calculated based on the current page records for each group by default. \ No newline at end of file +> The group total summary in Grid is calculated based on the current page records for each group by default. \ No newline at end of file diff --git a/blazor/datagrid/paging.md b/blazor/datagrid/paging.md index 65be390a2c..5f0ab82a9d 100644 --- a/blazor/datagrid/paging.md +++ b/blazor/datagrid/paging.md @@ -7,23 +7,23 @@ control: DataGrid documentation: ug --- -# Paging in Blazor Grid component +# Paging in Blazor Grid -[Paging](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) provides an option to display grid data in segmented pages, making it easier to navigate through large datasets. This feature is particularly useful when dealing with extensive data sets. +[Paging](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) provides an option to display Grid data in segmented pages, making it easier to navigate through large datasets. This feature is particularly useful when dealing with extensive data sets. -To enable paging, you need to set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. This property determines whether paging is enabled or disabled for the grid. When paging is enabled, a pager component rendered at the bottom of the grid, allowing you to navigate through different pages of data. +To enable paging, you need to set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. This property determines whether paging is enabled or disabled for the Grid. When paging is enabled, a pager component rendered at the bottom of the Grid, allowing you to navigate through different pages of data. Paging options can be configured through the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component. The `GridPageSettings` allows you to control various aspects of paging, such as the page size, current page, and total number of records. -> You can achieve better performance by using grid paging to fetch only a pre-defined number of records from the data source. +> You can achieve better performance by using Grid paging to fetch only a pre-defined number of records from the data source. ## Customize the pager options -Customizing the pager options in the Syncfusion® Grid allows you to tailor the pagination control according to your specific requirements. You can customize the pager to display the number of pages using the `PageCount` property, change the current page using `CurrentPage` property, display the number of records in the grid using the `PageSize` property, and even adjust the page sizes in a dropdown using the `PageSizes` property. +Customizing the pager options in the Syncfusion DataGrid allows you to tailor the pagination control according to your specific requirements. You can customize the pager to display the number of pages using the `PageCount` property, change the current page using `CurrentPage` property, display the number of records in the Grid using the `PageSize` property, and even adjust the page sizes in a dropdown using the `PageSizes` property. ### Change the page size -The Syncfusion® Grid allows you to control the number of records displayed per page, providing you with flexibility in managing your data. This feature is particularly useful when you want to adjust the amount of data visible to you at any given time. To achieve this, you can utilize the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component. This property is used to specify the initial number of records to display on each page. The default value of pageSize property is 12. +The Syncfusion DataGrid allows you to control the number of records displayed per page, providing you with flexibility in managing your data. This feature is particularly useful when you want to adjust the amount of data visible to you at any given time. To achieve this, you can utilize the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component. This property is used to specify the initial number of records to display on each page. The default value of pageSize property is 12. The following example demonstrates how to change the page size of a Grid using an external button click based on **NumericTextBox** input. @@ -55,16 +55,12 @@ The following example demonstrates how to change the page size of a Grid using a @code { public List GridData { get; set; } - SfGrid Grid; - public int? value { get; set; } = null; - protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - private async Task ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs args) { if(args.Value != null && args.Value != 0) @@ -72,7 +68,6 @@ The following example demonstrates how to change the page size of a Grid using a value = args.Value; } } - public async Task UpdateValue() { if (value != null ) @@ -87,7 +82,6 @@ The following example demonstrates how to change the page size of a Grid using a public class OrderData { public static List Orders = new List(); - public OrderData() { @@ -99,7 +93,6 @@ The following example demonstrates how to change the page size of a Grid using a this.ShipCity = ShipCity; this.ShipName = ShipName; } - public static List GetAllRecords() { if (Orders.Count() == 0) @@ -124,7 +117,6 @@ The following example demonstrates how to change the page size of a Grid using a } return Orders; } - public int? OrderID { get; set; } public string CustomerID { get; set; } public string ShipCity { get; set; } @@ -137,9 +129,9 @@ The following example demonstrates how to change the page size of a Grid using a ### Change the page count -The Syncfusion® Grid allows you to adjust the number of pages displayed in the pager container. This is useful when you want to manage the number of pages you see while navigating through extensive datasets. The default value of **PageCount** property is 8. +The Syncfusion DataGrid allows you to adjust the number of pages displayed in the pager container. This is useful when you want to manage the number of pages you see while navigating through extensive datasets. The default value of **PageCount** property is 8. -To change the page count in the Syncfusion® Grid, you can utilize the [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageCount) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component, which defines the number of pages displayed in the pager container. +To change the page count in the Grid, you can utilize the [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageCount) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component, which defines the number of pages displayed in the pager container. The following example demonstrates how to change the page count of a Grid using an external button click based on **NumericTextBox** input. @@ -158,7 +150,6 @@ The following example demonstrates how to change the page count of a Grid using CLICK BUTTON
- @@ -171,16 +162,12 @@ The following example demonstrates how to change the page count of a Grid using @code { public List GridData { get; set; } - SfGrid Grid; - public int? value{ get; set; } - protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - private async Task ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs args) { if (args.Value != null && args.Value != 0) @@ -188,7 +175,6 @@ The following example demonstrates how to change the page count of a Grid using value = args.Value; } } - public async Task UpdateValue() { if (value != null) @@ -203,7 +189,6 @@ The following example demonstrates how to change the page count of a Grid using public class OrderData { public static List Orders = new List(); - public OrderData() { @@ -215,7 +200,6 @@ public class OrderData this.ShipCity = ShipCity; this.ShipName = ShipName; } - public static List GetAllRecords() { if (Orders.Count() == 0) @@ -240,7 +224,6 @@ public class OrderData } return Orders; } - public int? OrderID { get; set; } public string CustomerID { get; set; } public string ShipCity { get; set; } @@ -253,9 +236,9 @@ public class OrderData ### Change the current page -The Syncfusion® Grid allows you to change the currently displayed page, which can be particularly useful when you need to navigate through different pages of data either upon the initial rendering of the grid or update the displayed page based on interactions or specific conditions. The default value of **CurrentPage** property is 1. +The Syncfusion DataGrid allows you to change the currently displayed page, which can be particularly useful when you need to navigate through different pages of data either upon the initial rendering of the grid or update the displayed page based on interactions or specific conditions. The default value of **CurrentPage** property is 1. -To change the current page in the Syncfusion® Grid, you can utilize the [CurrentPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_CurrentPage) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component, which defines the current page number of the pager. +To change the current page in the Grid, you can utilize the [CurrentPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_CurrentPage) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component, which defines the current page number of the pager. The following example demonstrates how to dynamically change the current page using an external button click based on **NumericTextBox** input. @@ -287,16 +270,12 @@ The following example demonstrates how to dynamically change the current page us @code { public List GridData { get; set; } - SfGrid Grid; - public int? value { get; set; } - protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - private async Task ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs args) { if (args.Value != null && args.Value != 0) @@ -304,7 +283,6 @@ The following example demonstrates how to dynamically change the current page us value = args.Value; } } - public async Task UpdateValue() { if (value != null) @@ -319,7 +297,6 @@ The following example demonstrates how to dynamically change the current page us public class OrderData { public static List Orders = new List(); - public OrderData() { @@ -331,12 +308,10 @@ public class OrderData this.ShipCity = ShipCity; this.ShipName = ShipName; } - public static List GetAllRecords() { if (Orders.Count() == 0) { - int OrderID = 10248; for (int i = 1; i < 7; i++) @@ -356,7 +331,6 @@ public class OrderData } return Orders; } - public int? OrderID { get; set; } public string CustomerID { get; set; } public string ShipCity { get; set; } @@ -466,11 +440,11 @@ In the following example, the [Blazor Toggle Switch Button](https://blazor.syncf ## Pager template -The pager template in Syncfusion® Grid allows you to customize the appearance and behavior of the pager element, which is used for navigation through different pages of grid data. This feature is particularly useful when you want to use custom elements inside the pager instead of the default elements. +The pager template in Syncfusion DataGrid allows you to customize the appearance and behavior of the pager element, which is used for navigation through different pages of Grid data. This feature is particularly useful when you want to use custom elements inside the pager instead of the default elements. -To use the pager template, you need to specify the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_Template) property of the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html) component in your Syncfusion® Grid configuration. The pagerTemplate property allows you to define a custom template for the pager. Within the Template, you can access the [CurrentPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_CurrentPage), [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize), [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageCount), **TotalPage** and **TotalRecordCount** values. +To use the pager template, you need to specify the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_Template) property of the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html) component in your Grid configuration. The pagerTemplate property allows you to define a custom template for the pager. Within the Template, you can access the [CurrentPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_CurrentPage), [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize), [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageCount), **TotalPage** and **TotalRecordCount** values. -The following example demonstrates how to render a **NumericTextBox** component in the pager using the `Template` property +The following example demonstrates how to render a **NumericTextBox** in the pager using the `Template` property {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -480,22 +454,20 @@ The following example demonstrates how to render a **NumericTextBox** component @@ -510,12 +482,9 @@ The following example demonstrates how to render a **NumericTextBox** component @code { public List GridData { get; set; } - SfGrid Grid; - public int pageSize { get; set; } = 5; public int totalPages => (int)Math.Ceiling((double)GridData.Count / pageSize); - protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); @@ -544,7 +513,6 @@ public class OrderData this.ShipCity = ShipCity; this.ShipName = ShipName; } - public static List GetAllRecords() { if (Orders.Count() == 0) @@ -569,7 +537,6 @@ public class OrderData } return Orders; } - public int? OrderID { get; set; } public string CustomerID { get; set; } public string ShipCity { get; set; } @@ -581,13 +548,13 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVJXirSLdBgDLic?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > * Inside the **Template** RenderFragment, you can access the parameters passed to the pager templates using implicit parameter named context matching with the [PagerTemplateContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PagerModel.html#Syncfusion_Blazor_Grids_PagerModel__ctor) class name. -> * You can refer to our [Blazor Grid Pager Template](https://blazor.syncfusion.com/demos/datagrid/pager-template) online demo of Pager Template feature in Blazor DataGrid. +> * You can refer to our [Blazor Grid Pager Template](https://blazor.syncfusion.com/demos/datagrid/pager-template) online demo of Pager Template feature in Grid. ## Pager with page size dropdown -The pager with a page size dropdown in Syncfusion® Grid allows you to dynamically change the number of records displayed in the grid. This feature is useful when you want to easily customize the number of records to be shown per page. +The pager with a page size dropdown in Syncfusion DataGrid allows you to dynamically change the number of records displayed in the Grid. This feature is useful when you want to easily customize the number of records to be shown per page. -To enable the page size Dropdown feature in the Syncfusion® Grid, you need to set the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property to true in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component. This property configuration triggers the rendering of a dropdown list within the pager, allowing you to select the desired page size. The selected page size determines the number of records displayed on each page of the grid. +To enable the page size Dropdown feature in the Grid, you need to set the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property to true in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component. This property configuration triggers the rendering of a dropdown list within the pager, allowing you to select the desired page size. The selected page size determines the number of records displayed on each page of the Grid. The following example that demonstrates how to integrate the page size Dropdown feature by configuring the `PageSizes` property: @@ -608,9 +575,7 @@ The following example that demonstrates how to integrate the page size Dropdown @code { public List GridData { get; set; } - SfGrid Grid; - protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); @@ -633,7 +598,6 @@ public class OrderData this.ShipCity = ShipCity; this.ShipName = ShipName; } - public static List GetAllRecords() { if (Orders.Count() == 0) @@ -658,7 +622,6 @@ public class OrderData } return Orders; } - public int? OrderID { get; set; } public string CustomerID { get; set; } public string ShipCity { get; set; } @@ -675,7 +638,7 @@ public class OrderData ### Customize page size dropdown -The Syncfusion® Grid allows you to customize the default values of the page size dropdown in the pager, allowing you to change the number of records displayed per page. To achieve this, you can define the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property as an array of string instead of boolean value. +The Syncfusion DataGrid allows you to customize the default values of the page size dropdown in the pager, allowing you to change the number of records displayed per page. To achieve this, you can define the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property as an array of string instead of boolean value. The following example demonstrate how to customize the default values of the pager dropdown using the `PageSizes` property: @@ -696,8 +659,6 @@ The following example demonstrate how to customize the default values of the pag @code { public List GridData { get; set; } SfGrid? Grid { get; set; } - - protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); @@ -707,8 +668,7 @@ The following example demonstrate how to customize the default values of the pag {% highlight c# tabtitle="OrderData.cs" %} public class OrderData { - public static List Orders = new List(); - + public static List Orders = new List(); public OrderData() { @@ -720,7 +680,6 @@ The following example demonstrate how to customize the default values of the pag this.OrderDate = OrderDate; this.Freight = Freight; } - public static List GetAllRecords() { if (Orders.Count() == 0) @@ -742,7 +701,6 @@ The following example demonstrate how to customize the default values of the pag } return Orders; } - public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } @@ -757,9 +715,9 @@ The following example demonstrate how to customize the default values of the pag ## How to navigate to particular page -Navigating to a particular page in the Syncfusion® Grid is particularly useful when dealing with large datasets. It provides a quick and efficient way to jump to a specific page within the grid. +Navigating to a particular page in the Syncfusion DataGrid is particularly useful when dealing with large datasets. It provides a quick and efficient way to jump to a specific page within the Grid. -To achieve page navigation, you can use the [GotoPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GoToPageAsync_System_Int32_) method provided by Syncfusion® Grid. This method allows you to programmatically navigate to a specific page within the grid. +To achieve page navigation, you can use the [GotoPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GoToPageAsync_System_Int32_) method provided by Syncfusion Grid. This method allows you to programmatically navigate to a specific page within the Grid. The following example demonstrates how to dynamically navigate to a particular page using the `GotoPageAsync` method triggered by an external button click based on **NumericTextBox** input: @@ -790,18 +748,13 @@ The following example demonstrates how to dynamically navigate to a particular p @code { - public List GridData { get; set; } - SfGrid Grid; - public int? value { get; set; } - protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - private async Task ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs args) { if (args.Value != null && args.Value != 0) @@ -809,7 +762,6 @@ The following example demonstrates how to dynamically navigate to a particular p value = args.Value; } } - public async Task UpdateValue() { if (value != null) @@ -823,7 +775,6 @@ The following example demonstrates how to dynamically navigate to a particular p public class OrderData { public static List Orders = new List(); - public OrderData() { @@ -835,7 +786,6 @@ public class OrderData this.ShipCity = ShipCity; this.ShipName = ShipName; } - public static List GetAllRecords() { if (Orders.Count() == 0) @@ -860,7 +810,6 @@ public class OrderData } return Orders; } - public int? OrderID { get; set; } public string CustomerID { get; set; } public string ShipCity { get; set; } @@ -873,7 +822,7 @@ public class OrderData ## Dynamically calculate page size based on element height -You have an option to dynamically calculate the page size of a grid by considering the height of its parent element. This functionality proves invaluable in ensuring that the grid’s content remains within the available space, preventing the need for excessive scrolling. It primarily serves the purpose of automatically adjusting the `PageSize` when the height of the grid’s parent element changes dynamically. Upon each alteration in the parent element’s height, invoking this method will compute the grid’s `PageSize` and present the current page records accordingly. This feature effectively addresses situations where a static `PageSize` value does not cater to the varying heights of different parent elements, preventing any unwanted empty spaces within the grid. +You have an option to dynamically calculate the page size of a Grid by considering the height of its parent element. This functionality proves invaluable in ensuring that the Grid’s content remains within the available space, preventing the need for excessive scrolling. It primarily serves the purpose of automatically adjusting the `PageSize` when the height of the Grid’s parent element changes dynamically. Upon each alteration in the parent element’s height, invoking this method will compute the grid’s `PageSize` and present the current page records accordingly. This feature effectively addresses situations where a static `PageSize` value does not cater to the varying heights of different parent elements, preventing any unwanted empty spaces within the Grid. The following example demonstrates how to calculate the page size based on the element height using the change event based on the **NumericTextBox** input: @@ -903,11 +852,8 @@ The following example demonstrates how to calculate the page size based on the e @code { public List GridData { get; set; } SfGrid? Grid { get; set; } - public int GridHeight; - public int? value; - protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); @@ -917,10 +863,10 @@ The following example demonstrates how to calculate the page size based on the e { value = args.Value; GridHeight = (int)args.Value; - var RowHeight = 37; //height of the each row - Grid.Height = GridHeight.ToString(); ////datagrid height - var PageSize = (this.Grid.PageSettings as GridPageSettings).PageSize; //initial page size - decimal PageResize = ((GridHeight) - (PageSize * RowHeight)) / RowHeight; //new page size is obtained here + var RowHeight = 37; //height of the each row. + Grid.Height = GridHeight.ToString(); ////datagrid height. + var PageSize = (this.Grid.PageSettings as GridPageSettings).PageSize; //initial page size. + decimal PageResize = ((GridHeight) - (PageSize * RowHeight)) / RowHeight; //new page size is obtained here. Grid.PageSettings.PageSize = PageSize + (int)Math.Round(PageResize); await Grid.Refresh(); } @@ -942,7 +888,6 @@ The following example demonstrates how to calculate the page size based on the e this.OrderDate = OrderDate; this.Freight = Freight; } - public static List GetAllRecords() { if (Orders.Count() == 0) @@ -964,7 +909,6 @@ The following example demonstrates how to calculate the page size based on the e } return Orders; } - public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } @@ -975,11 +919,11 @@ The following example demonstrates how to calculate the page size based on the e {% previewsample "https://blazorplayground.syncfusion.com/embed/LNBJZWhzpcLcPshm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Render pager at the top of the grid +## Render pager at the top of the Grid -By default, the Pager component will be rendered at the bottom of the Grid when the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property is enabled. Using the `SfPager` component, it is possible to render the Pager at the top of the grid. This can be achieved by disabling the default pager of the Grid using the `AllowPaging` property and rendering the `SfPager` component externally. Now, syncing the paging action with the Grid can be performed by following the step below: +By default, the Pager will be rendered at the bottom of the Grid when the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property is enabled. Using the `SfPager`, it is possible to render the Pager at the top of the grid. This can be achieved by disabling the default pager of the Grid using the `AllowPaging` property and rendering the `SfPager` externally. Now, syncing the paging action with the Grid can be performed by following the step below: -In the following sample, the SfPager component is rendered on top of the grid. Initially, using the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) property of the Pager, the data for the Grid component is bound to the current page. In the following code snippet, the `PageSize` is defined as "10" so that the first ten records from the data source of the Grid will be displayed on the current page using the Skip and Take values. The SfPager also includes a [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSizes) property, denoting a list of available page sizes such as { 5, 10, 12, 20 }. The `PageSizes` property provides a dropdown list dynamically, allowing users to select from these predefined page sizes and customize the number of records displayed on each page. Through the navigation of the pager items, you can view the records on the Grid page by page. This can be achieved by using the [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) event of the Pager. In the `ItemClick` event of the Pager, the SkipValue and TakeValue are calculated using the `PageSize` property and arguments of the `ItemClick` event (CurrentPage, PreviousPage). Based on these details, you can view the records on the Grid page by page. +In the following sample, the SfPager is rendered on top of the Grid. Initially, using the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) property of the Pager, the data for the Grid is bound to the current page. In the following code snippet, the `PageSize` is defined as "10" so that the first ten records from the data source of the Grid will be displayed on the current page using the Skip and Take values. The SfPager also includes a [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSizes) property, denoting a list of available page sizes such as { 5, 10, 12, 20 }. The `PageSizes` property provides a dropdown list dynamically, allowing users to select from these predefined page sizes and customize the number of records displayed on each page. Through the navigation of the pager items, you can view the records on the Grid page by page. This can be achieved by using the [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) event of the Pager. In the `ItemClick` event of the Pager, the SkipValue and TakeValue are calculated using the `PageSize` property and arguments of the `ItemClick` event (CurrentPage, PreviousPage). Based on these details, you can view the records on the Grid page by page. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1013,7 +957,6 @@ In the following sample, the SfPager component is rendered on top of the grid. I public int count { get; set; } public SfPager Page { get; set; } public List pagesizes = new List { 5, 10, 12, 20 }; - public void HandleKeyDown(KeyboardEventArgs args) { if (args.Code == "Enter" || args.Key == "Enter") @@ -1023,13 +966,11 @@ In the following sample, the SfPager component is rendered on top of the grid. I TakeValue = Page.PageSize; } } - public void Click(PagerItemClickEventArgs args) { SkipValue = (args.CurrentPage * Page.PageSize) - Page.PageSize; TakeValue = Page.PageSize; } - public void PageSize(PageSizeChangedArgs args) { int page = Grid.PageSettings.CurrentPage; @@ -1060,14 +1001,12 @@ In the following sample, the SfPager component is rendered on top of the grid. I this.ShipCity = ShipCity; this.ShipName = ShipName; } - public static List GetAllRecords() { if (Orders.Count() == 0) { int OrderID = 10248; - for (int i = 1; i < 7; i++) { Orders.Add(new OrderData(OrderID + 1, "VINET", "Reims", "Vins et alcools Chevali")); @@ -1085,7 +1024,6 @@ In the following sample, the SfPager component is rendered on top of the grid. I } return Orders; } - public int? OrderID { get; set; } public string CustomerID { get; set; } public string ShipCity { get; set; } @@ -1096,21 +1034,21 @@ In the following sample, the SfPager component is rendered on top of the grid. I {% previewsample "https://blazorplayground.syncfusion.com/embed/BthpChMvrRAWDWAS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * Here, default pager action of the Grid component is disabled. -> * During the paging action, the pager component triggers the below three events. +> * Here, default pager action of the Grid is disabled. +> * During the paging action, the pager triggers the below three events. > * The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_Created) event triggers when Pager is created. > * The [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) event triggers when the numeric items in the pager is clicked. > * The [PageSizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSizeChanged) event triggers when pageSize DropDownList value is selected. ## Pager events -The Syncfusion® Grid component triggers two pager events during paging actions: +The Syncfusion Grid triggers two pager events during paging actions: [PageChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanging)- This event triggered before any paging action (such as changing the page, changing the page size and etc) is initiated. You can use this event to customize or control the behavior of paging actions. [PageChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanged)- This event triggered after a pager action is completed. It provides information about the action, such as the CurrentPage, CurrentPageSize, PreviousPage and TotalPages. You can use this event to perform actions or update the UI after the operation has been executed. -The following example that example demonstrates how to use these events to display notification messages to indicate the current and next page during paging actions in the Syncfusion® Blazor Grid: +The following example that example demonstrates how to use these events to display notification messages to indicate the current and next page during paging actions in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1122,7 +1060,6 @@ The following example that example demonstrates how to use these events to displ @message
- @@ -1137,16 +1074,12 @@ The following example that example demonstrates how to use these events to displ @code { public List GridData { get; set; } SfGrid? Grid { get; set; } - - protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - public string message; public string message1; - public async Task PageChangingHandler(GridPageChangingEventArgs args) { message = args.CurrentPage > args.PreviousPage @@ -1165,7 +1098,6 @@ The following example that example demonstrates how to use these events to displ public class OrderData { public static List Orders = new List(); - public OrderData() { @@ -1177,7 +1109,6 @@ The following example that example demonstrates how to use these events to displ this.OrderDate = OrderDate; this.Freight = Freight; } - public static List GetAllRecords() { if (Orders.Count() == 0) @@ -1199,7 +1130,6 @@ The following example that example demonstrates how to use these events to displ } return Orders; } - public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } @@ -1212,4 +1142,4 @@ The following example that example demonstrates how to use these events to displ ## See also -* [How to customize page size dropdown value of pager](https://www.syncfusion.com/forums/166711/how-to-customize-the-grid-page-size-dropdown) +* [How to customize page size dropdown value of pager](https://www.syncfusion.com/forums/166711/how-to-customize-the-grid-page-size-dropdown) \ No newline at end of file diff --git a/blazor/datagrid/performance.md b/blazor/datagrid/performance.md index 6c9170eec0..e63646c948 100644 --- a/blazor/datagrid/performance.md +++ b/blazor/datagrid/performance.md @@ -7,35 +7,38 @@ control: DataGrid documentation: ug --- -# Performance tips for Blazor DataGrid Component +# Performance tips for Blazor DataGrid -This article is a comprehensive guide on improving the loading performance of the Blazor DataGrid, especially when dealing with large datasets along with large number of columns. It provides valuable insights into the steps that need to be followed to bind a large data source without experiencing any performance degradations. By offering detailed explanations and actionable tips, this resource aims to empower readers with the knowledge and best practices necessary to optimize the performance of the Blazor DataGrid during data binding, ensuring a smooth and efficient user experience +This article is a comprehensive guide on improving the loading performance of the Blazor DataGrid, especially when dealing with large datasets along with large number of columns. It provides valuable insights into the steps that need to be followed to bind a large data source without experiencing any performance degradations. By offering detailed explanations and actionable tips, this resource aims to empower readers with the knowledge and best practices necessary to optimize the performance of the Blazor Grid during data binding, ensuring a smooth and efficient user experience ## How to improve loading performance by binding large dataset - In Blazor, the framework takes about 0.06 milliseconds to render one component in the page. You can find more details in the official [documentation link](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-8.0#avoid-thousands-of-component-instances). In Syncfusion® Blazor DataGrid each cell(td) is rendered as separate Blazor component so, it is recommended to render only a limited number of rows and columns to guarantee the best loading performance for the component. + +In Blazor, the framework takes about 0.06 milliseconds to render one component in the page. You can find more details in the official [documentation link](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-8.0#avoid-thousands-of-component-instances). In Grid each cell(td) is rendered as separate Blazor component so, it is recommended to render only a limited number of rows and columns to guarantee the best loading performance for the component. ### Optimizing performance with paging -To boost the performance efficiency of your application, especially when dealing with large datasets, it is advised to implement paging. [Paging](https://blazor.syncfusion.com/documentation/datagrid/paging) allows you to display grid data in segmented pages, facilitating easier navigation through substantial datasets. This feature proves particularly beneficial in enhancing the overall performance of your application. For more information on implementing paging, you can refer to the [documentation](https://blazor.syncfusion.com/documentation/datagrid/paging) section dedicated to this feature. -### Optimizing performance with row virtualization or infinite scrolling +To boost the performance efficiency of your application, especially when dealing with large datasets, it is advised to implement paging. [Paging](https://blazor.syncfusion.com/documentation/datagrid/paging) allows you to display Grid data in segmented pages, facilitating easier navigation through substantial datasets. This feature proves particularly beneficial in enhancing the overall performance of your application. For more information on implementing paging, you can refer to the [documentation](https://blazor.syncfusion.com/documentation/datagrid/paging) section dedicated to this feature. + +### Optimizing performance with row virtualization or infinite scrolling + To enhance your application's efficiency, especially when dealing with substantial datasets, it is recommended to either using [virtualization](https://blazor.syncfusion.com/documentation/datagrid/virtualization) or [infinite scrolling](https://blazor.syncfusion.com/documentation/datagrid/infinite-scrolling). Implementing these techniques can significantly reduce the load on your application and elevate its overall performance. -1. **Virtualization**: The Virtual scrolling feature in the Blazor Data Grid enables the efficient handling and display of large volumes of data without compromising performance. This approach optimizes the rendering process by loading only the visible rows within the Grid viewport, rather than rendering the entire dataset simultaneously. For more information on implementing row virtualization , you can refer to the [documentation](https://blazor.syncfusion.com/documentation/datagrid/virtualization) section dedicated to this feature. +1. **Virtualization**: The Virtual scrolling feature in the Blazor DataGrid enables the efficient handling and display of large volumes of data without compromising performance. This approach optimizes the rendering process by loading only the visible rows within the Grid viewport, rather than rendering the entire dataset simultaneously. For more information on implementing row virtualization, you can refer to the [documentation](https://blazor.syncfusion.com/documentation/datagrid/virtualization) section dedicated to this feature. -2. **Infinite scrolling**: The Infinite Scrolling feature in the Blazor Data Grid is a powerful tool for seamlessly handling extensive data sets without compromising grid performance. It operates on a "load-on-demand" concept, ensuring that data is fetched only when needed. In the default infinite scrolling mode, a new block of data is loaded each time the scrollbar reaches the end of the vertical scroller. For more information on implementing infinite scrolling , you can refer to the [documentation](https://blazor.syncfusion.com/documentation/datagrid/infinite-scrolling) section dedicated to this feature. +2. **Infinite scrolling**: The Infinite Scrolling feature in the Blazor DataGrid is a powerful tool for seamlessly handling extensive data sets without compromising Grid performance. It operates on a "load-on-demand" concept, ensuring that data is fetched only when needed. In the default infinite scrolling mode, a new block of data is loaded each time the scrollbar reaches the end of the vertical scroller. For more information on implementing infinite scrolling, you can refer to the [documentation](https://blazor.syncfusion.com/documentation/datagrid/infinite-scrolling) section dedicated to this feature. ### Optimizing performance with column virtualization in large no of columns -[Column virtualization](https://blazor.syncfusion.com/documentation/datagrid/virtualization#column-virtualization) feature in the Blazor Data Grid that allows you to optimize the rendering of columns by displaying only the columns that are currently within the viewport. It allows horizontal scrolling to view additional columns. This feature is particularly useful when dealing with grids that have a large number of columns, as it helps to improve the performance and reduce the initial loading time. +[Column virtualization](https://blazor.syncfusion.com/documentation/datagrid/virtualization#column-virtualization) feature in the Blazor DataGrid that allows you to optimize the rendering of columns by displaying only the columns that are currently within the viewport. It allows horizontal scrolling to view additional columns. This feature is particularly useful when dealing with Grids that have a large number of columns, as it helps to improve the performance and reduce the initial loading time. -It is possible to enable both row and column virtualization. This feature allows for efficient handling of large datasets by dynamically loading only the visible rows and columns, optimizing performance and enhancing the overall responsiveness of the grid. For more information on implementing column virtualization , you can refer to the [documentation](https://blazor.syncfusion.com/documentation/datagrid/virtualization#column-virtualization) section dedicated to this feature. +It is possible to enable both row and column virtualization. This feature allows for efficient handling of large datasets by dynamically loading only the visible rows and columns, optimizing performance and enhancing the overall responsiveness of the Grid. For more information on implementing column virtualization , you can refer to the [documentation](https://blazor.syncfusion.com/documentation/datagrid/virtualization#column-virtualization) section dedicated to this feature. ### How to overcome browser height limitation in virtual scrolling -You can load millions of records in the Blazor Data Grid by using virtual scrolling, where the grid loads and renders rows on-demand while scrolling vertically. As a result, Grid lightens the browser’s load by minimizing the DOM elements and rendering elements visible in the viewport. The height of the grid is calculated using the **Total Records Count * RowHeight** property. +You can load millions of records in the Blazor DataGrid by using virtual scrolling, where the Grid loads and renders rows on-demand while scrolling vertically. As a result, Grid lightens the browser’s load by minimizing the DOM elements and rendering elements visible in the viewport. The height of the Grid is calculated using the **Total Records Count * RowHeight** property. -The browser has some maximum pixel height limitations for the scroll bar element. The content placed above the maximum height can’t be scrolled if the element height is greater than the browser’s maximum height limit. The browser height limit affects the virtual scrolling of the grid. When a large number of records are bound to the Grid, it can only display the records until the maximum height limit of the browser. Once the browser’s height limit is reached while scrolling, the user won’t able to scroll further to view the remaining records. +The browser has some maximum pixel height limitations for the scroll bar element. The content placed above the maximum height can’t be scrolled if the element height is greater than the browser’s maximum height limit. The browser height limit affects the virtual scrolling of the Grid. When a large number of records are bound to the Grid, it can only display the records until the maximum height limit of the browser. Once the browser’s height limit is reached while scrolling, the user won’t able to scroll further to view the remaining records. -For example, if the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) is set as 30px and the total record count is 1000000(1 million), then the height of the grid element will be 30,000,000 pixels. In this case, the browser’s maximum height limit for a div is about 22,369,600 (The maximum pixel height limitation differs for different browsers). The records above the maximum height limit of the browser can’t be scrolled. -This height limitation is not related to the Grid component. It fully depends on the default behavior of the browser. The same issue is reproduced in the normal HTML table too. +For example, if the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) is set as 30px and the total record count is 1000000(1 million), then the height of the Grid element will be 30,000,000 pixels. In this case, the browser’s maximum height limit for a div is about 22,369,600 (The maximum pixel height limitation differs for different browsers). The records above the maximum height limit of the browser can’t be scrolled. +This height limitation is not related to the Grid. It fully depends on the default behavior of the browser. The same issue is reproduced in the normal HTML table too. The Grid has an option to overcome this limitation of the browser in the following ways. @@ -48,7 +51,7 @@ You can reduce the row height using the rowHeight property of the Grid. It will Similar to virtual scrolling, the paging feature also loads the data in an on-demand concept. Pagination is also compatible with all the other features(Grouping, Editing, etc.) in Grid. So, use the paging feature instead of virtual scrolling to view a large number of records in the Grid without any kind of performance degradation or browser height limitation. ### How to prevent connection disconnected error when loading a large number of columns with enabled persistence -The problem arises specifically when the grid attempts to set persistent data with a larger number of columns. It is recommended to increase the buffer size of the websocket. Check the below provided code snippet added in the Program.cs file and official [documentation](https://learn.microsoft.com/en-us/aspnet/core/signalr/configuration?view=aspnetcore-3.0&tabs=dotnet#configure-server-options) link. +The problem arises specifically when the Grid attempts to set persistent data with a larger number of columns. It is recommended to increase the buffer size of the websocket. Check the below provided code snippet added in the Program.cs file and official [documentation](https://learn.microsoft.com/en-us/aspnet/core/signalr/configuration?view=aspnetcore-3.0&tabs=dotnet#configure-server-options) link. ```csharp builder.Services.AddSignalR(hubOptions => @@ -57,22 +60,22 @@ builder.Services.AddSignalR(hubOptions => }); ``` -## How to improve performance of Data Grid in WASM application -This section provides performance guidelines for using Syncfusion® Data Grid component efficiently in Blazor WebAssembly application. The general framework Blazor WebAssembly performance best practice/guidelines can be found [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-8.0). +## How to improve performance of DataGrid in WASM application +This section provides performance guidelines for using Syncfusion DataGrid efficiently in Blazor WebAssembly application. The general framework Blazor WebAssembly performance best practice/guidelines can be found [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-8.0). 1. [Avoid unnecessary component renders](https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance#avoid-unnecessary-component-renders) 2. [Avoid unnecessary component renders after grid events](https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance#avoid-unnecessary-component-renders-after-grid-events) ## How to improve loading performance by binding data from service -1. When binding data to the grid from a service, it's advisable to set the data source in the Grid [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Created) event instead of the `OnInitializedAsync` method. If you call the data-fetching method within `OnInitializedAsync`, the delay in fetching data from the service can impact the application's startup time and the rendering of the grid component. However, if you assign the data inside the `Created` event, the grid will have already been created/rendered. Since there are no service request calls inside the `Created` event, you are simply assigning the data already fetched from `OnInitializedAsync` to the Grid's [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property within the Created event handler. +1. When binding data to the Grid from a service, it's advisable to set the data source in the Grid [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Created) event instead of the `OnInitializedAsync` method. If you call the data-fetching method within `OnInitializedAsync`, the delay in fetching data from the service can impact the application's startup time and the rendering of the Grid. However, if you assign the data inside the `Created` event, the Grid will have already been created/rendered. Since there are no service request calls inside the `Created` event, you are simply assigning the data already fetched from `OnInitializedAsync` to the Grid's [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property within the Created event handler. -2. When dealing with a service that returns a large dataset, there's a possibility that the `Created` event might be triggered before the completion of the `OnInitializedAsync`. In such scenarios, it is recommended to employ a custom binding approach for associating data with the grid. This method enables customization of the displayed data using the `Read/ReadAsync` method. Instead of relying on `OnInitializedAsync`, you can invoke your service within the `Read/ReadAsync` method and provide the data for display in the grid. For detailed information, you can check the below documentations +2. When dealing with a service that returns a large dataset, there's a possibility that the `Created` event might be triggered before the completion of the `OnInitializedAsync`. In such scenarios, it is recommended to employ a custom binding approach for associating data with the Grid. This method enables customization of the displayed data using the `Read/ReadAsync` method. Instead of relying on `OnInitializedAsync`, you can invoke your service within the `Read/ReadAsync` method and provide the data for display in the Grid. For detailed information, you can check the below documentations * [Custom binding](https://blazor.syncfusion.com/documentation/datagrid/custom-binding) * [Injecting service into CustomAdaptor](https://blazor.syncfusion.com/documentation/datagrid/custom-binding#inject-service-into-custom-adaptor) ## How to improve loading performance by referring individual script and CSS -To improve the performance of Syncfusion® Blazor DataGrid component during the initial render as well as certain actions, suggested you to refer individual NuGet package (Syncfusion.Blazor.Grid) along with its specified script files. In the consolidated package (Syncfusion.Blazor) all the components will be defined and hence size of the package will be more. Along with its script file size will be more since scripts necessary for all the Syncfusion® Blazor components will be defined inside it. +To improve the performance of Syncfusion Blazor Grid during the initial render as well as certain actions, suggested you to refer individual NuGet package (Syncfusion.Blazor.Grid) along with its specified script files. In the consolidated package (Syncfusion.Blazor) all the components will be defined and hence size of the package will be more. Along with its script file size will be more since scripts necessary for all the Syncfusion Blazor components will be defined inside it. When package and script file size is more, there might be delay or performance lag in rendering the component in certain specification compared to Grid rendered using individual scripts and NuGet. Individual Nuget package will contain all the necessary and required dependent component sources along with its script reference. So it is not necessary to refer the dependent component externally while referring the Individual package. @@ -80,11 +83,11 @@ Refer the below documentations * [Individual nuget package](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app#install-syncfusion-blazor-grid-and-themes-nuget-in-the-blazor-web-app) * [Adding script and CSS](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app#add-stylesheet-and-script-resources) -So to improve the performance of grid during the initial rendering, request you to refer Individual NuGet package and scripts. +So to improve the performance of Grid during the initial rendering, request you to refer Individual NuGet package and scripts. ## How to update cell values without frequent server calls -Efficiently update cell values without the need for frequent server calls, especially beneficial for live update scenarios. Even when the data is initially bound from the server, performing edit operations can be done without triggering a database refresh. Utilize the [SetRowDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetRowDataAsync_System_Object__0_System_Boolean_) method to update the DataGrid without affecting the database. Additionally, you can prevent the built-in edit functionality by setting `args.Cancel` to **true**. If you pass the `preventDataUpdate` argument value as **true** to the `SetRowDataAsync` method, it will prevent the database from updating and only refresh the UI. +Efficiently update cell values without the need for frequent server calls, especially beneficial for live update scenarios. Even when the data is initially bound from the server, performing edit operations can be done without triggering a database refresh. Utilize the [SetRowDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetRowDataAsync_System_Object__0_System_Boolean_) method to update the Grid without affecting the database. Additionally, you can prevent the built-in edit functionality by setting `args.Cancel` to **true**. If you pass the `preventDataUpdate` argument value as **true** to the `SetRowDataAsync` method, it will prevent the database from updating and only refresh the UI. ```csharp public async Task OnClick() @@ -95,7 +98,7 @@ public async Task OnClick() ## How to optimize server-side data operations with adaptors -The Blazor DataGrid provides support for various adaptors (OData, ODataV4, WebAPI, URL, etc.) to facilitate server-side data operations and CRUD functionalities. By leveraging these adaptors along with the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component, you can seamlessly bind remote data sources to the grid and execute actions. During data operations like filtering, sorting, and paging, the corresponding action queries are generated as per the adaptor's requirements. It is crucial to handle these actions on the application end and return the processed data back to the grid. Refer to the documentation for comprehensive details. It's worth noting that for efficient data processing, the suggested order for returning processed data to the grid is as follows +The Blazor DataGrid provides support for various adaptors (OData, ODataV4, WebAPI, URL, etc.) to facilitate server-side data operations and CRUD functionalities. By leveraging these adaptors along with the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component, you can seamlessly bind remote data sources to the Grid and execute actions. During data operations like filtering, sorting, and paging, the corresponding action queries are generated as per the adaptor's requirements. It is crucial to handle these actions on the application end and return the processed data back to the Grid. Refer to the documentation for comprehensive details. It's worth noting that for efficient data processing, the suggested order for returning processed data to the Grid is as follows * Filtering * Sorting * Aggregates @@ -104,7 +107,7 @@ The Blazor DataGrid provides support for various adaptors (OData, ODataV4, WebAP ## Strategic approaches to addressing latency challenges -Understanding the concerns you are facing regarding the lagging responsiveness of the Syncfusion® Blazor components, your situation has been reviewed, and several factors contributing to this issue have been identified. It's important to note that when using dialog-oriented features like filtering and dialog editing, a call is made from the client to the server to share position details, resulting in some delay if the servers are located in a distant location. +Understanding the concerns you are facing regarding the lagging responsiveness of the Syncfusion Blazor components, your situation has been reviewed, and several factors contributing to this issue have been identified. It's important to note that when using dialog-oriented features like filtering and dialog editing, a call is made from the client to the server to share position details, resulting in some delay if the servers are located in a distant location. Additionally, potential solutions to mitigate the delay are offered: @@ -116,6 +119,6 @@ Considering these factors and implementing the suggested solutions can minimize For more information and further guidance, refer to the [documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/server?view=aspnetcore-8.0) on hosting and deploying Blazor applications -## Microsoft excel limitation while exporting millions of records to excel file format +## Microsoft Excel limitation while exporting millions of records to Excel file format -By default, Microsoft Excel supports only 1,048,576 records in an excel sheet. Hence it is not possible to export millions of records to excel. You can refer the [documentation](https://support.microsoft.com/en-gb/office/excel-specifications-and-limits-1672b34d-7043-467e-8e27-269d656771c3) link for more details on Microsoft excel specifications and limits. So suggest to export the data in CSV (Comma-Separated Values) or other formats that can handle large datasets more efficiently than Excel. \ No newline at end of file +By default, Microsoft Excel supports only 1,048,576 records in an Excel sheet. Hence it is not possible to export millions of records to Excel. You can refer the [documentation](https://support.microsoft.com/en-gb/office/excel-specifications-and-limits-1672b34d-7043-467e-8e27-269d656771c3) link for more details on Microsoft excel specifications and limits. So suggest to export the data in CSV (Comma-Separated Values) or other formats that can handle large datasets more efficiently than Excel. \ No newline at end of file diff --git a/blazor/datagrid/print.md b/blazor/datagrid/print.md index 4280a28653..1d02efe007 100644 --- a/blazor/datagrid/print.md +++ b/blazor/datagrid/print.md @@ -9,11 +9,11 @@ documentation: ug -# Print in Blazor DataGrid Component +# Print in Blazor DataGrid -The printing feature in Syncfusion® Grid allows you to easily generate and print a representation of the grid’s content for better offline accessibility and documentation. You can enable this feature using either the grid’s Toolbar or the programmatically available [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method. +The printing feature in Syncfusion Blazor DataGrid allows you to easily generate and print a representation of the Grid’s content for better offline accessibility and documentation. You can enable this feature using either the Grid’s Toolbar or the programmatically available [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method. -To add the printing option to the grid’s Toolbar, simply include the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property in your grid configuration and add the **Print** as Toolbar item. This will allow you to directly initiate the printing process while click on the Print item from the toolbar +To add the printing option to the Grid’s Toolbar, simply include the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property in your Grid configuration and add the **Print** as Toolbar item. This will allow you to directly initiate the printing process while click on the Print item from the toolbar {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -98,7 +98,7 @@ When printing a webpage, some print options, such as layout, paper size, and mar ## Print by external button -You can print the grid’s content using an external button by utilizing the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method. This method allows you to trigger the printing process programmatically. +You can print the Grid’s content using an external button by utilizing the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method. This method allows you to trigger the printing process programmatically. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -178,7 +178,7 @@ You can print the grid’s content using an external button by utilizing the [Pr ## Print visible Page -By default, the Syncfusion® Blazor Grid prints all the pages of the grid. The [PrintMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DashArray) property within the grid grants you control over the printing process. However, if you want to print only the current visible page, you can achieve this by setting the `PrintMode` property to **CurrentPage**. +By default, the Syncfusion Blazor DataGrid prints all the pages of the Grid. The [PrintMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DashArray) property within the Grid grants you control over the printing process. However, if you want to print only the current visible page, you can achieve this by setting the `PrintMode` property to **CurrentPage**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -360,9 +360,9 @@ The following image represents Hierarchial Grid with print toolbar item, ## Print large number of columns -When printing a grid with a large number of columns, the browser’s default page size (usually A4) might not be sufficient to display all the columns properly. As a result, the browser’s print preview may automatically hide the overflowed content, leading to a cut-off appearance. +When printing a Grid with a large number of columns, the browser’s default page size (usually A4) might not be sufficient to display all the columns properly. As a result, the browser’s print preview may automatically hide the overflowed content, leading to a cut-off appearance. -To show a large number of columns when printing, you can adjust the scale option from the print option panel based on your content size. This will allow you to fit the entire grid content within the printable area. +To show a large number of columns when printing, you can adjust the scale option from the print option panel based on your content size. This will allow you to fit the entire Grid content within the printable area. ![Printing large number of columns in Blazor DataGrid.](./images/blazor-datagrid-print-large-columns.png) @@ -434,8 +434,8 @@ In the below example, we have **CustomerID** as a hidden column in the datagrid. ## Limitations of printing large data -Printing a large volume of data all at once in the grid can have certain limitations due to potential browser performance issues. Rendering numerous DOM elements on a single page can lead to browser slowdowns or even hang the browser. The grid offers a solution to manage extensive datasets through virtualization. However, it’s important to note that virtualization for both rows and columns is not feasible during the printing process. +Printing a large volume of data all at once in the Grid can have certain limitations due to potential browser performance issues. Rendering numerous DOM elements on a single page can lead to browser slowdowns or even hang the browser. The Grid offers a solution to manage extensive datasets through virtualization. However, it’s important to note that virtualization for both rows and columns is not feasible during the printing process. -If printing all the data remains a requirement, an alternative approach is recommended. Exporting the grid data to formats like [Excel](https://blazor.syncfusion.com/documentation/datagrid/excel-exporting) or [CSV](https://blazor.syncfusion.com/documentation/datagrid/excel-exporting) or [Pdf](https://blazor.syncfusion.com/documentation/datagrid/pdf-export) is advised. This exported data can then be printed using non-web-based applications, mitigating the potential performance challenges associated with printing large datasets directly from the browser. +If printing all the data remains a requirement, an alternative approach is recommended. Exporting the Grid data to formats like [Excel](https://blazor.syncfusion.com/documentation/datagrid/excel-exporting) or [CSV](https://blazor.syncfusion.com/documentation/datagrid/excel-exporting) or [Pdf](https://blazor.syncfusion.com/documentation/datagrid/pdf-export) is advised. This exported data can then be printed using non-web-based applications, mitigating the potential performance challenges associated with printing large datasets directly from the browser. > You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file diff --git a/blazor/datagrid/reactive-aggregate.md b/blazor/datagrid/reactive-aggregate.md index 0ee8eb788d..f55fdeaa5c 100644 --- a/blazor/datagrid/reactive-aggregate.md +++ b/blazor/datagrid/reactive-aggregate.md @@ -7,13 +7,13 @@ control: DataGrid documentation: ug --- -# Reactive aggregate in Blazor Grid component +# Reactive aggregate in Blazor DataGrid -The Syncfusion® Blazor Grid component provides support for reactive aggregates, which allow you to update the aggregate values dynamically as the data changes. Reactive aggregates automatically recalculate their values when there are changes in the underlying data, providing real-time updates to the aggregate values in the grid. +The Syncfusion Blazor DataGrid provides support for reactive aggregates, which allow you to update the aggregate values dynamically as the data changes. Reactive aggregates automatically recalculate their values when there are changes in the underlying data, providing real-time updates to the aggregate values in the Grid. ## Auto update aggregate value in batch editing -When the grid is in batch editing mode, the aggregate values in the footer, group footer, and group caption are automatically refreshed every time a cell is saved. This ensures that the aggregate values accurately reflect the edited data. +When the Grid is in batch editing mode, the aggregate values in the footer, group footer, and group caption are automatically refreshed every time a cell is saved. This ensures that the aggregate values accurately reflect the edited data. Here’s an example code snippet demonstrating how to auto update aggregate value in batch editing: @@ -126,7 +126,4 @@ Here’s an example code snippet demonstrating how to auto update aggregate valu {% previewsample "https://blazorplayground.syncfusion.com/embed/hjVgCtAjJfZhemgh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> Adding a new record to the grouped grid will not refresh the aggregate values. - - - +> Adding a new record to the grouped grid will not refresh the aggregate values. \ No newline at end of file diff --git a/blazor/datagrid/tool-bar.md b/blazor/datagrid/tool-bar.md index 8884bef7e3..790d42b9aa 100644 --- a/blazor/datagrid/tool-bar.md +++ b/blazor/datagrid/tool-bar.md @@ -7,13 +7,13 @@ control: DataGrid documentation: ug --- -# Toolbar in Blazor DataGrid Component +# Toolbar in Blazor DataGrid -The toolbar in the Syncfusion® Blazor DataGrid component offers several general use cases to enhance data manipulation and overall experience. Actions such as adding, editing, and deleting records within the grid can be performed, providing efficient data manipulation capabilities. The toolbar also facilitates data export and import functionality, allowing you to generate downloadable files in formats like Excel, CSV, or PDF. +The toolbar in the Syncfusion Blazor DataGrid offers several general use cases to enhance data manipulation and overall experience. Actions such as adding, editing, and deleting records within the Grid can be performed, providing efficient data manipulation capabilities. The toolbar also facilitates data export and import functionality, allowing you to generate downloadable files in formats like Excel, CSV, or PDF. This service provides the necessary methods to interact with the toolbar items. The toolbar can be customized with built-in toolbar items or custom toolbar items using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property. The `Toolbar` property accepts an array of strings representing the built-in toolbar items or an array of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects for custom toolbar items. -The following example demonstrates how to enable toolbar items in the grid. +The following example demonstrates how to enable toolbar items in the Grid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -87,11 +87,11 @@ The following example demonstrates how to enable toolbar items in the grid. ## Enable or disable toolbar items -Enabling or disabling toolbar items dynamically in Syncfusion® Blazor Grid is to provide control over the availability of specific functionality based on application logic. This feature allows you to customize the toolbar based on various conditions or individuals interactions. +Enabling or disabling toolbar items dynamically in Syncfusion Blazor DataGrid is to provide control over the availability of specific functionality based on application logic. This feature allows you to customize the toolbar based on various conditions or individuals interactions. You can enable or disable toolbar items dynamically by 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 method allows you to control the availability of specific toolbar items based on your application logic. -In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) Button component is added to enable and disable the toolbar items using `EnableToolbarItemsAsync` method. When the switch is toggled, the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event is triggered and the toolbar items are updated accordingly. +In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) Button is added to enable and disable the toolbar items using `EnableToolbarItemsAsync` method. When the switch is toggled, the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event is triggered and the toolbar items are updated accordingly. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -207,7 +207,7 @@ In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com ## Customize Toolbar buttons using CSS -Customizing Toolbar buttons in Syncfusion® Blazor Grid using CSS involves modifying the appearance of built-in toolbar buttons by applying CSS styles. This provides a flexible and customizable way to enhance the visual presentation of the toolbar and create a cohesive interface. +Customizing Toolbar buttons in Syncfusion Blazor DataGrid using CSS involves modifying the appearance of built-in toolbar buttons by applying CSS styles. This provides a flexible and customizable way to enhance the visual presentation of the toolbar and create a cohesive interface. The appearance of the built-in Toolbar buttons can be modified by applying the following CSS styles. @@ -299,4 +299,4 @@ The following example demonstrates how to change the background color of the `Ad [View Sample in GitHub](https://github.com/SyncfusionExamples/Customizing-the-toolbar-items-tooltip-text-in-Blazor-Grid) -N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. +N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file diff --git a/blazor/datagrid/toolbar-items.md b/blazor/datagrid/toolbar-items.md index f2ac6db6c3..3f4b0be6a9 100644 --- a/blazor/datagrid/toolbar-items.md +++ b/blazor/datagrid/toolbar-items.md @@ -7,13 +7,13 @@ control: DataGrid documentation: ug --- -# Toolbar items in Blazor DataGrid component +# Toolbar items in Blazor DataGrid -The Syncfusion® Blazor Grid offers a flexible toolbar that enables the addition of custom Toolbar Items or modification of existing ones. This customizable toolbar is positioned above the grid, providing a convenient way to access various actions and functionalities. +The Syncfusion Blazor DataGrid offers a flexible toolbar that enables the addition of custom Toolbar Items or modification of existing ones. This customizable toolbar is positioned above the Grid, providing a convenient way to access various actions and functionalities. ## Built-in Toolbar item -Built-in toolbar items in the Syncfusion® Blazor Grid component involves utilizing pre-defined actions to perform standard operations within the Grid. +Built-in toolbar items in the Syncfusion Blazor DataGrid involves utilizing pre-defined actions to perform standard operations within the Grid. These items can be added by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as a collection of built-in items. Each item is rendered as a button with an icon and text. The following table lists the built-in Toolbar Items and their respective actions. @@ -31,7 +31,7 @@ These items can be added by defining the [Toolbar](https://help.syncfusion.com/c | ExcelExport | Exports the Grid data to an Excel file.| | CsvExport | Exports the Grid data to a CSV file.| -The following example demonstrates how to enable built-in Toolbar items such as **Print** and **Search** in the grid. +The following example demonstrates how to enable built-in Toolbar items such as **Print** and **Search** in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -285,9 +285,9 @@ public class OrderData ## Custom Toolbar Items -Adding custom Toolbar Items to the Syncfusion® Blazor DataGrid involves incorporating personalized functionality into the Toolbar. +Adding custom Toolbar Items to the Syncfusion Blazor DataGrid involves incorporating personalized functionality into the Toolbar. -Custom Toolbar Items can be added to the DataGrid component by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as a collection of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects. These objects define the custom items and their corresponding actions. The actions for the customized toolbar items are defined in the [OnToolbarClick](https://blazor.syncfusion.com/documentation/datagrid/events#ontoolbarclick) event. +Custom Toolbar Items can be added to the Grid by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as a collection of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects. These objects define the custom items and their corresponding actions. The actions for the customized toolbar items are defined in the [OnToolbarClick](https://blazor.syncfusion.com/documentation/datagrid/events#ontoolbarclick) event. By default, custom Toolbar Items are positioned on the **left** side of the Toolbar. However, you can change the position by using the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of the `ItemModel`. The following example demonstrates how to apply the `Align` property with the value **Right** for the **Collapse All** Toolbar Item. @@ -386,11 +386,11 @@ By default, custom Toolbar Items are positioned on the **left** side of the Tool ## Both built-in and custom items in Toolbar -Built-in and custom items in a Toolbar within the Syncfusion® Blazor Grid provides the flexibility to create a customized toolbar with a combination of standard actions and custom actions. +Built-in and custom items in a Toolbar within the Syncfusion Blazor DataGrid provides the flexibility to create a customized toolbar with a combination of standard actions and custom actions. To use both types of toolbar items, you can define the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property of the Grid as an array that includes both built-in and custom items. The built-in items are specified as strings, while the custom items are defined as objects with properties such as [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Text), [PrefixIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_PrefixIcon), and [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Id) within the toolbar component. -The following example demonstrates, how to use both built-in and custom toolbar items in the grid. The built-in toolbar items includes **Add**, **Edit**, **Delete**, **Update**, and **Cancel**, while the custom toolbar item is **Click**. +The following example demonstrates, how to use both built-in and custom toolbar items in the Grid. The built-in toolbar items includes **Add**, **Edit**, **Delete**, **Update**, and **Cancel**, while the custom toolbar item is **Click**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -483,9 +483,9 @@ The following example demonstrates, how to use both built-in and custom toolbar ## Custom Toolbar Items in a specific position -Customizing the position of a custom toolbar within the Syncfusion® Blazor Grid involves modifying the default placement of the custom Toolbar Items. This enables you to precisely control the positioning of each custom Toolbar item according to your specific requirements and desired layout within the DataGrid. +Customizing the position of a custom toolbar within the Syncfusion Blazor DataGrid involves modifying the default placement of the custom Toolbar Items. This enables you to precisely control the positioning of each custom Toolbar item according to your specific requirements and desired layout within the Grid. -By default, custom Toolbar Items in DataGrid component are aligned on the left side of the toolbar. However, you have the ability to modify the position of the custom toolbar items by utilizing the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of the [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor). +By default, custom Toolbar Items in Grid are aligned on the left side of the toolbar. However, you have the ability to modify the position of the custom toolbar items by utilizing the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of the [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor). In the following sample, the **Collapse All** Toolbar item is positioned on the **Right**, the **Expand All** Toolbar item is positioned on the **Left**, and the **Search** Toolbar item is positioned at the **Center**. @@ -748,4 +748,4 @@ You can customize the toolbar items tooltip text by adding toolbar items externa {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVACXLuoSzCcoOM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVACXLuoSzCcoOM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file From 2031a144b3da889cc9e2c8bcaac9d4d28faa007b Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Mon, 12 May 2025 14:34:33 +0530 Subject: [PATCH 2/2] 956732: Modified --- blazor/datagrid/custom-aggregate.md | 2 +- blazor/datagrid/custom-toolbar.md | 2 +- blazor/datagrid/tool-bar.md | 6 +++--- blazor/datagrid/toolbar-items.md | 10 +++++----- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/blazor/datagrid/custom-aggregate.md b/blazor/datagrid/custom-aggregate.md index 2bdf9ed7a4..3fa391c947 100644 --- a/blazor/datagrid/custom-aggregate.md +++ b/blazor/datagrid/custom-aggregate.md @@ -120,7 +120,7 @@ Here’s an example that demonstrates how to use the custom aggregate feature in You can calculate the count of distinct values in an aggregate row by using custom aggregate functions. By specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) as **Custom** and providing a custom aggregate function in the `CustomAggregate` property, you can achieve this behavior. -Here’s an example that demonstrates how to show the count of distinct values for the **ShipCountry** column using a custom aggregate. +Here’s an example that demonstrates how to show the count of distinct values for the **ShipCountry** column using a custom aggregate: {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/custom-toolbar.md b/blazor/datagrid/custom-toolbar.md index 568a25d4bc..2ef0afb856 100644 --- a/blazor/datagrid/custom-toolbar.md +++ b/blazor/datagrid/custom-toolbar.md @@ -362,7 +362,7 @@ Rendering a component or element using the Toolbar Template in the Syncfusion Bl To render custom components or elements within the Toolbar, use the `Template` directive. This allows you to include other components, such as a [SfButton](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.buttons.sfbutton.html), and perform specific Grid actions based on the button click. For example, when the **ExcelExport** button is clicked, the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method is called to export the Grid to Excel. Similarly, when the **PdfExport** button is clicked, the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method is called to export the Grid to PDF format.Likewise, when the Print button is clicked, the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method will triggered to print the Grid. -The following example demonstrates how to render a **SfButton** in the Toolbar using `Template` and perform Grid action based on the respected button click. +The following example demonstrates how to render a **SfButton** in the Toolbar using `Template` and perform Grid action based on the respected button click: {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/tool-bar.md b/blazor/datagrid/tool-bar.md index 790d42b9aa..2ced9050d1 100644 --- a/blazor/datagrid/tool-bar.md +++ b/blazor/datagrid/tool-bar.md @@ -13,7 +13,7 @@ The toolbar in the Syncfusion Blazor DataGrid offers several general use cases t This service provides the necessary methods to interact with the toolbar items. The toolbar can be customized with built-in toolbar items or custom toolbar items using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property. The `Toolbar` property accepts an array of strings representing the built-in toolbar items or an array of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects for custom toolbar items. -The following example demonstrates how to enable toolbar items in the Grid. +The following example demonstrates how to enable toolbar items in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -91,7 +91,7 @@ Enabling or disabling toolbar items dynamically in Syncfusion Blazor DataGrid is You can enable or disable toolbar items dynamically by 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 method allows you to control the availability of specific toolbar items based on your application logic. -In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) Button is added to enable and disable the toolbar items using `EnableToolbarItemsAsync` method. When the switch is toggled, the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event is triggered and the toolbar items are updated accordingly. +In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) Button is added to enable and disable the toolbar items using `EnableToolbarItemsAsync` method. When the switch is toggled, the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event is triggered and the toolbar items are updated accordingly: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -209,7 +209,7 @@ In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com Customizing Toolbar buttons in Syncfusion Blazor DataGrid using CSS involves modifying the appearance of built-in toolbar buttons by applying CSS styles. This provides a flexible and customizable way to enhance the visual presentation of the toolbar and create a cohesive interface. -The appearance of the built-in Toolbar buttons can be modified by applying the following CSS styles. +The appearance of the built-in Toolbar buttons can be modified by applying the following CSS styles: ```csharp .e-grid .e-toolbar .e-tbar-btn .e-icons, diff --git a/blazor/datagrid/toolbar-items.md b/blazor/datagrid/toolbar-items.md index 3f4b0be6a9..244a5f69e0 100644 --- a/blazor/datagrid/toolbar-items.md +++ b/blazor/datagrid/toolbar-items.md @@ -15,7 +15,7 @@ The Syncfusion Blazor DataGrid offers a flexible toolbar that enables the additi Built-in toolbar items in the Syncfusion Blazor DataGrid involves utilizing pre-defined actions to perform standard operations within the Grid. -These items can be added by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as a collection of built-in items. Each item is rendered as a button with an icon and text. The following table lists the built-in Toolbar Items and their respective actions. +These items can be added by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as a collection of built-in items. Each item is rendered as a button with an icon and text. The following table lists the built-in Toolbar Items and their respective actions: | Built-in Toolbar Items | Actions | |------------------------|---------| @@ -197,7 +197,7 @@ The Syncfusion Blazor DataGrid allows you to customize the built-in toolbar item To customize the built-in toolbar items, you can use the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event of the Grid. -The following example demonstrate how to customize the toolbar by disabling and canceling the **Add** button functionlity and showing a custom message when the **Add** button of toolbar is clicked. +The following example demonstrate how to customize the toolbar by disabling and canceling the **Add** button functionlity and showing a custom message when the **Add** button of toolbar is clicked: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -289,7 +289,7 @@ Adding custom Toolbar Items to the Syncfusion Blazor DataGrid involves incorpora Custom Toolbar Items can be added to the Grid by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as a collection of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects. These objects define the custom items and their corresponding actions. The actions for the customized toolbar items are defined in the [OnToolbarClick](https://blazor.syncfusion.com/documentation/datagrid/events#ontoolbarclick) event. -By default, custom Toolbar Items are positioned on the **left** side of the Toolbar. However, you can change the position by using the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of the `ItemModel`. The following example demonstrates how to apply the `Align` property with the value **Right** for the **Collapse All** Toolbar Item. +By default, custom Toolbar Items are positioned on the **left** side of the Toolbar. However, you can change the position by using the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of the `ItemModel`. The following example demonstrates how to apply the `Align` property with the value **Right** for the **Collapse All** Toolbar Item: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -390,7 +390,7 @@ Built-in and custom items in a Toolbar within the Syncfusion Blazor DataGrid pro To use both types of toolbar items, you can define the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property of the Grid as an array that includes both built-in and custom items. The built-in items are specified as strings, while the custom items are defined as objects with properties such as [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Text), [PrefixIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_PrefixIcon), and [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Id) within the toolbar component. -The following example demonstrates, how to use both built-in and custom toolbar items in the Grid. The built-in toolbar items includes **Add**, **Edit**, **Delete**, **Update**, and **Cancel**, while the custom toolbar item is **Click**. +The following example demonstrates, how to use both built-in and custom toolbar items in the Grid. The built-in toolbar items includes **Add**, **Edit**, **Delete**, **Update**, and **Cancel**, while the custom toolbar item is **Click**: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -487,7 +487,7 @@ Customizing the position of a custom toolbar within the Syncfusion Blazor DataGr By default, custom Toolbar Items in Grid are aligned on the left side of the toolbar. However, you have the ability to modify the position of the custom toolbar items by utilizing the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of the [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor). -In the following sample, the **Collapse All** Toolbar item is positioned on the **Right**, the **Expand All** Toolbar item is positioned on the **Left**, and the **Search** Toolbar item is positioned at the **Center**. +In the following sample, the **Collapse All** Toolbar item is positioned on the **Right**, the **Expand All** Toolbar item is positioned on the **Left**, and the **Search** Toolbar item is positioned at the **Center**: {% tabs %} {% highlight razor tabtitle="Index.razor" %}