diff --git a/blazor/datagrid/column-chooser.md b/blazor/datagrid/column-chooser.md index 8b112ec94..6fe7157ab 100644 --- a/blazor/datagrid/column-chooser.md +++ b/blazor/datagrid/column-chooser.md @@ -9,9 +9,9 @@ documentation: ug # Column Chooser in Blazor DataGrid -The Syncfusion® Blazor DataGrid provides a column chooser feature that allows dynamically showing or hiding columns. +The Syncfusion® Blazor DataGrid includes a built-in Column Chooser feature that allows columns to be shown or hidden through a simple dialog with checkboxes. -To enable this feature, set the [ShowColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnChooser) property of the [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **true**. +To enable this feature, set the [ShowColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnChooser) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) to **true**. Add `ColumnChooser` item to the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -80,7 +80,7 @@ To enable this feature, set the [ShowColumnChooser](https://help.syncfusion.com/ {% previewsample "https://blazorplayground.syncfusion.com/embed/hXLfsVirCTHjHXFK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> The column chooser dialog displays the header text of each column by default. If the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) is not defined, the corresponding [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) name is shown instead. +> The column chooser dialog displays the header text of each column by default. If the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) is not defined, the corresponding [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) name is shown instead. The DataGrid automatically updates its layout and column widths based on the currently visible columns. ## Hide column in column chooser dialog @@ -158,11 +158,11 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hjVJihiLMwbAZjZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > * The `ShowInColumnChooser` property is applied to each column individually. By setting it to **false**, specific columns can be excluded from the column chooser dialog. -> * At least one column must remain visible in the Grid to ensure proper rendering and interaction. +> * At least one column must remain visible in the DataGrid to ensure proper rendering and interaction. ## Open column chooser via programmatically -The Syncfusion® Blazor DataGrid allows opening the column chooser dialog programmatically using an external button. Use the [OpenColumnChooserAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_OpenColumnChooserAsync_System_Nullable_System_Double__System_Nullable_System_Double__) method to display the dialog at a specific position on the page. +The Syncfusion® Blazor DataGrid allows opening the column chooser dialog programmatically using an external button. Use the [OpenColumnChooserAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_OpenColumnChooserAsync_System_Nullable_System_Double__System_Nullable_System_Double__) method to display the dialog at a specific position on the page. By default, the column chooser button appears in the right corner of the DataGrid and opens the dialog below it when clicked. The method allows programmatically opening the dialog at specific "X" and "Y" axis positions. | Parameter | Type | Description | |-----------|----------|-----------------------------------------------------------------------------| @@ -340,10 +340,12 @@ public class OrderData ## Change default search operator of the column chooser -The Syncfusion® Blazor DataGrid provides a search box in the column chooser dialog to filter column names. By default, the search uses the **StartsWith** operator. +The Syncfusion® Blazor DataGrid provides a search box in the column chooser dialog to filter column names. By default, the search functionality uses the **StartsWith** operator to match columns and display results. To modify this behavior, use the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Operator.html) property of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html). +The following example demonstrates changing the default search operator to `Contains`. + {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @@ -416,11 +418,16 @@ public class OrderData The Syncfusion® Blazor DataGrid allows customizing the column chooser dialog using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) and [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_FooterTemplate) properties of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html). These templates enable injecting custom content into the body and footer of the column chooser. +* `GridColumnChooserSettings.Template` – Customizes the main content area of the column chooser. Instead of showing a list of checkboxes with column names, a custom layout can be defined using this property. +* `GridColumnChooserSettings.FooterTemplate` – Customizes the footer area of the column chooser. By default, it includes "OK" and "Cancel" buttons. This property allows replacing or modifying the footer content. It is optional. + The parameters passed to the templates can be accessed using the implicit **context** parameter. ### Customize the content of column chooser -The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) property of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) is used to customize the content of the column chooser dialog. The **context** parameter can be typecast to [ColumnChooserTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserTemplateContext.html) to access the list of columns within the template. +The `Template` property of the `GridColumnChooserSettings` is used to customize the content of the column chooser dialog. The **context** parameter can be typecast to [ColumnChooserTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserTemplateContext.html) to access the list of columns within the template. + +In this example, [SfListView](https://blazor.syncfusion.com/documentation/listview/getting-started-webapp) is rendered inside the column chooser. Using `Clicked` event of `SfListView`, columns can be shown and hidden using [ShowColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnAsync_System_String_System_String_) and [HideColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumnAsync_System_String_System_String_) methods, allowing users to control column visibility directly from the column chooser interface. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -622,7 +629,7 @@ namespace Model ### Customize the footer of column chooser -The [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_FooterTemplate) property of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) allows customizing the footer area of the column chooser dialog. The **context** parameter can be typecast to [ColumnChooserFooterTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserFooterTemplateContext.html) to access the list of columns and perform actions such as applying or cancelling changes. +The `FooterTemplate` property of the `GridColumnChooserSettings` allows customizing the footer area of the column chooser dialog. The **context** parameter can be typecast to `ColumnChooserFooterTemplateContext` to access the list of columns and perform actions such as applying or cancelling changes. {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/column-menu.md b/blazor/datagrid/column-menu.md index 67f2bc464..c818cd64d 100644 --- a/blazor/datagrid/column-menu.md +++ b/blazor/datagrid/column-menu.md @@ -9,22 +9,20 @@ documentation: ug # Column Menu in Blazor DataGrid -The Syncfusion® Blazor DataGrid supports a column menu that provides quick access to features such as sorting, grouping, filtering, column chooser, and autofit. Clicking the column header’s menu icon displays a contextual menu with these options. +The Syncfusion® Blazor DataGrid provides a built-in column menu that offers quick access to essential column operations, such as sorting, grouping, filtering, column chooser, and autofit. This menu appears when the menu icon in a column header is clicked, enabling streamlined interaction with grid data. The column menu can be enabled by setting the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnMenu) property to `true` in the DataGrid configuration. -To enable the column menu, set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnMenu) property to **true** in the [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) configuration. - -The default column menu items are listed in the table: +The default column menu items are displayed in the following table. | Item | Description | |-----|-----| -| **SortAscending** | Sort the current column in ascending order. | -| **SortDescending** | Sort the current column in descending order. | -| **Group** | Groups the current column. | -| **Ungroup** | Ungroups the current column. | -| **AutoFit** | Adjusts the width of the current column to fit its content. | -| **AutoFitAll** | Adjusts the width of all columns to fit their content. | -| **ColumnChooser** | Opens the column chooser to manage column visibility. | -| **Filter** | Displays the filter option as defined in the [FilterSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) property. | +| `SortAscending` | Sort the current column in ascending order. | +| `SortDescending` | Sort the current column in descending order. | +| `Group` | Group the current column. | +| `Ungroup` | Ungroup the current column. | +| `AutoFit` | Autofit the current column. | +| `AutoFitAll` | Autofit all columns. | +| `ColumnChooser` | Choose the column visibility. | +| `Filter` | Show the filter option as given in [FilterSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type). | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -94,13 +92,11 @@ public class OrderData > * To disable the column menu for a specific column, set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**. > * To customize the menu items, define the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) property with the required options. -## Disable column menu for specific column - -The Syncfusion® Blazor DataGrid provides the ability to prevent the column menu from appearing for specific columns. This is useful when certain columns should not be customizable through the column menu. +## Prevent column menu for particular column -To disable the column menu for a specific column, set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**. +The column menu in DataGrid can be controlled at both the DataGrid-level and the column level. When the DataGrid's `ShowColumnMenu` property is enabled, every column displays its menu by default. To prevent the menu from appearing for a particular column, the column definition itself must explicitly set the `ShowColumnMenu` property to `false`. -The column menu is disabled for the **OrderID** column: +The following example demonstrates disabling the column menu for the "Order ID" column by setting the `ShowColumnMenu` property to `false`. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -167,11 +163,11 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hDBfiCVHTnFFingT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Add custom column menu item +## Adding custom column menu items -The Syncfusion® Blazor DataGrid supports adding custom items to the column menu using the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) property. This property accepts a collection of [ColumnMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuItemModel.html) objects. +The custom column menu item feature in Syncfusion® Blazor DataGrid allows extending the default column menu with additional options or replacing it entirely with custom items, depending on requirements. These items are defined using the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) property, which accepts a collection of [ColumnMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuItemModel.html) objects. Each object specifies attributes such as `Text`, `Id`, and optionally `IconCss` to represent the custom menu item. -Custom actions for these items can be defined in the [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked) event. +The functionality of these items is implemented through the [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked) event. This event is triggered whenever a menu item is selected, enabling identification of the item by its `Id` and execution of the corresponding action. In this configuration, two custom column menu items are added to clear sorting and grouping using the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) and [ClearGroupingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearGroupingAsync) methods: @@ -264,13 +260,11 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/htVJMrMgCLBDWpXz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customize menu items for specific columns - -The Syncfusion® Blazor DataGrid allows customizing the visibility of column menu items for specific columns. This is useful when certain actions, such as filtering or grouping, should not be available for specific columns. +## Customize menu items for particular columns -To hide a menu item for a specific column, set the [MenuItem.Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property to **true** in the [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen) event. +The Syncfusion® Blazor DataGrid allows menu items to be shown or hidden for individual columns, ensuring that only relevant options are displayed. This customization is achieved through the [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen) event, where the [MenuItem.Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property can be set to `true` for any item that should not appear in the menu of a particular column. This approach provides fine-grained control, making the column menu context-aware and preventing unnecessary actions from being presented in columns where they are not applicable. -The **Filter** item is hidden when the column menu is opened for the **OrderID** column. +The following example demonstrates hiding the `Filter` item in the column menu for the "Order ID" column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -359,9 +353,9 @@ public class OrderData ## Render nested column menu -The Syncfusion® Blazor DataGrid supports rendering a nested column menu that provides extended options within the column header menu. This feature allows organizing related actions under submenus for better usability. +Nested column menus in the Syncfusion® Blazor DataGrid provide an organized way to display extended options within column headers. Instead of listing all actions at the same level, items can be grouped into sub-menus, making the menu easier to navigate and more structured. This feature is enabled through the `ColumnMenuItems` property, which accepts a collection of built-in menu item strings or custom menu item objects. By defining items with nested structures, additional actions related to a column can be grouped logically under sub-menus. -To enable a nested column menu, define the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) property. This property accepts a collection of [ColumnMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuItemModel.html) objects, where each item can include a submenu by specifying its [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuItemModel.html#Syncfusion_Blazor_Grids_ColumnMenuItemModel_Items) property. +The `ColumnMenuItems` property can be set up to include a nested menu, such as "Sub Menu", alongside the existing default column menu items. This allows the column menu to display both the standard options and additional grouped actions within a structured sub-menu. This property accepts a collection of [ColumnMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuItemModel.html) objects, where each item can include a submenu by specifying its [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnMenuItemModel.html#Syncfusion_Blazor_Grids_ColumnMenuItemModel_Items) property. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -405,7 +399,7 @@ To enable a nested column menu, define the [ColumnMenuItems](https://help.syncfu } else if (args.Item.Text == "Option1") { - // custom function + // Custom function. // Here, you can customize your code. } else @@ -455,13 +449,13 @@ public class OrderData {% endhighlight %} {% endtabs %} -## Customize the icon of column menu +## Customize the column menu icon -The Syncfusion® Blazor DataGrid allows customizing the column menu icon by overriding the default CSS class **.e-icons.e-columnmenu**. This is achieved by applying a custom CSS rule with the **content** property to display a different icon or Unicode character. +The Syncfusion® Blazor DataGrid allows customizing the column menu icon by overriding the default CSS class `.e-icons.e-columnmenu`. This is done using the CSS `content` property, where either a Unicode character or an icon font class can be specified to replace the default icon. -**Steps to customize the icon:** +**Customization steps:** -1. Override the default CSS class: +1. Add the CSS code to override the default DataGrid class: ```css .e-grid .e-columnheader .e-icons.e-columnmenu::before { @@ -544,10 +538,12 @@ public class OrderData ## Column menu events -The Syncfusion® Blazor DataGrid provides events that are triggered during column menu interactions. These events allow execution of custom logic before the menu opens and after an item is clicked, enabling customization and UI updates. +Column menu events in the Syncfusion® Blazor DataGrid provide ways to customize behavior when the menu is opened or when an item is clicked. These events make it possible to extend functionality or apply specific logic based on user interactions. -1. [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen): Triggered before the column menu opens. -2. [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked): Triggered when a column menu item is clicked. +| Event | Description | +|-------|-------------| +| [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen) | Triggers before the column menu opens. | +| [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked) | Triggers when a column menu item is clicked. | ### OnColumnMenuOpen @@ -560,11 +556,11 @@ The event uses the [ColumnMenuOpenEventArgs](https://help.syncfusion.com/cr/blaz | Property | Type | Description | |-------------------|-------------------------------------|-------------------------------------------------------------------------------------------------| | Cancel | bool | Indicates whether to prevent the column menu from opening. Set to **true** to cancel opening. | -| Column | GridColumn | Represents the grid column where the column menu is currently open. | +| Column | GridColumn | Represents the DataGrid column where the column menu is currently open. | | ColumnMenuIndex | int | Indicates the level of the menu item within the menu hierarchy. Starts from 0 for top-level. | | Items | List<MenuItem> | The list of menu items displayed in the column menu. | | Left | double | The left position of the column menu relative to the document or container. | -| ParentItem` | MenuItem | The parent menu item of the currently clicked sub-menu item. Null if no parent exists. | +| ParentItem | MenuItem | The parent menu item of the currently clicked sub-menu item. Null if no parent exists. | | Top | double | The top position of the column menu relative to the document or container. | ### ColumnMenuItemClicked @@ -577,7 +573,7 @@ The event uses the [ColumnMenuClickEventArgs](https://help.syncfusion.com/cr/bla | Property | Type | Description | |----------|------|-------------| -| Column | GridColumn | The grid column associated with the column menu popup. | +| Column | GridColumn | The DataGrid column associated with the column menu popup. | | Element | ElementReference | The DOM element that triggered the event. | | Event | System.EventArgs | Provides event details for the column menu interaction. | | Item | Navigations.MenuItemModel | The menu item that was clicked in the column menu. | diff --git a/blazor/datagrid/column-spanning.md b/blazor/datagrid/column-spanning.md index 5fe449e87..569883baa 100644 --- a/blazor/datagrid/column-spanning.md +++ b/blazor/datagrid/column-spanning.md @@ -9,9 +9,9 @@ documentation: ug # Column spanning in Blazor DataGrid -Column spanning in the Syncfusion Blazor DataGrid provides automatic vertical merging of adjacent cells within the same column when identical values are detected. This feature enhances data readability by consolidating repeated values into a single, taller cell, making it particularly effective for scenarios where the same value appears across consecutive rows. +Column spanning merges adjacent cells with identical values vertically, producing a cleaner and more structured layout. This feature reduces duplication in consecutive cells, highlights grouped information, and improves readability by presenting related data in a compact form. Reports and tabular views become easier to interpret when repetitive values are visually combined into a single spanned cell. -The functionality is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **AutoSpanMode.Column**. Once applied, the grid evaluates each column and merges stacked cells that share identical values, thereby reducing visual redundancy and presenting a cleaner, more structured layout. The merging process is fully declarative and requires no additional code or preprocessing. +The [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property, when set to **AutoSpanMode.Column**, activates automatic merging of adjacent cells with identical values. This removes the need for manual configuration and results in a cleaner layout where merged cells highlight patterns and relationships within the data. Column spanning is part of the broader [AutoSpanMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.AutoSpanMode.html) enumeration, which provides multiple options for customizing cell merging behavior in the Syncfusion Blazor DataGrid. The available modes include **None**, **Row**, **Column**, and **HorizontalAndVertical**. @@ -25,7 +25,7 @@ Column spanning is part of the broader [AutoSpanMode](https://help.syncfusion.co ## Enable column spanning -Vertical cell merging in the Syncfusion Blazor DataGrid is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **AutoSpanMode.Column**. In this mode, the grid automatically merges stacked cells that share identical values within the same column. This reduces redundancy across consecutive rows and provides a cleaner, more structured layout for repeated data. +Vertical cell merging in the Syncfusion Blazor DataGrid is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) to **AutoSpanMode.Column**. In this mode, the DataGrid automatically merges stacked cells that share identical values within the same column. This reduces redundancy across consecutive rows and provides a cleaner, more structured layout for repeated data. {% tabs %} @@ -352,7 +352,7 @@ public class EmployeeDetails ## Disable column spanning for specific column -Column spanning in Syncfusion Blazor DataGrid can be disabled for a specific column(s) by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component to **AutoSpanMode.None**. This configuration provides precise control, enabling automatic spanning across the grid while excluding column(s) where merging is not required. +Column spanning in Syncfusion Blazor DataGrid can be disabled for a specific column(s) by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **AutoSpanMode.None**. This configuration provides precise control, enabling automatic spanning across the DataGrid while excluding column(s) where merging is not required. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -678,36 +678,34 @@ public class EmployeeDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/rtBSshCRIKBMHUsU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The effective spanning behavior in the Syncfusion Blazor DataGrid is determined by the intersection of grid-level and column-level [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) modes. A column can only restrict the spanning directions permitted at the grid-level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns. +The effective spanning behavior in the Syncfusion Blazor DataGrid is determined by the intersection of DataGrid-level and column-level [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoSpan) modes. A column can only restrict the spanning directions permitted at the DataGrid-level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the DataGrid while allowing fine-grained control for individual columns. **Combination Matrix** -| Grid AutoSpan | Column AutoSpan | Effective Behavior | +| DataGrid AutoSpan | Column AutoSpan | Effective Behavior | |---|---|---| -| None | None | No spanning. Both grid and column explicitly disable spanning. | -| None | Row | No spanning. Grid-level **None** overrides column-level **Row**. | -| None | Column | No spanning. Grid-level **None** overrides column-level **Column**. | -| None | HorizontalAndVertical | No spanning. Grid-level **None** overrides all spanning modes. | +| None | None | No spanning. Both DataGrid and column explicitly disable spanning. | +| None | Row | No spanning. DataGrid-level **None** overrides column-level **Row**. | +| None | Column | No spanning. DataGrid-level **None** overrides column-level **Column**. | +| None | HorizontalAndVertical | No spanning. DataGrid-level **None** overrides all spanning modes. | | Row | None | No spanning. Column explicitly disables spanning. | -| Row | Row | Row spanning only. Both grid and column enable row spanning. | -| Row | Column | No spanning. Grid only allows row spanning; column cannot enable column spanning. | -| Row | HorizontalAndVertical | Row spanning only. Grid only allows row spanning. | +| Row | Row | Row spanning only. Both DataGrid and column enable row spanning. | +| Row | Column | No spanning. DataGrid only allows row spanning; column cannot enable column spanning. | +| Row | HorizontalAndVertical | Row spanning only. DataGrid only allows row spanning. | | Column | None | No spanning. Column explicitly disables spanning. | -| Column | Row | No spanning. Grid only allows column spanning; column cannot enable row spanning. | -| Column | Column | Column spanning only. Both grid and column enable column spanning. | -| Column | HorizontalAndVertical | Column spanning only. Grid only allows column spanning. | +| Column | Row | No spanning. DataGrid only allows column spanning; column cannot enable row spanning. | +| Column | Column | Column spanning only. Both DataGrid and column enable column spanning. | +| Column | HorizontalAndVertical | Column spanning only. DataGrid only allows column spanning. | | HorizontalAndVertical | None | No spanning. Column explicitly disables both directions. | -| HorizontalAndVertical | Row | Row spanning only. Grid allows both; column narrows to Row. | -| HorizontalAndVertical | Column | Column spanning only. Grid allows both; column narrows to Column. | -| HorizontalAndVertical | HorizontalAndVertical | Row and Column spanning. Both grid and column enable both directions. | +| HorizontalAndVertical | Row | Row spanning only. DataGrid allows both; column narrows to Row. | +| HorizontalAndVertical | Column | Column spanning only. DataGrid allows both; column narrows to Column. | +| HorizontalAndVertical | HorizontalAndVertical | Row and Column spanning. Both DataGrid and column enable both directions. | --- ## Apply column spanning via programmatically -In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support for manually merging cells when custom layout behavior is required. This functionality is available through the [MergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_MergeCellsAsync_Syncfusion_Blazor_Grids_MergeCellInfo_) method, which enables the definition of rectangular regions of cells to be merged programmatically. - -Use [MergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_MergeCellsAsync_Syncfusion_Blazor_Grids_MergeCellInfo_) method to manually merge cells by defining rectangular regions. This method supports both single and batch merging, allowing precise control over layout customization when automatic spanning is insufficient. +Column spanning in the Syncfusion Blazor DataGrid merges adjacent cells to create a cleaner and more structured layout. Spanning can be controlled dynamically by using the [MergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_MergeCellsAsync_Syncfusion_Blazor_Grids_MergeCellInfo_) method, based on column values and specific conditions. This approach enables custom logic to span cells, allowing flexible presentation of time ranges, grouped values, or contextual highlights. The [MergeCellsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_MergeCellsAsync_Syncfusion_Blazor_Grids_MergeCellInfo_) method is overloaded, meaning multiple versions of the same method name exist, but each accepts different parameter types to handle different use cases. This approach provides flexibility while maintaining a consistent API design. @@ -1474,5 +1472,5 @@ The Column spanning is not compatible with the following features: 1. AutoFill. 2. Detail-Template. -3. Grouping – Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (**caption row**). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the grid. +3. Grouping – Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (**caption row**). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the DataGrid. diff --git a/blazor/datagrid/column-template.md b/blazor/datagrid/column-template.md index 0379e5871..3973cb18f 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -1145,9 +1145,9 @@ Next, create a new Razor page with the appropriate routing URL and include any r {% endhighlight %} {% endtabs %} -The following GIF represents template routing in Grid +The following GIF represents template routing in DataGrid ![Blazor DataGrid with routing template.](./images/blazor-datagrid-template-routing.gif) ## See also -* [FileUpload in Grid Column Template](https://www.syncfusion.com/forums/151021/fileupload-in-grid-column-template) \ No newline at end of file +* [FileUpload in DataGrid Column Template](https://www.syncfusion.com/forums/151021/fileupload-in-grid-column-template) \ No newline at end of file diff --git a/blazor/datagrid/columns.md b/blazor/datagrid/columns.md index 7017ca39a..faafb7510 100644 --- a/blazor/datagrid/columns.md +++ b/blazor/datagrid/columns.md @@ -9,18 +9,34 @@ documentation: ug # Columns in Blazor DataGrid -Columns are the core structural elements in the Syncfusion® Blazor DataGrid. -Each column defines: +In Syncfusion® Blazor DataGrid, columns are the fundamental building blocks that display data from a data source. Each column maps to a specific field in the data source and is responsible for rendering values in the required format. For example, a dataset containing customer details such as "ID", "Name", "Email", and "Purchase Date" will present each field as an individual column in the DataGrid. -* The data field to display. -* Formatting and style information. -* Interactive features such as editing, filtering, and sorting. +A column definition commonly includes the following properties: +- `Field`: The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property establishes the connection between the dataset and the column by mapping a data source field to a DataGrid column. This property is required for performing data operations between the DataGrid and the data source. +- `HeaderText`: The [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property defines the text displayed in the column header. It provides a clear label for the column, making the DataGrid easier to read and understand. -Effective column configuration ensures data is presented clearly, remains accessible, and supports all required Grid interactions. +```cs + + + + + + + + +``` + +- `SfGrid`: The main DataGrid container. +- `GridColumns`: A container for all individual column definitions. +- `GridColumn`: Defines an individual column. ## Column Types -The Syncfusion® Blazor DataGrid utilizes columns to organize and display diverse data. Each column can be assigned a specific data type using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component. This property accepts values from the [ColumnType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html) enumeration, which is crucial for determining how data is displayed and formatted (e.g., numeric, date, or string). +The Syncfusion® Blazor DataGrid utilizes columns to organize and display diverse data. Each column can be assigned a specific data type using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property accepts values from the [ColumnType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html) enumeration, which is crucial for determining how data is displayed and formatted (e.g., numeric, date, or string). + +### Supported column types + +The DataGrid provides column types to represent different data types. Each type ensures that values are displayed accurately and that operations such as sorting and filtering function properly. The supported column types are: The DataGrid supports the following column types: @@ -119,46 +135,49 @@ The DataGrid supports the following column types: {% previewsample "https://blazorplayground.syncfusion.com/embed/hDLUiWZmBWcefthH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > * When the `Type` property is not defined, the column's data type is inferred from the first record present in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource). -> * If the first record of the `DataSource` contains a `null` or empty `value` for a specific column, explicitly defining the `Type` for that column is necessary. This ensures the Grid accurately determines the appropriate filter dialog to display. +> * If the first record of the `DataSource` contains a `null` or empty `value` for a specific column, explicitly defining the `Type` for that column is necessary. This ensures the DataGrid accurately determines the appropriate filter dialog to display. ### Difference Between Boolean and CheckBox Column Types The Syncfusion® Blazor DataGrid provides two distinct column types for handling boolean values and row selection: -* [Boolean](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_Boolean): Binds to boolean data fields and supports editing of boolean property values. -* [Checkbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_CheckBox): Enables row selection and deselection. When a column is set to `ColumnType.CheckBox`, the Grid uses **multiple** selection mode by default. +* [Boolean](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_Boolean): Binds to boolean data fields and supports editing of boolean property values.Represents `true` or `false` values from the data source.Values can be edited. By default, values are displayed as text, but can be shown as checkboxes by setting the [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisplayAsCheckBox) property. + +* [Checkbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_CheckBox): Enables row selection and deselection. When a column is set to `ColumnType.CheckBox`, the DataGrid uses **Multiple** selection mode by default. If multiple CheckBox columns are defined, selecting a checkbox in one column automatically selects the corresponding checkboxes in other CheckBox columns. ## Column Width -The Syncfusion Blazor DataGrid allows adjustment of column width using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property accepts values in **pixels** or **percentages**. For example, set `100` for 100 pixels or `25%` for 25% of the available width. +The Syncfusion® Blazor DataGrid allows adjustment of column width using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property accepts values in **pixels** or **percentages**. For example, set `100` for 100 pixels or `25%` for 25% of the available width. **Key behaviors** -1. Column width is determined by the sum of all column widths. For example, a Grid with four columns and a total width of 800 pixels will allocate 200 pixels to each column by default. +1. Column width is determined by the sum of all column widths. For example, a DataGrid with four columns and a total width of 800 pixels will allocate 200 pixels to each column by default. 2. If some columns have specified widths and others do not, any remaining width is distributed equally among columns without explicit width definitions. -3. Percentage widths are responsive and adjust based on the Grid container's size. +3. Percentage widths are responsive and adjust based on the DataGrid container's size. 4. When columns are resized manually, a **minimum width** is enforced to maintain readability. By default, this minimum width is 10 pixels. -5. If the total width of all columns exceeds the Grid container's width, a horizontal scrollbar appears. +5. If the total width of all columns exceeds the DataGrid container's width, a horizontal scrollbar appears. 6. When columns are hidden using the column chooser, their width is removed, and the remaining visible columns expand to fill the available space. -7. If the parent element has a fixed width, the Grid inherits it; otherwise, the Grid adjusts dynamically. +7. If the parent element has a fixed width, the DataGrid inherits it; otherwise, the DataGrid adjusts dynamically. -8. When `AllowResizing` is enabled, columns without a specified width default to 200 pixels. +8. When [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowResizing) is enabled, columns without a specified width default to 200 pixels. -**Supported types for column width** +### Supported column width types The Syncfusion® Blazor DataGrid supports the following three types of column width: **1. Auto** -The column width is automatically calculated based on the content within its cells. If the content exceeds the `Width` setting, it is truncated with an ellipsis (...). +The column width is automatically calculated based on the content within its cells. If the content exceeds the `Width` setting, it is truncated with an ellipsis (...). at the end. To allow a column to adjust its width dynamically based on content, set the `Width` property of the `GridColumn` to "auto". + +DataGrid can combine both flexible and fixed-width columns to create a balanced layout. For example, consider three columns "Order ID", "Customer Name", and "Freight". The "Customer Name" column automatically adjusts its width based on the length of the names, while the "Order ID" and "Freight" columns remain fixed. This ensures that numeric fields stay consistent while text fields expand as needed. ```cshtml @@ -166,7 +185,7 @@ The column width is automatically calculated based on the content within its cel **2. Percentage** -The column width is specified as a **percentage** of the Grid container's total width. For example, `25%` occupies 25% of the Grid `Width`. +Column width can be defined as a **percentage** relative to the total width of the DataGrid container. For example, assigning "25%" to a column will allocate one-fourth of the DataGrid's width to that column. This approach is useful for distributing space proportionally across columns. ```cshtml @@ -174,7 +193,7 @@ The column width is specified as a **percentage** of the Grid container's total **3. Pixel** -The column width is specified as an absolute **pixel** value. For example, a column width of `100px` will have a fixed width of 100 pixels, regardless of the Grid container's size. +The column width can be defined using an absolute **pixel** value. For example, setting a column width to "100px" means the column will always occupy "100" pixels, regardless of the DataGrid container's size. The width for `GridColumn` can be set as pixels in the DataGrid configuration as shown below: ```cshtml @@ -248,15 +267,17 @@ public class OrderData ## Column Formatting -Column formatting is a powerful feature in the Syncfusion® Blazor DataGrid that allows customization of data display within Grid columns. Various formatting options are available to meet specific requirements, such as displaying numbers with particular formats, formatting dates according to a specific locale, and using templates to format column values. +Column formatting is a powerful feature in the Syncfusion® Blazor DataGrid that allows customization of data display within DataGrid columns. Various formatting options are available to meet specific requirements, such as displaying numbers with particular formats, formatting dates according to a specific locale, and using templates to format column values. The [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property can be used to specify the format for column values. **Key Points** -* Formatting uses the **internalization** library for culture-specific display. +* Formatting uses the [Globalization](https://blazor.syncfusion.com/documentation/datagrid/global-local#localization) library for culture-specific display. * Default formatting applies **en-US** locale for numbers and dates. * Custom format strings or functions can be assigned to `Format`. +* The available format codes may vary depending on the data type of the column. +* Ensure that the format string is valid and compatible with the data type of the column to avoid unexpected results. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -328,14 +349,15 @@ The [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridC ### Number formatting -The Syncfusion® Blazor DataGrid allows customizing the display of numeric values in columns using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property. This property supports both standard numeric format strings and custom numeric format strings. +The Syncfusion® Blazor DataGrid allows customizing the display of numeric values in columns using the `Format`property. Standard numeric format strings or custom numeric format strings specify the desired presentation. The `Format` property of DataGrid columns can be used to specify the number format for numeric columns. | Format | Description | Remarks | |--------|-------------------|------------------------------------------------------------| | **N** | Numeric format | Use N2, N3, etc., to specify the number of decimal places. | | **C** | currency format | Use C2, C3, etc., for currency with specified precision. | -| **P** | Percentage format | Use C2, C3, etc., for currency with specified precision. | +| **P** | Percentage format | Use P2, P3, etc., where the number indicates the number of decimal places to display. The percentage format expects input values in the range of 0 to 1. For example, a cell value of "0.2" is displayed as "20%". | +The following example code demonstrates the formatting of data for "Mark 1" and "Mark 2" using the `N` format, "Percentage of Marks" using the `P` format, and "Fees" using the `C` format. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -417,16 +439,16 @@ public class OrderData Date formatting in Syncfusion® Blazor DataGrid columns customizes how date values appear. Standard date format strings such as **"d"**, **"D"**, **"MMM dd, yyyy"**, or custom formats can be applied using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property. +Additionally, custom format strings allow full control over date presentation, including separators, time components, and locale-specific patterns. + The following table shows examples of custom date formats and their output: | Format | Formatted Value | |-----------------------------------------------|---------------------------| | `Type="ColumnType.Date" Format="dd/MM/yyyy"` | 04/07/1996 | | `Type="ColumnType.Date" Format="dd.MM.yyyy"` | 04.07.1996 | -| `Type="ColumnType.Date" Format="MM/dd/yyyy hh:mm tt"` | 04/07/1996 12:00 AM | -| `Type="ColumnType.Date" Format="MM/dd/yyyy hh:mm:ss tt"` | 04/07/1996 12:00:00 AM | - -Custom format strings allow full control over date presentation, including separators, time components, and locale-specific patterns. +| `Type="ColumnType.DateTime" Format="MM/dd/yyyy hh:mm tt"` | 04/07/1996 12:00 AM | +| `Type="ColumnType.DateTime" Format="MM/dd/yyyy hh:mm:ss tt"` | 04/07/1996 12:00:00 AM | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -613,7 +635,9 @@ namespace LocalizationSample.Client ### Format template column value -In Syncfusion® Blazor DataGrid, template columns provide flexibility to customize how data is displayed. This approach is useful for improving readability and presenting values such as dates or numbers in a specific format. +Template columns in Syncfusion® Blazor DataGrid enable customization of column value appearance through HTML templates. Number or date formatting can also be applied within template columns to control the display of values. + +In this example, **“Order Date”** value displayed in the format **“dd/MMM/yyyy”**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -713,7 +737,7 @@ public class OrderData ### Custom formatting -The Syncfusion® Blazor DataGrid supports custom formatting for numeric and date columns, allowing data to be displayed in a specific format based on application requirements. The Format property can be assigned a custom format string or a variable containing the format pattern. +The Syncfusion® Blazor DataGrid supports custom formatting for numeric and date columns, allowing data to be displayed in a specific format based on application requirements. Custom formats can be applied to numeric or date fields to display values in a specific style as required. The `Format` property can be assigned a custom format string or a variable containing the format pattern. In this configuration, **numberFormatOptions** is used to format the **Freight** column with four decimal places, and **dateFormatOptions** is used to format the **OrderDate** column to display the day of the week, month abbreviation, day, and two-digit year (e.g., Sun, May 8, 23). @@ -799,13 +823,9 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/LjBTsirliPKINLsC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Text and Header Alignment +## Text align -The Syncfusion® Blazor DataGrid provides options to align both column content and header text for better readability and presentation. - -### Text Alignment - -The Syncfusion® Blazor DataGrid allows aligning text within columns using the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property supports below options: +The alignment of text within DataGrid column cells can be controlled using the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) property. This property specifies the alignment of text within the cells of a particular column. By default, text is aligned to the `Left`, but the alignment can be changed by setting the `TextAlign` property to one of the following options: * **None** – No specific alignment; defaults to **Left**. * **Left** – Aligns text to the left side of the column. @@ -817,7 +837,7 @@ Text alignment is useful for improving readability, especially for numeric or da ### Header Text Alignment -The Syncfusion® Blazor DataGrid allows aligning header text using the [HeaderTextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTextAlign) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property also accepts values from the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) enum: +The Syncfusion® Blazor DataGrid allows aligning header text using the [HeaderTextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTextAlign) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property also accepts values from the `TextAlign` enum: * **None** – No specific alignment; defaults to **Left**. * **Left** – Aligns header text to the left. @@ -865,7 +885,7 @@ The Syncfusion® Blazor DataGrid allows alig new ColumnAlignmentOption() { Text= "Center" }, }; - // Reference to the Grid + // Reference to the Grid. private SfGrid grid; public void OnValueChange(ChangeEventArgs args) { @@ -949,7 +969,7 @@ N >* The `TextAlign` property only changes the alignment of cell content, not th ## Render boolean values as checkbox -Boolean values in the Syncfusion® Blazor DataGrid can be displayed as checkboxes instead of text. This is achieved by enabling the [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisplayAsCheckBox) property in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) configuration. +Boolean values in the Syncfusion® Blazor DataGrid can be displayed as checkboxes instead of text. This is achieved by enabling the [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisplayAsCheckBox) property in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) configuration. This property is useful for displaying boolean column values as checkboxes instead of the default text representation of `true` or `false`. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1044,9 +1064,9 @@ The Syncfusion® Blazor DataGrid provides mu ### AutoFit on double-click -The Syncfusion® Blazor DataGrid allows columns to automatically adjust their width based on the maximum content width when you double-click the resizer symbol in the column header. This ensures that all data in the grid rows is displayed without wrapping. +The Syncfusion® Blazor DataGrid allows columns to automatically adjust their width based on the maximum content width when you double-click the resizer symbol in the column header. This ensures that all data in the DataGrid rows is displayed without wrapping. -To enable this feature, Set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowResizing) property to **true** in the grid. +To enable this feature, Set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowResizing) property to **true** in the DataGrid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1164,7 +1184,7 @@ The [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } public void DataboundHandler(object args) { - this.Grid.AutoFitColumnsAsync(); + this.Grid.AutoFitColumnsAsync(new string[] { "ShipAddress", "ShipName" }); } } {% endhighlight %} @@ -1218,7 +1238,7 @@ The [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLICsMKBvmMosGJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqWtUWCHFCmyCS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} **2. Autofit all columns** @@ -1249,7 +1269,7 @@ The [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } public void DataboundHandler(object args) { - this.Grid.AutoFitColumnsAsync(new string[] { "ShipAddress", "ShipName" }); + this.Grid.AutoFitColumnsAsync(); } } {% endhighlight %} @@ -1303,11 +1323,13 @@ The [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqWtUWCHFCmyCS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLICsMKBvmMosGJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> All columns can be auto-fitted by invoking the `AutoFitColumnsAsync` method without specifying column names. ### AutoFit with Empty Space -The AutoFit feature maintains the defined column widths without stretching columns to fill unused space in the grid. When the total width of all columns is less than the grid width, empty space remains visible instead of columns auto-adjusting. +The AutoFit feature adjusts column widths in the DataGrid based on the values defined in the column declarations. If the total width of all columns is smaller than the overall DataGrid width, the remaining space will appear as white space. In this case, the columns do not automatically adjust to fill the entire DataGrid width. Enable this behavior by setting the [AutoFit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoFit) property to **true** of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html). This ensures that each column renders only with the width specified in its definition. @@ -1382,9 +1404,9 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/VXhSZUBQeWplEcFY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> If any column width is undefined, that column automatically adjusts to fill the remaining grid width, even when `AutoFit` is enabled. +> If any `GridColumn` width is **undefined**, that column automatically adjusts to fill the remaining DataGrid width, even when `AutoFit` is enabled. -### AutoFit on Column Visibility Change +### AutoFit on column visibility change using column chooser The Syncfusion® Blazor DataGrid can automatically adjust column widths when column visibility changes through the column chooser. This behavior is implemented by invoking [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoFitColumnsAsync) from the [ColumnVisibilityChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnVisibilityChanged) event, which is raised after the column chooser applies visibility updates. The [ColumnVisibilityChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnVisibilityChangedEventArgs.html) class provides context for the columns that became visible or hidden. @@ -1471,7 +1493,7 @@ public class OrderData ## Fixed columns -The Syncfusion® Blazor DataGrid supports fixing specific columns at the beginning of the grid to maintain their position during scrolling. Fixed columns cannot be **reordered** or **grouped** and remain in the defined order. +The Syncfusion® Blazor DataGrid supports fixing specific columns at the beginning of the DataGrid to maintain their position during scrolling. Fixed columns cannot be **reordered** or **grouped** and remain in the defined order. Enable this behavior by setting the [FixedColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FixedColumn) property to **true** for the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). @@ -1552,7 +1574,7 @@ The Syncfusion® Blazor DataGrid supports dy ### Show or hide columns via property -Column visibility in the Syncfusion® Blazor DataGrid can be controlled through the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property. Setting this property to **true** displays the column, while setting it to **false** hides the column from the grid layout. +Column visibility in the Syncfusion® Blazor DataGrid can be controlled through the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property. Setting this property to **true** displays the column, while setting it to **false** hides the column from the DataGrid layout. The `Visible` property is set to **false** for the **ShipCity** column. @@ -1629,8 +1651,8 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/VDhUMXqWKAAPxnOA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * Hiding a column using the `Visible` property affects only the grid’s UI. The data for the hidden column remains in the underlying data source and can be accessed or modified programmatically. -> * When a column is hidden, its width is excluded from the total grid width calculation. +> * Hiding a column using the `Visible` property affects only the DataGrid’s UI. The data for the hidden column remains in the underlying data source and can be accessed or modified programmatically. +> * When a column is hidden, its width is excluded from the total DataGrid width calculation. > * To hide a column permanently, set the `Visible` property to **false** in the column definition or remove the column definition entirely. ### Show or hide columns via programmatically @@ -1651,7 +1673,7 @@ Columns can be dynamically shown or hidden based on their [HeaderText](https://h **1. Show or hide a single column** -To show or hide a single column in the Grid by its `HeaderText` property, use [ShowColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnAsync_System_String_System_String_) or [HideColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumnAsync_System_String_System_String_) method. +To show or hide a single column in the DataGrid by its `HeaderText` property, use [ShowColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnAsync_System_String_System_String_) or [HideColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumnAsync_System_String_System_String_) method. | Parameter Name | Type | Description | |---------------|--------|-----------------------------------------------------------------------------| @@ -1660,7 +1682,7 @@ To show or hide a single column in the Grid by its `HeaderText` property, use [S **2. Show or Hide Multiple Columns** -To show or hide one or more columns in the Grid by their `HeaderText` property, use [ShowColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnsAsync_System_String___System_String_) or [HideColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumnsAsync_System_String___System_String_) method. +To show or hide one or more columns in the DataGrid by their `HeaderText` property, use [ShowColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnsAsync_System_String___System_String_) or [HideColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumnsAsync_System_String___System_String_) method. | Parameter Name | Type | Description | |---------------|-----------|-----------------------------------------------------------------------------| @@ -1694,12 +1716,12 @@ To show or hide one or more columns in the Grid by their `HeaderText` property, } public void Show() { - // Show columns by its header text + // Show columns by its header text. this.DefaultGrid.ShowColumnsAsync(ColumnItems, "HeaderText"); } public void Hide() { - // Hide columns by its header text + // Hide columns by its header text. this.DefaultGrid.HideColumnsAsync(ColumnItems, "HeaderText"); } } @@ -1756,7 +1778,7 @@ Columns can be dynamically shown or hidden based on their [Field](https://help.s **1. Show or hide a single column** -To show or hide a single column in the Grid by its `Field` property, use [ShowColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnAsync_System_String_System_String_) or [HideColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumnAsync_System_String_System_String_) method. +To show or hide a single column in the DataGrid by its `Field` property, use [ShowColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnAsync_System_String_System_String_) or [HideColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumnAsync_System_String_System_String_) method. | Parameter Name | Type | Description | |---------------|--------|-------------------------------------------------------------------------| @@ -1766,7 +1788,7 @@ To show or hide a single column in the Grid by its `Field` property, use [ShowCo **2. Show or Hide Multiple Columns** -To show or hide one or more columns in the Grid by their `Field` property, use [ShowColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnsAsync_System_String___System_String_) or [HideColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumnsAsync_System_String___System_String_) method. +To show or hide one or more columns in the DataGrid by their `Field` property, use [ShowColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnsAsync_System_String___System_String_) or [HideColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumnsAsync_System_String___System_String_) method. | Parameter Name | Type | Description | |---------------|-----------|-------------------------------------------------------------------------| @@ -1799,12 +1821,12 @@ To show or hide one or more columns in the Grid by their `Field` property, use [ } public void Show() { - // Show columns by field + // Show columns by field. this.DefaultGrid.ShowColumnsAsync(ColumnItems, "Field"); } public void Hide() { - // Hide columns by field + // Hide columns by field. this.DefaultGrid.HideColumnsAsync(ColumnItems, "Field"); } } @@ -2043,7 +2065,7 @@ For detailed guidance, refer to the [Customize Cell Styles](https://blazor.syncf ## Manipulating columns -The Syncfusion® Blazor DataGrid provides options to access, add, and remove columns dynamically using properties, methods, and events. +This section explains working with columns in the Syncfusion® Blazor DataGrid, including accessing columns, changing column settings, and adding or removing columns using the Grid's properties, methods, and events. ### Accessing Columns @@ -2085,7 +2107,7 @@ The [GetForeignKeyColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion The [GetColumnFieldNamesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnFieldNamesAsync) method retrieves the list of all column field names. -> For a complete list of Grid methods, refer to the [SfGrid Methods API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#methods). +> For a complete list of DataGrid methods, refer to the [SfGrid Methods API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#methods). ### Adding or Removing Columns @@ -2093,7 +2115,7 @@ The Syncfusion® Blazor DataGrid allows dyna - Use the **Add** method to insert a new column object into the Columns collection. - Use the **RemoveAt** method to remove a column by its index from the Columns collection. -- After adding or removing columns, call [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) to update the Grid. +- After adding or removing columns, call [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) to update the DataGrid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -2204,7 +2226,7 @@ await Grid.RefreshColumnsAsync(); The Syncfusion® Blazor DataGrid supports responsive column visibility using the [HideAtMedia](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HideAtMedia) property. This property accepts valid CSS [Media Queries](http://cssmediaqueries.com/what-are-css-media-queries.html) and hides columns based on screen width conditions. -Use `HideAtMedia` property to create responsive layouts where certain columns are hidden automatically on smaller screens, improving readability and reducing horizontal scrolling. +Use `HideAtMedia` property to create responsive layouts where certain columns are hidden automatically on smaller screens, improving readability and reducing horizontal scrolling. This example shows a DataGrid with three columns: “Order ID”, “Customer ID”, and “Freight”. The “OrderID” column uses `HideAtMedia` set to “(min-width: 700px)”, hiding the column when the browser width is “700px” or less. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -2276,7 +2298,7 @@ Use `HideAtMedia` property to create responsive layouts where certain columns ar ## See also -* [How to create a Custom Grid Column component](https://support.syncfusion.com/kb/article/11220/blazor-grid-how-to-create-a-custom-grid-column-component) +* [How to create a Custom Grid Column](https://support.syncfusion.com/kb/article/11220/blazor-grid-how-to-create-a-custom-grid-column-component) * Comprehensive information about the Syncfusion Blazor DataGrid and its features is available through the following resources: * **Feature Overview:** The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour provides a complete overview of available capabilities. diff --git a/blazor/datagrid/foreignKey-column.md b/blazor/datagrid/foreignKey-column.md index d11587ffe..f3f24cc22 100644 --- a/blazor/datagrid/foreignKey-column.md +++ b/blazor/datagrid/foreignKey-column.md @@ -9,17 +9,35 @@ documentation: ug # Foreign key column in Blazor DataGrid -The Syncfusion® Blazor DataGrid supports displaying related data from a **foreign key data source** in a column. This feature is useful when a column represents a foreign key relationship with another data source. +The Syncfusion® Blazor DataGrid displays related data from a **foreign key data source** in a column. This feature enables representation of foreign key relationships between data sources, displaying meaningful values instead of raw key identifiers. A foreign key column can be configured using the following properties of the [GridForeignColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html) directive: * [ForeignDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridForeignColumn-1.html#Syncfusion_Blazor_Grids_GridForeignColumn_1_ForeignDataSource) – Specifies the data source that contains the related data. -* [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) – Maps the column in the Grid to the field in the foreign data source that represents the foreign key. -* [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) – Specifies the field from the foreign data source that should be displayed in the Grid. +* [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) – Maps the column in the DataGrid to the field in the foreign data source that represents the foreign key. +* [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) – Specifies the field from the foreign data source that should be displayed in the DataGrid. + +**Example:** + +1. **Main DataGrid Data**: Contains the foreign key ID (e.g., "EmployeeID: 3") +2. **Foreign Data Source**: Contains the full details (e.g., Employee with ID "3" is "Maria Gonzalez") +3. **DataGrid Display**: Shows the meaningful value ("Maria Gonzalez") instead of the ID ("3") + + +**Define the foreign key column** + +Configure the foreign key column using the DataGrid settings: + +* `Field` – the key field in main data. +* `ForeignDataSource` – the lookup collection or `SfDataManager` instance. +* `ForeignKeyField` – lookup key field in foreign source. +* `ForeignKeyValue` – display field from the lookup source. ## Binding local data -The Syncfusion® Blazor DataGrid supports binding local data to a foreign key column. This allows related data from a local data source to be displayed within the Grid. +The Syncfusion® Blazor DataGrid supports binding local data to a foreign key column, enabling related lookup values to display in the DataGrid rows. + +In the example below, the main data source contains `EmployeeID`, and the foreign key source contains employee names. The DataGrid shows the employee name for each record. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -115,7 +133,9 @@ public class EmployeeDetails ## Binding remote data -The Syncfusion® Blazor DataGrid supports binding remote data to a foreign key column using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This approach is useful when retrieving data from services such as **OData**, **Web API**, or other remote endpoints. +The Syncfusion® Blazor DataGrid supports binding remote data to a foreign key column using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This enables loading values from web services or APIs instead of local arrays. + +The following example demonstrates foreign key column implementation with remote data binding using the [ODataAdaptor](https://blazor.syncfusion.com/documentation/datagrid/data-binding/remote-data#binding-with-odata-services): {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -193,13 +213,15 @@ public class OrderDetails ![Foreign key column with remote data](./images/foreignkey-remote-data.png) -> * For remote data, **sorting** and **grouping** operations are performed based on the [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) property rather than the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property. +> * For remote data, **sorting** and **grouping** operations are performed based on the `ForeignKeyField` (the ID field) property rather than the `ForeignKeyValue`(the display field) for better performance. -> * If `ForeignKeyField` is not defined, the column uses the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) directive. +> * If `ForeignKeyField` is not defined, the column uses the `Field` property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). ## Use edit template in foreign key column -The Syncfusion® Blazor DataGrid supports customizing the editor for a foreign key column using the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) feature. By default, a [dropdown](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is rendered for editing foreign key columns. Other components, such as [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app), can be used by defining an edit template. +The Syncfusion® Blazor DataGrid supports customizing the editor for a foreign key column using the [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate) feature. By default, a [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is rendered for editing foreign key columns. Other controls, such as [SfComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app), can be used by defining an `EditTemplate`. + +In the following example, an `SfComboBox` is rendered as the edit template for the "EmployeeID" foreign key column. The `dataSource` property of the `SfComboBox` is set to the employees data, and the `ComboBoxFieldSettings` property is configured to display the "FirstName" field as the value. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -316,11 +338,11 @@ The Syncfusion® Blazor DataGrid supports cu ## Customize filter UI in foreign key column -The Syncfusion® Blazor DataGrid allows customizing the filtering interface for foreign key columns using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. By default, a dropdown is rendered for filtering foreign key columns. The `FilterTemplate` property enables creating a custom UI for filtering. +The Syncfusion® Blazor DataGrid supports customizing the filtering interface for foreign key columns using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. By default, [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) is rendered for filtering foreign key columns. The `FilterTemplate` property enables creating a custom UI for filtering. > For all filter types other than `FilterBar`, filtering parameters are passed as **PredicateModel<T>**, where **T** represents the type of the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property when using a foreign key column. -In this configuration, a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is rendered as the filter UI for the **EmployeeID** foreign key column. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property of `SfDropDownList` is set to the **employees** collection, and the `Fields` property maps **FirstName** as the **display text** and **EmployeeID** as the **value**. The `Value` property is bound to the current filter value of the column. +In this configuration, a [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is rendered as the filter UI for the **EmployeeID** foreign key column. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property of `SfDropDownList` is set to the **employees** collection, and the `Fields` property maps **FirstName** as the **display text** and **EmployeeID** as the **value**. The `Value` property is bound to the current filter value of the column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -422,11 +444,11 @@ public class EmployeeDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/rZVTMLDyAzdAAcbt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> [View Sample in GitHub.](https://github.com/SyncfusionExamples/blazor-datagrid-customize-filter-ui-in-foreignkey-column) - ## Use filter bar template in foreign key column -The Syncfusion® Blazor DataGrid allows customizing the filter bar for foreign key columns using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This feature enables rendering a custom component or HTML template in the filter bar instead of the default UI. +The Syncfusion® Blazor DataGrid allows customizing the filter bar for foreign key columns using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This feature enables rendering a custom control or HTML template in the filter bar instead of the default UI. + +In the following example, the “EmployeeID” column is configured as a foreign key and uses a `FilterTemplate` to render an `SfDropDownList` in the filter bar. The filtering logic is handled in the `ValueChange` event of the `SfDropDownList` using the FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumnAsync_System_String_System_String_System_Object_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_System_Object_System_String_) and [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearFilteringAsync) methods. When an employee name is selected from the dropdown, the DataGrid filters the records based on the corresponding “EmployeeID”. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -558,13 +580,15 @@ public class EmployeeDetails ## Perform aggregation in foreign key column -By default, the Syncfusion® Blazor DataGrid does not support aggregation in foreign key columns. However, this can be achieved by using a custom aggregate function. +By default, the Syncfusion® Blazor DataGrid does not support built-in aggregation in foreign key columns because they display related text values. This can be achieved by using a custom aggregate function. To perform aggregation in a foreign key column: -1. Define a foreign key column in the Grid. +1. Define a foreign key column in the DataGrid. 2. Implement a custom aggregate function to calculate the required value. -3. Assign the function to the `CustomAggregate` property of the aggregate column. +3. Assign the function to the [CustomAggregate](https://blazor.syncfusion.com/documentation/datagrid/custom-aggregate) property of the aggregate column. + +The custom aggregate function receives the DataGrid data and processes it to calculate a meaningful result. In the following example, the `customAggregateFn` function iterates through all records and counts the number of times "Margaret" appears in the "FirstName" field. The calculated result (for example, "Margaret: 8") is then displayed in the DataGrid footer using the `FooterTemplate` property. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -770,9 +794,10 @@ By default, the DataGrid generates a filter query for foreign key columns based ## Render foreign key value in column template -The Syncfusion® Blazor DataGrid supports rendering foreign key values within a [column template](https://blazor.syncfusion.com/documentation/datagrid/column-template), enabling display of descriptive values from a related data source instead of the underlying foreign key. This approach is useful when a foreign key refers to an ID and a corresponding name or label needs to be shown. +Foreign key values can be rendered within column templates to enhance display of related data. This enables more meaningful representation with custom formatting, styling, or additional information beyond just displaying the foreign key value. +The Syncfusion® Blazor DataGrid supports rendering foreign key values within a [column template](https://blazor.syncfusion.com/documentation/datagrid/column-template) property for the column. -To configure this feature, define a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property and bind the required value from the foreign key mapping. +To configure this feature, define a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property in the DataGrid and bind the required value from the foreign key mapping. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -862,7 +887,9 @@ To configure this feature, define a column using the [Template](https://help.syn ## Enable multiple foreign key columns -The Syncfusion® Blazor DataGrid supports configuring multiple foreign key columns with editing options. This feature allows displaying related data from different foreign data sources in the Grid. +The Syncfusion® Blazor DataGrid supports configuring multiple foreign key columns with editing options. This feature allows displaying related data from different foreign data sources in the DataGrid. + +In the following example, "Customer Name" and "Ship City" are foreign key columns displaying the "Customer Name" and "City" columns from their respective foreign data sources. This demonstrates that a single DataGrid row can display related information from multiple external data sources. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -997,13 +1024,13 @@ public class EmployeeDetails ## Edit template in foreign key column using remote data -The Syncfusion® Blazor DataGrid supports customizing the edit template for foreign key columns when using remote data. By default, a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is rendered for editing. Other components, such as [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app), can be used by defining an [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate). +The Syncfusion® Blazor DataGrid supports customizing the edit template for foreign key columns when using remote data. By default, a [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is rendered for editing. Other controls, such as [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app), can be used by defining an [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditTemplate). **Key steps** -1. Configure [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) in the Grid for remote **CRUD** operations using [UrlAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_UrlAdaptor). +1. Configure [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) in the DataGrid for remote **CRUD** operations using [UrlAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_UrlAdaptor). 2. Render `SfDataManager` inside the foreign key column for remote foreign data. -3. Use `EditTemplate` to render a custom component like [SfAutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html), bind the foreign key field using [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value), and configure [AutoCompleteFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html) with [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Text) and [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value). +3. Use `EditTemplate` to render a custom control like [SfAutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html), bind the foreign key field using [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value), and configure [AutoCompleteFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html) with [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Text) and [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value). > For detailed configuration of remote data operations, refer to the [UrlAdaptor documentation](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/url-adaptor). diff --git a/blazor/datagrid/frozen-column.md b/blazor/datagrid/frozen-column.md index 0ee5514b1..78b8404b4 100644 --- a/blazor/datagrid/frozen-column.md +++ b/blazor/datagrid/frozen-column.md @@ -9,60 +9,52 @@ documentation: ug # Column Pinning (Frozen) in Blazor DataGrid -The Syncfusion® Blazor DataGrid supports freezing columns to keep them visible while scrolling through large datasets. This feature ensures that important fields remain accessible regardless of horizontal scroll position. +The Syncfusion® Blazor DataGrid provides a column pinning (freezing) feature that keeps selected columns visible while scrolling across large datasets. This improves readability by ensuring that important information remains accessible, even when working with wide tables. -Column pinning can be configured using either grid-level or column-level settings. +In a frozen layout, chosen columns remain fixed on either the left or right side of the DataGrid, while other columns continue to scroll horizontally. This makes it easier to compare and analyze data without losing sight of key details. -**Grid-level freezing** +Column pinning can be configured using either DataGrid-level or column-level settings. -To freeze columns from the left side of the grid: +**DataGrid-level freezing** -- Set the [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) property in the [Grid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to a **numeric** value. +To freeze columns from the left side of the DataGrid: + +- Set the [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) property in the [DataGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) to a **numeric** value. - This value determines how many columns from the **left** remain **fixed** during horizontal scrolling. -**Column-level freezing** +A video demonstration is available at: + +{% youtube "youtube:https://www.youtube.com/watch?v=L2NvKyBomhM"%} + +In this configuration, the `FrozenColumns` property is set to **2**, which keeps the first two columns fixed while the remaining columns can be scrolled horizontally. + +**Column-level freezing with Freeze direction** To freeze specific columns regardless of their position: - Set the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsFrozen) property of a [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **true**. -- Use the [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) property to define the freeze direction. The [FreezeDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html) enum supports the following values: +- The DataGrid supports different freeze directions which determine where frozen columns appear. Use the [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) property to define the freeze direction. The [FreezeDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html) enum supports the following values: - * [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Left) – Freezes the column to the left side of the grid. - * [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Right) – Freezes the column to the right side of the grid. + * [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Left) – Freezes the column to the left side of the DataGrid. + * [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Right) – Freezes the column to the right side of the DataGrid. * [Fixed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Fixed) – Keeps the column fixed in place regardless of scroll direction. These options allow precise control over which columns remain visible during horizontal scrolling. -A video demonstration is available at: - -{% youtube "youtube:https://www.youtube.com/watch?v=L2NvKyBomhM"%} - -In this configuration, the `FrozenColumns` property is set to **2**, which keeps the first two columns fixed while the remaining columns can be scrolled horizontally. - {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Inputs -@using Syncfusion.Blazor.Buttons - -
- - - - - Update -
- - + + - + - + - + @@ -74,28 +66,12 @@ In this configuration, the `FrozenColumns` property is set to **2**, which keeps protected override void OnInitialized() { OrderData = OrderDetails.GetAllRecords(); - } - - public int? value { get; set; } = 2; - public int FrozenColumns { get; set; } = 2; - - public void ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs args) - { - if (args.Value != null && args.Value != 0) - { - value = args.Value; - } - } - - public void UpdateValue() - { - FrozenColumns = (int)value; - } - + } } + {% endhighlight %} {% highlight c# tabtitle="OrderDetails.cs" %} -public class OrderDetails + public class OrderDetails { public static List order = new List(); public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, string ShipAddress, string shipRegion, string shipPostalCode) @@ -150,19 +126,17 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhfWsCbfiSSvvZz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLzWrNLBIWVbdGA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * Frozen columns must remain within the visible viewport of the grid. -> * When the `FreezeDirection` property is not set at the column level, the grid automatically applies the Left freeze direction by default. +> * Frozen columns must remain within the visible viewport of the DataGrid. +> * When the `FreezeDirection` property is not set at the column level, the DataGrid automatically applies the Left freeze direction by default. > * Column virtualization is supported with frozen columns to improve performance when handling large datasets. -> * Freezing is applicable only to columns currently visible in the grid. -> * Both [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) and [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) properties can be used together in the same grid. - -## Change default frozen line color +> * Freezing is applicable only to columns currently visible in the DataGrid. +> * Both [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) and [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) properties can be used together in the same DataGrid. -The Syncfusion® Blazor DataGrid allows customizing the border color of frozen columns using CSS. This includes styling for **left**, **right**, and **fixed** frozen columns to match application design requirements. +## Customize default frozen line color -To change the default frozen line color, apply styles using these class selectors: +The visual separator between frozen and scrollable columns (the “frozen line”) can be customized to match application design requirements. Custom CSS styles can be applied to change the border color for left, right, and fixed frozen columns. The Syncfusion® Blazor DataGrid applies specific CSS classes to frozen column borders based on their freeze direction. These classes can be targeted to customize the frozen line appearance. * **Left frozen columns** @@ -429,8 +403,8 @@ public class EmployeeDetails ## Add or remove frozen columns by dragging the column separator -The Syncfusion® Blazor DataGrid allows dynamically modifying frozen columns by dragging and dropping the column separator. This interaction enables adjusting which columns remain frozen, providing flexibility to customize the layout directly through the Grid UI. -To enable this behavior, set the [AllowFreezeLineMoving](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFreezeLineMoving) property to **true** in the Grid. +The Syncfusion® Blazor DataGrid allows dynamically modifying frozen columns by dragging and dropping the column separator. This interaction enables adjusting which columns remain frozen, providing flexibility to customize the layout directly through the DataGrid UI. +To enable this behavior, set the [AllowFreezeLineMoving](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFreezeLineMoving) property to **true** in the DataGrid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -518,7 +492,7 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/hZBTMhthBzKufVpW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> If no columns are frozen, the frozen column separator appears at the **left** and **right** edges of the Grid. Columns can be dynamically frozen or unfrozen by dragging the separator. +> If no columns are frozen, the frozen column separator appears at the **left** and **right** edges of the DataGrid. Columns can be dynamically frozen or unfrozen by dragging the separator. ## Limitations of frozen columns and freeze direction @@ -527,7 +501,7 @@ The frozen columns and freeze direction features in Syncfusion