diff --git a/blazor/datagrid/adding-header-and-footer.md b/blazor/datagrid/adding-header-and-footer.md index c299b7215d..f3b13a95e1 100644 --- a/blazor/datagrid/adding-header-and-footer.md +++ b/blazor/datagrid/adding-header-and-footer.md @@ -697,7 +697,7 @@ The following example demonstrates how to repeat the column headers on every pag { PdfExportProperties ExportProperties = new PdfExportProperties(); ExportProperties.IsRepeatHeader = true; // Repeats the Grid's header on every page in the PDF document. - await this.DefaultGrid.PdfExport(ExportProperties); + await this.DefaultGrid.ExportToPdfAsync(ExportProperties); } } protected override void OnInitialized() @@ -760,4 +760,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLyXTCdVQgRVfzE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVINuLIyMVDkBoc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/how-to/enable-or-disable-grid.md b/blazor/datagrid/how-to/enable-or-disable-grid.md index c97b00e6b9..30f9dcf748 100644 --- a/blazor/datagrid/how-to/enable-or-disable-grid.md +++ b/blazor/datagrid/how-to/enable-or-disable-grid.md @@ -34,7 +34,7 @@ The following example demonstrates how to enable or disable the Grid and its act @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons - + @(isGridDisabled? "Enable Grid" : "Disable Grid") diff --git a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md index e1dc1fa3f7..7ef46a9c68 100644 --- a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md +++ b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md @@ -1,13 +1,13 @@ --- layout: post title: Resize the Blazor DataGrid in various dimension | Syncfusion -description: Learn here all about resize the Grid in various dimension in Syncfusion Blazor DataGrid. +description: Learn here all about resize the Grid in various dimension in Syncfusion Blazor DataGrid components and more details. platform: Blazor control: DataGrid documentation: ug --- -# Resize the Blazor DataGrid in various dimension +# Resize the Blazor DataGrid in various dimension The Syncfusion® Blazor DataGrid offers a friendly way to resize the Grid, allowing you to adjust its width and height for improved data visualization. diff --git a/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md b/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md index c81d15eb22..18948e537f 100644 --- a/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md +++ b/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md @@ -51,7 +51,7 @@ Height="600" @ref="Grid"> - + diff --git a/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md b/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md index 6495f19d49..153ba27d06 100644 --- a/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md +++ b/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md @@ -32,7 +32,7 @@ The following example demonstrates how to handle row selection in the Grid using diff --git a/blazor/datagrid/paging.md b/blazor/datagrid/paging.md index be2913e490..1ebe43104e 100644 --- a/blazor/datagrid/paging.md +++ b/blazor/datagrid/paging.md @@ -9,7 +9,7 @@ documentation: ug # Paging in Blazor DataGrid -[Paging](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) provides an option to display Syncfsion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 rendered at the bottom of the Grid, allowing you to navigate through different pages of data. @@ -450,6 +450,7 @@ The following example demonstrates how to render a **NumericTextBox** in the pag {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Navigations @@ -469,6 +470,7 @@ The following example demonstrates how to render a **NumericTextBox** in the pag of @totalPages pages (@GridData.Count items) + } diff --git a/blazor/datagrid/style-and-appearance/aggregate.md b/blazor/datagrid/style-and-appearance/aggregate.md index 1b2c078616..e7bf9f6bb0 100644 --- a/blazor/datagrid/style-and-appearance/aggregate.md +++ b/blazor/datagrid/style-and-appearance/aggregate.md @@ -1,7 +1,7 @@ --- layout: post title: Aggregate customization in Blazor DataGrid | Syncfusion -description: Learn here all about aggregate in Syncfusion Blazor DataGrid and more. +description: Learn here all about aggregate customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/editing.md b/blazor/datagrid/style-and-appearance/editing.md index 48b04fce1e..d5ea8162fd 100644 --- a/blazor/datagrid/style-and-appearance/editing.md +++ b/blazor/datagrid/style-and-appearance/editing.md @@ -1,7 +1,7 @@ --- layout: post title: Editing customization in DataGrid | Syncfusion -description: Learn here all about editing in Syncfusion Blazor DataGrid and more. +description: Learn here all about editing customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug @@ -50,7 +50,7 @@ In this example, the **.e-gridform** class represents the editing form, and the - + @@ -126,7 +126,7 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLStyZhJXEhbeSg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLINOLffsrjCvCt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customizing the edit dialog header element @@ -152,7 +152,7 @@ In this example, the **.e-edit-dialog** class represents the edit dialog, and th - + @@ -224,7 +224,7 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDretyNVJZGMwDNm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBetEhJzsqPbguh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customizing the command column buttons @@ -254,7 +254,7 @@ In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** class - + @@ -337,5 +337,5 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrItotrzWzFhlUN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrIjYBTfCdNCmvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/datagrid/style-and-appearance/filtering.md b/blazor/datagrid/style-and-appearance/filtering.md index d9c71f66f2..1bc346d91d 100644 --- a/blazor/datagrid/style-and-appearance/filtering.md +++ b/blazor/datagrid/style-and-appearance/filtering.md @@ -1,7 +1,7 @@ --- layout: post title: Filtering customization in Blazor DataGrid | Syncfusion -description: Learn here all about filtering in Syncfusion Blazor DataGrid and more. +description: Learn here all about filtering customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/grouping.md b/blazor/datagrid/style-and-appearance/grouping.md index a99346e4b3..a203e6a897 100644 --- a/blazor/datagrid/style-and-appearance/grouping.md +++ b/blazor/datagrid/style-and-appearance/grouping.md @@ -1,7 +1,7 @@ --- layout: post title: Grouping customization in Blazor DataGrid | Syncfusion -description: Learn here all about grouping in Syncfusion Blazor DataGrid and more. +description: Learn here all about grouping customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/header.md b/blazor/datagrid/style-and-appearance/header.md index 942d6c0e5a..7238d64ab9 100644 --- a/blazor/datagrid/style-and-appearance/header.md +++ b/blazor/datagrid/style-and-appearance/header.md @@ -1,7 +1,7 @@ --- layout: post title: Header customization in Blazor DataGrid | Syncfusion -description: Learn here all about header in Syncfusion Blazor DataGrid and more. +description: Checkout and learn here all about header customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/paging.md b/blazor/datagrid/style-and-appearance/paging.md index 0b0bbe9d12..9f868b1df0 100644 --- a/blazor/datagrid/style-and-appearance/paging.md +++ b/blazor/datagrid/style-and-appearance/paging.md @@ -1,7 +1,7 @@ --- layout: post title: Paging customization in Blazor DataGrid | Syncfusion -description: Learn here all about paging in Syncfusion Blazor DataGrid and more. +description: Checkout and learn here all about paging customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/selection.md b/blazor/datagrid/style-and-appearance/selection.md index 43b546e79e..0fdcdf1746 100644 --- a/blazor/datagrid/style-and-appearance/selection.md +++ b/blazor/datagrid/style-and-appearance/selection.md @@ -1,7 +1,7 @@ --- layout: post title: Selection customization in Blazor DataGrid | Syncfusion -description: Learn here all about selection in Syncfusion Blazor DataGrid and more. +description: Learn here all about selection customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/sorting.md b/blazor/datagrid/style-and-appearance/sorting.md index da4547c290..a24fccecdc 100644 --- a/blazor/datagrid/style-and-appearance/sorting.md +++ b/blazor/datagrid/style-and-appearance/sorting.md @@ -1,7 +1,7 @@ --- layout: post title: Sorting customization in Blazor DataGrid | Syncfusion -description: Learn here all about sorting in Syncfusion Blazor DataGrid and more. +description: Learn here all about sorting customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/toolbar.md b/blazor/datagrid/style-and-appearance/toolbar.md index 585e86f921..035641b0fd 100644 --- a/blazor/datagrid/style-and-appearance/toolbar.md +++ b/blazor/datagrid/style-and-appearance/toolbar.md @@ -1,7 +1,7 @@ --- layout: post title: Toolbar in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about toolbar in Syncfusion Blazor DataGrid and more. +description: Checkout and learn here all about toolbar customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/template-pdf-export.md b/blazor/datagrid/template-pdf-export.md index f3d6ed94f3..bb484afd09 100644 --- a/blazor/datagrid/template-pdf-export.md +++ b/blazor/datagrid/template-pdf-export.md @@ -353,17 +353,21 @@ In the following example: -@code { + + +@code { SfGridDefaultGrid; diff --git a/blazor/datagrid/tool-bar.md b/blazor/datagrid/tool-bar.md index 2b29f12b52..6f6bfaea48 100644 --- a/blazor/datagrid/tool-bar.md +++ b/blazor/datagrid/tool-bar.md @@ -120,28 +120,28 @@ In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com Orders = OrderData.GetAllRecords(); } - private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args) + private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args) { if (args.Checked) { - this.Grid.EnableToolbarItems(new List() { "Grid_Expand", "Grid_Collapse" }, false); + await this.Grid.EnableToolbarItemsAsync(new List() { "Grid_Expand", "Grid_Collapse" }, false); } else { - this.Grid.EnableToolbarItems(new List() { "Grid_Expand", "Grid_Collapse" }, true); + await this.Grid.EnableToolbarItemsAsync(new List() { "Grid_Expand", "Grid_Collapse" }, true); } } - + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { if (args.Item.Text == "Expand") { - await this.Grid.GroupExpandAll(); + await this.Grid.ExpandAllGroupAsync(); } if (args.Item.Text == "Collapse") { - await this.Grid.GroupCollapseAll(); + await this.Grid.CollapseAllGroupAsync(); } } } diff --git a/blazor/datagrid/toolbar-items.md b/blazor/datagrid/toolbar-items.md index 555c8b9298..c3500bd09e 100644 --- a/blazor/datagrid/toolbar-items.md +++ b/blazor/datagrid/toolbar-items.md @@ -323,11 +323,11 @@ By default, custom Toolbar Items are positioned on the **left** side of the Tool { if (args.Item.Text == "Expand all") { - await this.Grid.GroupExpandAll(); + await this.Grid.ExpandAllGroupAsync(); } if (args.Item.Text == "Collapse all") { - await this.Grid.GroupCollapseAll(); + await this.Grid.CollapseAllGroupAsync(); } } } @@ -379,7 +379,7 @@ By default, custom Toolbar Items are positioned on the **left** side of the Tool {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVqiNBEKnOsnFxm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLIDOgtGItGVQpJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Both built-in and custom items in Toolbar @@ -496,7 +496,7 @@ In the following sample, the **Collapse All** Toolbar item is positioned on the - + @@ -518,11 +518,11 @@ In the following sample, the **Collapse All** Toolbar item is positioned on the { if (args.Item.Text == "Expand all") { - await this.Grid.GroupExpandAll(); + await this.Grid.ExpandAllGroupAsync(); } if (args.Item.Text == "Collapse all") { - await this.Grid.GroupCollapseAll(); + await this.Grid.CollapseAllGroupAsync(); } } } @@ -628,27 +628,27 @@ This is demonstrated in the following sample code where there are custom toolbar }).ToList(); } - public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { if (args.Item.Text == "Add") { - Grid.AddRecord(); + await Grid.AddRecordAsync(); } if (args.Item.Text == "Edit") { - Grid.StartEdit(); + await Grid.StartEditAsync(); } if (args.Item.Text == "Delete") { - Grid.DeleteRecord(); + await Grid.DeleteRecordAsync(); } if (args.Item.Text == "Update") { - Grid.EndEdit(); + await Grid.EndEditAsync(); } if (args.Item.Text == "Cancel") { - Grid.CloseEdit(); + await Grid.CloseEditAsync(); } } @@ -674,8 +674,9 @@ You can customize the toolbar items tooltip text by adding toolbar items externa @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Navigations - + + @@ -683,10 +684,8 @@ You can customize the toolbar items tooltip text by adding toolbar items externa - @code { private SfGrid Grid; - public List Orders { get; set; } private List ToolbarItems = new List() { new ItemModel() { Text = "Excel",TooltipText="Export to Excel", PrefixIcon = "e-excelexport", Id = "Grid_excelexport"}, //Here Grid is SfGrid ID. @@ -694,6 +693,22 @@ You can customize the toolbar items tooltip text by adding toolbar items externa new ItemModel(){ Text = "CSV",TooltipText="Export to CSV", PrefixIcon= "e-csvexport", Id="Grid_csvexport"}, }; + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname. + { + await this.Grid.ExportToPdfAsync(); + } + else if (args.Item.Id == "Grid_excelexport") + { + await Grid.ExportToExcelAsync(); + } + else if (args.Item.Id == "Grid_csvexport") + { + await Grid.ExportToCsvAsync(); + } + } + protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); @@ -746,4 +761,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" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVIiXZMiFpezqWu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file