From d34a11f37741eec5ae1f8d00d1dce35fdbf681f1 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Fri, 16 May 2025 18:48:18 +0530 Subject: [PATCH 1/4] 955876: Modified the content in columns and adaptive files --- blazor/datagrid/adaptive-layout.md | 15 ++- blazor/datagrid/column-chooser.md | 20 ++-- blazor/datagrid/column-headers.md | 76 +++++++-------- blazor/datagrid/column-menu.md | 22 ++--- blazor/datagrid/column-rendering.md | 45 ++++----- blazor/datagrid/column-reorder.md | 22 ++--- blazor/datagrid/column-resizing.md | 20 ++-- blazor/datagrid/column-template.md | 66 +++++++------- blazor/datagrid/columns.md | 132 +++++++++++++-------------- blazor/datagrid/foreignKey-column.md | 38 ++++---- blazor/datagrid/frozen-column.md | 29 +++--- 11 files changed, 242 insertions(+), 243 deletions(-) diff --git a/blazor/datagrid/adaptive-layout.md b/blazor/datagrid/adaptive-layout.md index d1af5feb9f..cec61481af 100644 --- a/blazor/datagrid/adaptive-layout.md +++ b/blazor/datagrid/adaptive-layout.md @@ -7,19 +7,19 @@ control: DataGrid documentation: ug --- -# Adaptive UI Layout in Blazor DataGrid Component +# Adaptive UI Layout in Blazor DataGrid -The DataGrid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens. This interface will render the filter, sort, column chooser, column menu(supports only when the [RowRenderingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) as Horizontal) and edit dialogs adaptively and have an option to render the grid row elements in the vertical direction. +The Syncfusion Blazor DataGrid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens. This interface will render the filter, sort, column chooser, column menu(supports only when the [RowRenderingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) as Horizontal) and edit dialogs adaptively and have an option to render the Grid row elements in the vertical direction. -To know about how to **Adaptive UI Layout** in Blazor DataGrid Component, you can check this video. +To know about how to **Adaptive UI Layout** in Grid, you can check this video. {% youtube "youtube:https://www.youtube.com/watch?v=RFMGdOyEWFo"%} ## Render adaptive dialogs -The Syncfusion Blazor DataGrid offers a valuable feature for rendering adaptive dialogs, specifically designed to enhance the user experience on smaller screens. This feature proves especially useful for optimizing the interface on devices with limited screen real estate. The functionality is achieved by enabling the [EnableAdaptiveUI](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAdaptiveUI) property, allowing the grid to render filter, sort, and edit dialogs in full-screen mode. +The Syncfusion Blazor DataGrid offers a valuable feature for rendering adaptive dialogs, specifically designed to enhance the user experience on smaller screens. This feature proves especially useful for optimizing the interface on devices with limited screen real estate. The functionality is achieved by enabling the [EnableAdaptiveUI](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAdaptiveUI) property, allowing the Grid to render filter, sort, and edit dialogs in full-screen mode. -The following sample demonstrates how to enable and utilize adaptive dialogs in the Syncfusion Blazor DataGrid: +The following sample demonstrates how to enable and utilize adaptive dialogs in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -297,7 +297,6 @@ The following sample demonstrates how to dynamically change the row rendering mo FilterSettings VersionFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.CheckBox }; FilterSettings DeveloperFilterSettings = new FilterSettings { Type = Syncfusion.Blazor.Grids.FilterType.Menu }; - public List AdaptiveData { get; set; } protected override void OnInitialized() @@ -517,7 +516,7 @@ The following features are only supported in vertical row rendering: ![VerticalmodeColumnMenu](images/vertical-column-menu.gif) -A snapshot of the adaptive grid displaying enabled paging along with a pager dropdown. +A snapshot of the adaptive Grid displaying enabled paging along with a pager dropdown. ![AdaptivePagerDropdown](images/pager-dropdown.gif) @@ -525,7 +524,7 @@ A snapshot of the adaptive grid displaying enabled paging along with a pager dro ## Rendering an adaptive layout for smaller screens alone -By default, adaptive UI layout is rendered in both mobile devices and desktop mode too while setting the [EnableAdaptiveUI](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAdaptiveUI) property as **true**. Now the DataGrid component has an option to render an adaptive layout only for mobile screen sizes. This can be achieved by specifying the [AdaptiveUIMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AdaptiveUIMode) property value as `Mobile`. The default value of the `AdaptiveUIMode` property is "Both". +By default, adaptive UI layout is rendered in both mobile devices and desktop mode too while setting the [EnableAdaptiveUI](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAdaptiveUI) property as **true**. Now the Grid has an option to render an adaptive layout only for mobile screen sizes. This can be achieved by specifying the [AdaptiveUIMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AdaptiveUIMode) property value as `Mobile`. The default value of the `AdaptiveUIMode` property is "Both". > The [RowRenderingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) property is rendered on the adaptive layout based on the `AdaptiveUIMode` property. diff --git a/blazor/datagrid/column-chooser.md b/blazor/datagrid/column-chooser.md index e5d6fb06d3..2ebe6b1ec9 100644 --- a/blazor/datagrid/column-chooser.md +++ b/blazor/datagrid/column-chooser.md @@ -9,7 +9,7 @@ documentation: ug # Column Chooser in Blazor DataGrid -The column chooser feature in the Syncfusion® Blazor Grid component allows you to dynamically show or hide columns. This feature can be enabled by defining the [ShowColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnChooser) property as **true**. +The column chooser feature in the Syncfusion Blazor DataGrid allows you to dynamically show or hide columns. This feature can be enabled by defining the [ShowColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnChooser) property as **true**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -158,7 +158,7 @@ public class OrderData ## Open column chooser by external button -The Syncfusion® Blazor Grid provides the flexibility to open the column chooser dialog on a web page using an external button. By default, the column chooser button is displayed in the right corner of the grid component, and clicking the button opens the column chooser dialog below it. However, you can programmatically open the column chooser dialog at specific X and Y axis positions by using 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. +The Syncfusion Blazor DataGrid provides the flexibility to open the column chooser dialog on a web page using an external button. By default, the column chooser button is displayed in the right corner of the Grid, and clicking the button opens the column chooser dialog below it. However, you can programmatically open the column chooser dialog at specific X and Y axis positions by using 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. Here’s an example of how to open the column chooser in the Grid using an external button: @@ -237,7 +237,7 @@ public class OrderData ## Customize column chooser dialog size -The column chooser dialog in Syncfusion® Blazor Grid comes with default size, but you can modify its height and width as per your specific needs using CSS styles. +The column chooser dialog in Syncfusion Blazor DataGrid comes with default size, but you can modify its height and width as per your specific needs using CSS styles. To customize the column chooser dialog size, you can use the following CSS styles: @@ -336,11 +336,11 @@ public class OrderData ## Change default search operator of the column chooser -The column chooser dialog in the Syncfusion® Blazor Grid provides a search box that allows you to search for column names. By default, the search functionality uses the **StartsWith** operator to match columns and display the results in the column chooser dialog. However, there might be cases where you need to change the default search operator to achieve more precise data matching. +The column chooser dialog in the Syncfusion Blazor DataGrid provides a search box that allows you to search for column names. By default, the search functionality uses the **StartsWith** operator to match columns and display the results in the column chooser dialog. However, there might be cases where you need to change the default search operator to achieve more precise data matching. -To change the default search operator of the column chooser in Syncfusion® Grid, you need to 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) class. +To change the default search operator of the column chooser in Grid, you need to 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) class. -Here’s an example of how to change the default search operator of the column chooser to **Contains** in the Blazor Grid: +Here’s an example of how to change the default search operator of the column chooser to **Contains** in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -412,11 +412,11 @@ public class OrderData ## Column chooser template -Using the column chooser template, you can customize the column chooser dialog using [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) of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) component. You can access the parameters passed to the templates using implicit parameter named context. +Using the column chooser template, you can customize the column chooser dialog using [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) of the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html). You can access the parameters passed to the templates using implicit parameter named context. ### Customize the content of column chooser -The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) tag in the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) component is used to customize the content in the column chooser dialog. You can type cast the context as [ColumnChooserTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserTemplateContext.html) to get columns inside content template. +The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_Template) tag in the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) is used to customize the content in the column chooser dialog. You can type cast the context as [ColumnChooserTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserTemplateContext.html) to get columns inside content template. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -613,7 +613,7 @@ namespace Model {% endtabs %} > * You can build reusable custom component based on your customization need as like above code example. -> * In the above example, Syncfusion® [ListView](https://blazor.syncfusion.com/documentation/listview/getting-started) component is used as custom component in the content template to show/hide columns. +> * In the above example, [ListView](https://blazor.syncfusion.com/documentation/listview/getting-started) is used as custom component in the content template to show/hide columns. {% previewsample "https://blazorplayground.syncfusion.com/embed/BNLJiLVTWKyyPjml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -621,7 +621,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) tag in the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) component is used to customize the footer in the column chooser dialog. You can type cast the context as [ColumnChooserFooterTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserFooterTemplateContext.html) to get columns inside FooterTemplate. +The [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html#Syncfusion_Blazor_Grids_GridColumnChooserSettings_FooterTemplate) tag in the [GridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumnChooserSettings.html) is used to customize the footer in the column chooser dialog. You can type cast the context as [ColumnChooserFooterTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnChooserFooterTemplateContext.html) to get columns inside FooterTemplate. {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/column-headers.md b/blazor/datagrid/column-headers.md index 5ccf0fbd79..c917473082 100644 --- a/blazor/datagrid/column-headers.md +++ b/blazor/datagrid/column-headers.md @@ -7,15 +7,15 @@ control: DataGrid documentation: ug --- -# Headers in Blazor DataGrid component +# Headers in Blazor DataGrid -The Syncfusion® Blazor DataGrid component provides a comprehensive set of options to customize and manage headers efficiently. Headers play a crucial role in organizing and presenting data effectively in the grid. +The Syncfusion Blazor DataGrid provides a comprehensive set of options to customize and manage headers efficiently. Headers play a crucial role in organizing and presenting data effectively in the Grid. ## Header text By default, the header text of a column in DataGrid is displayed from the column's [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value. However, you can easily override the default header title and provide a custom header text for the column using the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property. -To enable the `HeaderText` property, you simply need to define it in the **GridColumn** component. The following example demonstrates how to enable header text for a Grid column. +To enable the `HeaderText` property, you simply need to define it in the **GridColumn**. The following example demonstrates how to enable header text for a Grid column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -89,13 +89,13 @@ To enable the `HeaderText` property, you simply need to define it in the **GridC >* The `HeaderText` property is optional, and if it is not defined, then the corresponding column's field value is set as header text for that column. ->* You can also use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) of the `GridColumn` component to apply custom HTML content to the header cell. +>* You can also use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) of the `GridColumn` to apply custom HTML content to the header cell. ## Header template -The [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component used to customize the header element of a Grid column. With this property, you can render custom HTML elements or Blazor components to the header element. This feature allows you to add more functionality to the header, such as sorting or filtering. +The [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) used to customize the header element of a Grid column. With this property, you can render custom HTML elements or Blazor components to the header element. This feature allows you to add more functionality to the header, such as sorting or filtering. -To know about **Header Template** in Blazor DataGrid Component, you can check this video. +To know about **Header Template** in Grid, you can check this video. {% youtube "youtube:https://www.youtube.com/watch?v=9YF9HnFY5Ew"%} @@ -230,14 +230,14 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/LXVJshXLfRNuKUbF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ->* The `HeaderTemplate` property is only applicable to DataGrid columns that have a header element. +>* The `HeaderTemplate` property is only applicable to Grid columns that have a header element. >* You can use any HTML or Blazor component in the header template to add additional functionality to the header element. ## Stacked header In DataGrid, you can group multiple levels of column headers by stacking the Grid columns. This feature allows you to organize the Grid columns in a more structured and understandable way.This can be achieved by nesting the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn) directive within another `GridColumn` directive.You can define the `HeaderText` property of each sub-header column to set the text for that sub-header. -In the following sample, the columns **Order Date**, and **Freight** are grouped under **Order Details** and the columns **Shipped Date**, and **Ship Country** are grouped under **Shipped Details**. +In the following sample, the columns **Order Date**, and **Freight** are grouped under **Order Details** and the columns **Shipped Date**, and **Ship Country** are grouped under **Shipped Details**: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -347,7 +347,7 @@ public class OrderDetails ## Align the text of header text -You can horizontally align the text in column headers of the DataGrid component using the [HeaderTextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTextAlign) property of the `GridColumn` component. By default, the text is aligned to the left, but you can change the alignment by setting the value of the `HeaderTextAlign` property to one of the following options: +You can horizontally align the text in column headers of the Grid using the [HeaderTextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTextAlign) property of the `GridColumn`. By default, the text is aligned to the left, but you can change the alignment by setting the value of the `HeaderTextAlign` property to one of the following options: * **Left**: Aligns the text to the left (default). * **Center**: Aligns the text to the center. @@ -426,25 +426,25 @@ Here is an example of using the `HeaderTextAlign` property to align the text of {% previewsample "https://blazorplayground.syncfusion.com/embed/BNLqWMjsrtUyIcLO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} >* The `HeaderTextAlign` property only changes the alignment of the text in the column header, and not the content of the column. If you want to align both the column header and content, you can use the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) property. ->* You can also use the `HeaderTextAlign` property with the stacked header feature in Syncfusion® DataGrid. The property will align the header text in the sub-headers as well. +>* You can also use the `HeaderTextAlign` property with the stacked header feature in Grid. The property will align the header text in the sub-headers as well. ## Autowrap the header text -The autowrap allows the cell content of the datagrid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion® DataGrid, you should set the appropriate [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically. +The autowrap allows the cell content of the Grid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Grid, you should set the appropriate [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically. To enable auto wrap, set the [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowTextWrap) property to `true`. You can configure the auto wrap mode by setting the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_TextWrapSettings) property. -DataGrid provides the below three options for configuring: +Grid provides the below three options for configuring: -* **Both**: This is the default value for wrapMode. With this option, both the grid header text and content is wrapped. -* **Header**: With this option, only the grid header text is wrapped. -* **Content**: With this option, only the grid content is wrapped. +* **Both**: This is the default value for wrapMode. With this option, both the Grid header text and content is wrapped. +* **Header**: With this option, only the Grid header text is wrapped. +* **Content**: With this option, only the Grid content is wrapped. -> * If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the DataGrid's width. +> * If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the Grid's width. > * If a column's header text contains no white space, the text may not be wrapped. > * If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) and [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) properties of the column to customize the appearance of the header and cell content. -The following example demonstrates how to dynamically change the auto-wrap of the header text based on DropDown change. +The following example demonstrates how to dynamically change the auto-wrap of the header text based on DropDown change: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -552,11 +552,11 @@ You can use CSS to override the default height of the **.e-grid .e-headercell** ## Change header text dynamically -The Syncfusion® Grid component provides a way to modify the header text of a corresponding column in real-time based on events or other events. This feature can be useful in various scenarios, such as displaying a custom header text for a specific column or updating the header text dynamically based on input. By allowing for dynamic changes to the header text, the Grid provides a more flexible and customizable experience. +The Syncfusion Blazor DataGrid provides a way to modify the header text of a corresponding column in real-time based on events or other events. This feature can be useful in various scenarios, such as displaying a custom header text for a specific column or updating the header text dynamically based on input. By allowing for dynamic changes to the header text, the Grid provides a more flexible and customizable experience. **Using Event** -To modify the header text of a corresponding column dynamically, you can use the [HeaderCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_HeaderCellInfo) event provided by the Syncfusion® Grid. This event is triggered for each header cell element rendered in the Grid. +To modify the header text of a corresponding column dynamically, you can use the [HeaderCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_HeaderCellInfo) event provided by the Syncfusion Grid. This event is triggered for each header cell element rendered in the Grid. When the `HeaderCellInfo` event is triggered, it provides a **HeaderCellInfoEventArgs** object as a parameter. This object contains the following properties: @@ -567,14 +567,14 @@ You can use these properties to access and modify the header text of the corresp **Using method** -The Grid component provides several methods that allow you to change the column header text dynamically. Here are some of the methods you can use: +The Grid provides several methods that allow you to change the column header text dynamically. Here are some of the methods you can use: 1. [GetColumnByFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnByFieldAsync_System_String_): This method takes a field name as a parameter and returns the entire column object that corresponds to that field name, including properties such as headerText, width, and alignment. You can use this method to modify any aspect of the column. 2. [GetColumnByUidAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnByUidAsync_System_String_): Retrieves the column object based on its unique identifier. You can modify the `HeaderText` property of the column object to change the header text. > * When you change the header text dynamically, you need to **refresh** the Grid to reflect the changes by calling the [RefreshHeaderAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshHeaderAsync) method. -> * The unique identifier is automatically generated by the Grid component and may change whenever the grid is refreshed or updated. +> * The unique identifier is automatically generated by the Grid and may change whenever the Grid is refreshed or updated. Here is an example of how to change the header text of a column using the `GetColumnByFieldAsync` method: @@ -704,7 +704,7 @@ public class OrderDetails **Changing the header text of all columns** -If you want to change the header text of all columns in the grid, you can loop through the Columns collection of the grid and set the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property for each column. Here is an example: +If you want to change the header text of all columns in the Grid, you can loop through the Columns collection of the Grid and set the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property for each column. Here is an example: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -792,11 +792,11 @@ public class OrderDetails ## Change the orientation of header text -By default, the text in the column headers of the Syncfusion® DataGrid control is oriented horizontally. However, in some cases, you may want to change the orientation of the header text to vertical, diagonal, or at a custom angle. This can be achieved by adding a custom CSS class to the column header cell using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_CustomAttributes) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). +By default, the text in the column headers of the Syncfusion Blazor DataGrid is oriented horizontally. However, in some cases, you may want to change the orientation of the header text to vertical, diagonal, or at a custom angle. This can be achieved by adding a custom CSS class to the column header cell using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_CustomAttributes) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). -Follow the below steps to change the orientation of the header text in DataGrid: +Follow the below steps to change the orientation of the header text in Grid: -**Step 1**: **Create a CSS class with orientation style for grid header cell** +**Step 1**: **Create a CSS class with orientation style for Grid header cell** To `rotate` the header text, you can create a CSS class with the `transform` property that rotates the header text 90 degrees. This class will be added to the header cell using the `CustomAttributes` property. @@ -806,7 +806,7 @@ To `rotate` the header text, you can create a CSS class with the `transform` pro } ``` -**Step 2**: **Add the custom CSS class to the datagrid column** +**Step 2**: **Add the custom CSS class to the Grid column** Once you have created the CSS class, you can add it to the particular column by using the `CustomAttributes` property. This property allows you to add any custom attribute to the GridColumn. @@ -922,9 +922,9 @@ This is demonstrated in the following sample: ## Custom tooltip for header -Custom tooltips for headers provide additional information when hovering over a column header in the Syncfusion® DataGrid. This can be useful in situations where there is not enough space to display all of the information related to a column, or when there is additional context that may be helpful. +Custom tooltips for headers provide additional information when hovering over a column header in the Grid. This can be useful in situations where there is not enough space to display all of the information related to a column, or when there is additional context that may be helpful. -To enable custom tooltips for headers in the Grid, you can use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) feature by rendering the [SfTooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started) components within the template. +To enable custom tooltips for headers in the Grid, you can use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) feature by rendering the [SfTooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started) within the template. Here's an example of how to use the `HeaderTemplate` to add a custom tooltip to a header cell: @@ -1047,11 +1047,11 @@ public class OrderDetails ## Customize header text styles -Customizing the datagrid header styles allows you to modify the appearance of the column header in the DataGrid control to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the grid, you can use CSS and CustomAttributes property of the GridColumn component. +Customizing the Sycnfusion Blazor DataGrid header styles allows you to modify the appearance of the column header in the Grid to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the Grid, you can use CSS and CustomAttributes property of the GridColumn. ### Using CSS -You can apply styles to the header cells using CSS selectors. The DataGrid provides a class name for each header cell element, which you can use to apply styles to that specific header cell. The **.e-headercell** class can be used to change the background color and text color of the column header. +You can apply styles to the header cells using CSS selectors. The Grid provides a class name for each header cell element, which you can use to apply styles to that specific header cell. The **.e-headercell** class can be used to change the background color and text color of the column header. ```CSS .e-grid .e-headercell { @@ -1059,7 +1059,7 @@ You can apply styles to the header cells using CSS selectors. The DataGrid provi color:rgb(3, 2, 2); } ``` -Here's an example that demonstrates how to customize the appearance of a specific column header in the DataGrid using **className**. +Here's an example that demonstrates how to customize the appearance of a specific column header in the Grid using **className**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1136,7 +1136,7 @@ Here's an example that demonstrates how to customize the appearance of a specifi ### Using property -You can customize the appearance of the column headers in DataGrid using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_CustomAttributes) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `CustomAttributes` property takes an object with the name-value pair to customize the CSS properties for grid header cells. You can also set multiple CSS properties to the custom class using the customAttributes property. +You can customize the appearance of the column headers in Grid using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_CustomAttributes) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The `CustomAttributes` property takes an object with the name-value pair to customize the CSS properties for Grid header cells. You can also set multiple CSS properties to the custom class using the customAttributes property. To customize the header of a column, you can follow the steps below: @@ -1156,7 +1156,7 @@ Step 2: Set the **CustomAttributes** property of the desired column to an object ``` -The following example demonstrates how to customize the appearance of the **OrderID** and **Freight** columns using custom attributes. +The following example demonstrates how to customize the appearance of the **OrderID** and **Freight** columns using custom attributes: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1231,9 +1231,9 @@ public class OrderDetails ### Using event -To customize the appearance of the grid header, you can handle the [HeaderCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_HeaderCellInfo) event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header column. +To customize the appearance of the Grid header, you can handle the [HeaderCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_HeaderCellInfo) event of the Grid. This event is triggered when each header cell is rendered in the Grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header column. -The following example demonstrates how to add a `HeaderCellInfo` event handler to the grid. In the event handler, checked whether the current header column is **Order Date** field and then applied the appropriate CSS class to the cell based on its value. +The following example demonstrates how to add a `HeaderCellInfo` event handler to the Grid. In the event handler, checked whether the current header column is **Order Date** field and then applied the appropriate CSS class to the cell based on its value: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1322,11 +1322,11 @@ public class OrderDetails ## How to refresh header -The refresh header feature in the Syncfusion® Blazor DataGrid allows you to update the header section of the grid whenever changes are made to the grid's columns. This feature is useful when you want to reflect changes in the header immediately, such as modifying the column header text, width, or alignment. +The refresh header feature in the Syncfusion Blazor DataGrid allows you to update the header section of the Grid whenever changes are made to the Grid's columns. This feature is useful when you want to reflect changes in the header immediately, such as modifying the column header text, width, or alignment. -To use the refresh header feature, you can call the [RefreshHeaderAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshHeaderAsync) method of the DataGrid component. This method updates the grid header with the latest changes made to the columns. +To use the refresh header feature, you can call the [RefreshHeaderAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshHeaderAsync) method of the Grid. This method updates the Grid header with the latest changes made to the columns. -The following example demonstrates how to use the `RefreshHeaderAsync` method to update the grid header: +The following example demonstrates how to use the `RefreshHeaderAsync` method to update the Grid header: {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/column-menu.md b/blazor/datagrid/column-menu.md index 664744ef54..4dd23626ac 100644 --- a/blazor/datagrid/column-menu.md +++ b/blazor/datagrid/column-menu.md @@ -9,9 +9,9 @@ documentation: ug # Column Menu in Blazor DataGrid -The column menu in the Syncfusion® Blazor Grid component provides options to enable features such as sorting, grouping, filtering, column chooser, and autofit. When users click on the column header’s menu icon, a menu will be displayed with these integrated features. To enable the column menu, you need to set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property to true in the Grid configuration. +The column menu in the Syncfusion Blazor DataGrid provides options to enable features such as sorting, grouping, filtering, column chooser, and autofit. When users click on the column header’s menu icon, a menu will be displayed with these integrated features. To enable the column menu, you need to set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property to true in the Grid configuration. -The default menu items are displayed in the following table, +The default menu items are displayed in the following table: | Item | Description | |-----|-----| @@ -94,11 +94,11 @@ public class OrderData ## Prevent column menu for particular column -The Syncfusion Blazor DataGrid component provides the ability to prevent the appearance of the column menu for specific columns. This feature is useful when you want to restrict certain columns from being customizable through the column menu. +The Syncfusion Blazor DataGrid provides the ability to prevent the appearance of the column menu for specific columns. This feature is useful when you want to restrict certain columns from being customizable through the column menu. To prevent the column menu for a particular column, you can set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ShowColumnMenu) property to **false** for that specific column configuration. This will disable the column menu options specifically for the designated column, while other columns will have the column menu enabled. -The following example demonstrates how to prevent the column menu for a specific column. In this example, the column menu is disabled for the **OrderID** column by setting the `ShowColumnMenu` property to **false**. +The following example demonstrates how to prevent the column menu for a specific column. In this example, the column menu is disabled for the **OrderID** column by setting the `ShowColumnMenu` property to **false**: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -167,7 +167,7 @@ public class OrderData ## Add custom column menu item -The custom column menu item feature allows you to add additional menu items to the column menu in the Syncfusion® Grid. These custom menu items can be 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) class.You can define the actions for these custom items in the [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked) event. +The custom column menu item feature allows you to add additional menu items to the column menu in the Syncfusion Blazor DataGrid. These custom menu items can be 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) class.You can define the actions for these custom items in the [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked) event. Consider the following example, which demonstrates how to add a custom column menu item to clear the sorting and grouping of the Grid 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) method in the `ColumnMenuItemClicked` event: @@ -264,7 +264,7 @@ public class OrderData Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the [MenuItem.Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property as **true** in the [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen) event. -The following sample, **Filter** item was hidden in column menu when opens for the **OrderID** column. +The following sample, **Filter** item was hidden in column menu when opens for the **OrderID** column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -353,7 +353,7 @@ public class OrderData ## Render nested column menu -The nested column menu feature provides an extended menu option in the grid column headers, allows you to access additional actions and options related to the columns. +The nested column menu feature provides an extended menu option in the Grid column headers, allows you to access additional actions and options related to the columns. To enable the nested column menu feature, you need to define the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) property in your component. The `ColumnMenuItems` property is an array that contains the items for the column menu. Each item can be a string representing a built-in menu item or an object defining a custom menu item. @@ -453,9 +453,9 @@ public class OrderData ## Customize the icon of column menu -To customize the column menu icon, you need to override the default grid class `.e-icons.e-columnmenu` with a custom CSS property called **content**. By specifying a Unicode character or an icon font’s CSS class, you can change the icon displayed in the column menu. +To customize the column menu icon, you need to override the default Grid class `.e-icons.e-columnmenu` with a custom CSS property called **content**. By specifying a Unicode character or an icon font’s CSS class, you can change the icon displayed in the column menu. -1. Add the necessary CSS code to override the default grid class: +1. Add the necessary CSS code to override the default Grid class: ```css .e-grid .e-columnheader .e-icons.e-columnmenu::before { @@ -468,7 +468,7 @@ To customize the column menu icon, you need to override the default grid class ` ``` -Here is an example that demonstrates how to customize the column menu icon in the Syncfusion® Grid: +Here is an example that demonstrates how to customize the column menu icon in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -544,7 +544,7 @@ The column menu in Syncfusion Blazor DataGrid provides a set of events that allo 1. The [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnColumnMenuOpen) event triggers before the column menu opens. -2. The [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked) event triggers when the user clicks the column menu of the grid. +2. The [ColumnMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnMenuItemClicked) event triggers when the user clicks the column menu of the Grid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/column-rendering.md b/blazor/datagrid/column-rendering.md index 5b9994ea73..3644f3ff2b 100644 --- a/blazor/datagrid/column-rendering.md +++ b/blazor/datagrid/column-rendering.md @@ -7,11 +7,11 @@ control: DataGrid documentation: ug --- -# Column Rendering in Blazor DataGrid Component +# Column Rendering in Blazor DataGrid -In Syncfusion® Blazor DataGrid, column rendering provides you with the ability to finely control how data is presented. This allows you to manually define columns, automatically generate them, and dynamically customize data presentation. With column rendering, you can ensure that your data is displayed exactly as needed, offering a wide range of possibilities for organizing and showcasing information within the grid. +In Syncfusion Blazor DataGrid, column rendering provides you with the ability to finely control how data is presented. This allows you to manually define columns, automatically generate them, and dynamically customize data presentation. With column rendering, you can ensure that your data is displayed exactly as needed, offering a wide range of possibilities for organizing and showcasing information within the Grid. -The column definitions are used as the DataSource schema in the grid. The grid operations such as sorting, filtering and grouping etc. are performed based on column definitions. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property of grid column is necessary to map the datasource values in the grid columns. +The column definitions are used as the DataSource schema in the Grid. The Grid operations such as sorting, filtering and grouping etc. are performed based on column definitions. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property of Grid column is necessary to map the datasource values in the Grid columns. > If the column `Field` is not specified in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource), the column values will be empty. > If the `Field` name contains **dot** operator, it is considered as complex binding. @@ -19,13 +19,13 @@ The column definitions are used as the DataSource schema in the grid. The grid o ## Define columns manually -To define columns manually in DataGrid, you can use the `GridColumn` component to define the columns and represent each column with its respective properties such as [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field), [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText), [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type), and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) set accordingly. This allows you to customize the column's behavior and appearance based on the requirements. +To define columns manually in DataGrid, you can use the `GridColumn` to define the columns and represent each column with its respective properties such as [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field), [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText), [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type), and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) set accordingly. This allows you to customize the column's behavior and appearance based on the requirements. > 1. If the column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) is not specified in the dataSource, the column values will be empty. > 2. If the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) name contains “dot” operator, it is considered as complex binding. > 3. It is must to define the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property for a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) column, to perform CRUD or Data Operations such as filtering, searching etc. -Here's an example code snippet that demonstrates how to define columns manually in the Syncfusion® Blazor DataGrid: +Here's an example code snippet that demonstrates how to define columns manually in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -99,9 +99,9 @@ Here's an example code snippet that demonstrates how to define columns manually ## Auto generated columns -The DataGrid automatically generates columns when the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_Columns) declaration is empty or undefined while initializing the datagrid. All the columns in the **DataSource** are bound as datagrid columns. +The Syncfusion Blazor DataGrid automatically generates columns when the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_Columns) declaration is empty or undefined while initializing the Grid. All the columns in the **DataSource** are bound as Grid columns. -You can use the following code snippet to enable auto-generated columns in the Syncfusion® DataGrid: +You can use the following code snippet to enable auto-generated columns in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -167,15 +167,15 @@ You can use the following code snippet to enable auto-generated columns in the S >* When the columns are auto-generated, the column [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) is determined from the first record of the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource). >* If you have a large dataset, auto-generating columns can result in performance issues. In this case, it is recommended to specify the columns manually in the columns property during initialization or else use column virtualization feature by setting [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) property value as **true**. -To know about how to **Customize Auto generated columns using Data Annotation** in Blazor DataGrid Component, you can check this video. +To know about how to **Customize Auto generated columns using Data Annotation** in Grid, you can check this video. {% youtube "youtube:https://www.youtube.com/watch?v=f7OIzUM0e7Y"%} ### Set IsPrimaryKey for auto generated columns when editing is enabled -When editing is enabled in the grid, you may need to set a primary key for auto-generated columns to uniquely identify each row for operations such as updating or deleting data. This can be achieved using the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property of the column object by using the [OnDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnDataBound) event. +When editing is enabled in the Grid, you may need to set a primary key for auto-generated columns to uniquely identify each row for operations such as updating or deleting data. This can be achieved using the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property of the column object by using the [OnDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnDataBound) event. -By setting `IsPrimaryKey` to **true** for an auto-generated column in the Syncfusion® DataGrid, you can specify it as the primary key column, which uniquely identifies each row when editing is enabled. +By setting `IsPrimaryKey` to **true** for an auto-generated column in the Grid, you can specify it as the primary key column, which uniquely identifies each row when editing is enabled. Here is an example code snippet that shows how to set a primary key for an auto-generated column when editing is enabled: @@ -251,7 +251,7 @@ Here is an example code snippet that shows how to set a primary key for an auto- ### Set column options to auto generated columns -To configure column options such as [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type), [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) for auto-generated columns in Syncfusion® Grid, you can use the [OnDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnDataBound) event of the Grid component. This event is triggered after the data has been bound to the Grid. By handling this event, you can specify the desired column options for the auto-generated columns. +To configure column options such as [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type), [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) for auto-generated columns in Syncfusion Grid, you can use the [OnDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnDataBound) event of the Grid. This event is triggered after the data has been bound to the Grid. By handling this event, you can specify the desired column options for the auto-generated columns. Here's an example of how you can set column options for auto-generated columns using the `OnDataBound` event: @@ -346,9 +346,9 @@ In the below example, `Width` is set for **OrderID** column, **date** `Type` is ## Dynamic column generation -The Syncfusion® Grid component allows you to dynamically generate columns at runtime, based on the data provided. This feature is useful when you need to display data with varying columns based on user requirements or dynamic data sources. +The Syncfusion Blazor DataGrid allows you to dynamically generate columns at runtime, based on the data provided. This feature is useful when you need to display data with varying columns based on user requirements or dynamic data sources. -You can refer the following code example to achieve this. +You can refer the following code example to achieve this: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -422,9 +422,9 @@ You can refer the following code example to achieve this. ### Dynamic column binding using ExpandoObject -It is possible to build a column dynamically without knowing the model type during compile time. This can be achieved by binding data to the grid as a list of `ExpandoObject`. +It is possible to build a column dynamically without knowing the model type during compile time. This can be achieved by binding data to the Grid as a list of `ExpandoObject`. -In the following sample, columns are built dynamically using the `ExpandoObject`. +In the following sample, columns are built dynamically using the `ExpandoObject`: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -481,11 +481,11 @@ In the following sample, columns are built dynamically using the `ExpandoObject` ## Complex data generation -The Syncfusion® DataGrid component allows you to achieve complex data binding by using the dot (.) operator in the column.field. This feature is particularly useful when dealing with nested or complex data structures. +The Syncfusion Blazor DataGrid allows you to achieve complex data binding by using the dot (.) operator in the column.field. This feature is particularly useful when dealing with nested or complex data structures. ### Using local data -To enable complex data binding in the DataGrid component using local data, use the dot (.) operator in the `Field` property of the column. Here is an example of how to achieve complex data binding using local data: +To enable complex data binding in the Grid using local data, use the dot (.) operator in the `Field` property of the column. Here is an example of how to achieve complex data binding using local data: In the below example, we have bound the nested **Employee** object’s **FirstName** and **LastName** properties using the dot (.) operator. @@ -544,9 +544,9 @@ In the below example, we have bound the nested **Employee** object’s **FirstNa ### Using remote data -To enable complex data binding in the DataGrid component using remote data, add the [Expand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Expand_System_Collections_Generic_List_System_String__) query to the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the DataGrid, to eager load the complex data. Here is an example of how to achieve complex data binding using remote data: +To enable complex data binding in the Grid using remote data, add the [Expand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Expand_System_Collections_Generic_List_System_String__) query to the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property of the Grid, to eager load the complex data. Here is an example of how to achieve complex data binding using remote data: -In the below example, we have used the `Expand` query to load the nested Employee object's **City** property using the dot (.) operator. +In the below example, we have used the `Expand` query to load the nested Employee object's **City** property using the dot (.) operator: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -587,7 +587,8 @@ In the below example, we have used the `Expand` query to load the nested Employe ### Complex data generation using ExpandoObject -Before proceeding this, learn about [ExpandoObject Binding](https://blazor.syncfusion.com/documentation/datagrid/data-binding#expandoobject-binding). You can achieve ExpandoObject complex data binding in the DataGrid by using the dot(.) operator in the column.field. In the following examples, `CustomerID.Name` and `ShipCountry.Country` are complex data. +Before proceeding this, learn about [ExpandoObject Binding](https://blazor.syncfusion.com/documentation/datagrid/data-binding#expandoobject-binding). You can achieve ExpandoObject complex data binding in the Grid by using the dot(.) operator in the column.field. In the following examples, `CustomerID.Name` and `ShipCountry.Country` are complex data. + {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @@ -639,7 +640,7 @@ Before proceeding this, learn about [ExpandoObject Binding](https://blazor.syncf ### Complex data generation using DynamicObject -Before proceeding this, learn about [DynamicObject Binding](https://blazor.syncfusion.com/documentation/datagrid/data-binding#dynamicobject-binding). You can achieve DynamicObject complex data binding in the datagrid by using the dot(.) operator in the column.field. In the following examples, `CustomerID.Name` and `ShipCountry.Country` are complex data. +Before proceeding this, learn about [DynamicObject Binding](https://blazor.syncfusion.com/documentation/datagrid/data-binding#dynamicobject-binding). You can achieve DynamicObject complex data binding in the Grid by using the dot(.) operator in the column.field. In the following examples, `CustomerID.Name` and `ShipCountry.Country` are complex data. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -709,7 +710,7 @@ Before proceeding this, learn about [DynamicObject Binding](https://blazor.syncf The Syncfusion Blazor DataGrid provides the ability to use complex columns as foreign key columns. This allows related data from a foreign data source to be displayed based on the value of a complex column. -The following example demonstrates how to set the **Employee.EmployeeID** column as a foreign key column, and display the **FirstName** column from the foreign data source. +The following example demonstrates how to set the **Employee.EmployeeID** column as a foreign key column, and display the **FirstName** column from the foreign data source: {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/column-reorder.md b/blazor/datagrid/column-reorder.md index a27edf997a..4715c09ceb 100644 --- a/blazor/datagrid/column-reorder.md +++ b/blazor/datagrid/column-reorder.md @@ -7,13 +7,13 @@ control: DataGrid documentation: ug --- -# Column Reorder in Blazor DataGrid component +# Column Reorder in Blazor DataGrid -The Syncfusion® Blazor Grid component allows to reorder columns by drag and drop of a particular column header from one index to another index within the grid. +The Syncfusion Blazor DataGrid allows to reorder columns by drag and drop of a particular column header from one index to another index within the Grid. -To reorder the columns, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowReordering) property to true in the grid. +To reorder the columns, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowReordering) property to true in the Grid. -Here’s an example for column reordering in your Grid component: +Here’s an example for column reordering in your Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -85,9 +85,9 @@ public class OrderDetails ## Prevent reordering for particular column -By default, all columns in the Syncfusion® Blazor Grid can be reordered by dragging and dropping their headers to another location within the grid. However, there may be certain columns that you do not want to be reordered. In such cases, you can set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of that particular column to false. Here is an example that demonstrates how to prevent reordering for a specific column: +By default, all columns in the Syncfusion Blazor Grid can be reordered by dragging and dropping their headers to another location within the Grid. However, there may be certain columns that you do not want to be reordered. In such cases, you can set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of that particular column to false. Here is an example that demonstrates how to prevent reordering for a specific column: -In this example, the **ShipCity** column is prevented from being reordered by setting the `AllowReordering` property to **false**. +In this example, the **ShipCity** column is prevented from being reordered by setting the `AllowReordering` property to **false**: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -154,9 +154,9 @@ public class OrderDetails ## Reorder columns externally -The Syncfusion® Blazor Grid allows you to reorder columns externally, which means that using methods you can programmatically move columns around within the grid, based on their index or target index, or by using their field name. +The Syncfusion Blazor Grid allows you to reorder columns externally, which means that using methods you can programmatically move columns around within the Grid, based on their index or target index, or by using their field name. -> When reordering columns externally, you must set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of the grid to **true**. +> When reordering columns externally, you must set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of the Grid to **true**. ### Reorder column based on index @@ -328,7 +328,7 @@ public class OrderDetails ### Reorder column based on field names -The Syncfusion® Blazor DataGrid allows you to programmatically reorder columns using the [ReorderColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnAsync_System_String_System_String_) and [ReorderColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnsAsync_System_Collections_Generic_List_System_String__System_String_) methods. These methods provide flexibility for dynamically rearranging columns based on their field names. +The Syncfusion Blazor DataGrid allows you to programmatically reorder columns using the [ReorderColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnAsync_System_String_System_String_) and [ReorderColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnsAsync_System_Collections_Generic_List_System_String__System_String_) methods. These methods provide flexibility for dynamically rearranging columns based on their field names. 1. `ReorderColumnAsync`: This method is used to reorder a single column by specifying its current field name and the target column's field name. It takes the following arguments: * **FromFieldName**: The field name of the column to be moved. @@ -420,13 +420,13 @@ public class OrderDetails ## Reorder events -When reordering columns in the Syncfusion Blazor DataGrid component, you may want to take some specific action in response to the drag and drop events. To handle these events, you can define event handlers for the following events: +When reordering columns in the Syncfusion Blazor DataGrid, you may want to take some specific action in response to the drag and drop events. To handle these events, you can define event handlers for the following events: 1. The [ColumnReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordering) event triggers when column header element is dragged (moved) continuously. 2. The [ColumnReordered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordered) event triggers when a column header element is dropped on the target column. -In the following example, we have implemented the `ColumnReordering` and `ColumnReordered` events in the Syncfusion Grid component. +In the following example, we have implemented the `ColumnReordering` and `ColumnReordered` events in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/column-resizing.md b/blazor/datagrid/column-resizing.md index 508d5f8e91..35f1c00529 100644 --- a/blazor/datagrid/column-resizing.md +++ b/blazor/datagrid/column-resizing.md @@ -7,9 +7,9 @@ control: DataGrid documentation: ug --- -# Column Resizing in Blazor DataGrid component +# Column Resizing in Blazor DataGrid -Grid component provides an intuitive user interface for resizing columns to fit their content. This feature allows users to easily adjust the width of the columns to improve readability and aesthetics of the data presented. To enable column resizing, set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowResizing) property of the grid to true. +Syncfusion Blazor DataGrid provides an intuitive user interface for resizing columns to fit their content. This feature allows users to easily adjust the width of the columns to improve readability and aesthetics of the data presented. To enable column resizing, set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowResizing) property of the Grid to true. Once column resizing is enabled, columns width can be resized by clicking and dragging at the right edge of the column header. While dragging the column, the width of the respective column will be resized immediately. @@ -86,13 +86,13 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/rNVJWLXdfpEFruXA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * You can disable resizing for a particular column by setting the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing) property of **GridColumn** component to false. +> * You can disable resizing for a particular column by setting the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing) property of **GridColumn** to false. > * In RTL mode, you can click and drag the left edge of the header cell to resize the column. > * The width property of the column can be set initially to define the default width of the column. However, when column resizing is enabled, you can override the default width by manually resizing the columns. ## Restrict the resizing based on minimum and maximum width -The Grid component allows you to restrict the column width resizing between a minimum and maximum width. This can be useful when you want to ensure that your grid’s columns stay within a certain range of sizes. +The Syncfusion Blazor DataGrid allows you to restrict the column width resizing between a minimum and maximum width. This can be useful when you want to ensure that your Grid’s columns stay within a certain range of sizes. To enable this feature, you can define the [MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_MinWidth) and [MaxWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_MaxWidth) properties of the columns directive for the respective column. @@ -177,7 +177,7 @@ public class OrderDetails ## Prevent resizing for particular column -The Grid component provides the ability to prevent resizing for a particular column. This can be useful if you want to maintain a consistent column width or prevent users from changing the width of a column. +The Syncfusion Blaazor DataGrid provides the ability to prevent resizing for a particular column. This can be useful if you want to maintain a consistent column width or prevent users from changing the width of a column. You can disable resizing for a particular column by setting the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing) property of the column to false. The following example demonstrates, how to disabled resize for Customer ID column. @@ -248,7 +248,7 @@ public class OrderDetails ## Resize stacked header column -Grid component allows to resize stacked columns by clicking and dragging the right edge of the stacked column header. During the resizing action, the width of the child columns is resized at the same time. You can disable resize for any particular stacked column by setting [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing) as **false** to its columns. +Syncfusion Blazor DataGrid allows to resize stacked columns by clicking and dragging the right edge of the stacked column header. During the resizing action, the width of the child columns is resized at the same time. You can disable resize for any particular stacked column by setting [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing) as **false** to its columns. In this below code, we have disabled resize for **Ship City** column. @@ -328,7 +328,7 @@ public class OrderDetails ## Touch interaction -Grid component provides support for touch interactions to enable users to interact with the grid using their mobile devices. Users can resize columns in the grid by tapping and dragging the floating handler, and can also use the Column menu to autofit columns. +Syncfusion Blazor DataGrid provides support for touch interactions to enable users to interact with the Grid using their mobile devices. Users can resize columns in the Grid by tapping and dragging the floating handler, and can also use the Column menu to autofit columns. **Resizing Columns on Touch Devices** @@ -346,9 +346,9 @@ The following screenshot represents the column resizing in touch device. ## Resizing column externally -Grid provides the ability to resize columns using an external button click. This can be achieved by changing the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property of the column and refreshing the grid using the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method in the external button click function. +Grid provides the ability to resize columns using an external button click. This can be achieved by changing the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property of the column and refreshing the Grid using the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method in the external button click function. -The following example demonstrates how to resize the columns in a grid. This is done by using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of the DropDownList component by change the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property of the selected column. This is accomplished using the [GetColumnByFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnByFieldAsync_System_String_) on external button click. Then, the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method is called on the grid component to update the displayed columns based on user interaction. +The following example demonstrates how to resize the columns in a Grid. This is done by using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of the `DropDownList` by change the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property of the selected column. This is accomplished using the [GetColumnByFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnByFieldAsync_System_String_) on external button click. Then, the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method is called on the Grid to update the displayed columns based on user interaction. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -466,7 +466,7 @@ public class OrderDetails ## Resizing events -During the resizing action, the grid component triggers the below two events. +During the resizing action, the Grid triggers the below two events. 1. The [OnResizeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnResizeStart) event triggers when column resize starts. This event can be used to perform actions when the user begins to resize a column. diff --git a/blazor/datagrid/column-template.md b/blazor/datagrid/column-template.md index 07830ba0be..ca8fd3fe5e 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -9,22 +9,22 @@ documentation: ug # Column Template in Blazor DataGrid -DataGrid component provides a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) option that allows you to display custom elements in a column instead of the field value. This can be useful when you need to display images, buttons, or other custom content within a column. +Sycnfusion Blazor DataGrid provides a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) option that allows you to display custom elements in a column instead of the field value. This can be useful when you need to display images, buttons, or other custom content within a column. -> Before adding column template to the DataGrid, it is recommended to go through the [template](./templates/#templates) section topic to configure the template. +> Before adding column template to the Grid, it is recommended to go through the [template](./templates/#templates) section topic to configure the template. -To know about **Column Template** in Blazor DataGrid Component, you can check this video. +To know about **Column Template** in Grid, you can check this video. {% youtube "youtube:https://www.youtube.com/watch?v=9YF9HnFY5Ew"%} -> When using template columns, they are primarily meant for rendering custom content and may not provide built-in support for datagrid actions like sorting, filtering, editing. It is must to define the `Field` property of the column to perform any datagrid actions. +> When using template columns, they are primarily meant for rendering custom content and may not provide built-in support for Grid actions like sorting, filtering, editing. It is must to define the `Field` property of the column to perform any Grid actions. ## Render image in a column -To render an image in a grid column, you need to define a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) for the column using the template property.The `Template` property expects an HTML string or a function that returns an HTML string. +To render an image in a Grid column, you need to define a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) for the column using the template property.The `Template` property expects an HTML string or a function that returns an HTML string. -The following example demonstrates how to define a `Template` for the **Employee Image** field that displays an image element.The `Template` property is set to an HTML string that contains an image tag. You have utilized the `src` and `alt` attributes to the image tag. +The following example demonstrates how to define a `Template` for the **Employee Image** field that displays an image element.The `Template` property is set to an HTML string that contains an image tag. You have utilized the `src` and `alt` attributes to the image tag: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -118,9 +118,9 @@ The following example demonstrates how to define a `Template` for the **Employee ## Render hyperlink in a column -The DataGrid component provides support for rendering hyperlink columns and performing routing on click using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful when displaying data that requires a link to another page or website. +The Sycnfusion Blazor DataGrid provides support for rendering hyperlink columns and performing routing on click using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful when displaying data that requires a link to another page or website. -The following example demonstrates, how to render hyperlink column in the Grid using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property of the `GridColumn` tag. To define a `Template` for the column, you can use the `Template` with the `a` tag to create the hyperlink. +The following example demonstrates, how to render hyperlink column in the Grid using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property of the `GridColumn` tag. To define a `Template` for the column, you can use the `Template` with the `a` tag to create the hyperlink: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -195,13 +195,13 @@ public class EmployeeDetails ## Render other components in a column -The column template has options to render a custom component in a DataGrid column instead of a field value. +The column template has options to render a custom component in a Grid column instead of a field value. -### Render LineChart component in a column +### Render LineChart in a column -The [LineChart](https://blazor.syncfusion.com/documentation/sparkline/getting-started-webapp) component of Syncfusion® provides an elegant way to represent and compare data over time. It displays data points connected by straight line segments to visualize trends in data. +The [LineChart](https://blazor.syncfusion.com/documentation/sparkline/getting-started-webapp) of Syncfusion provides an elegant way to represent and compare data over time. It displays data points connected by straight line segments to visualize trends in data. -In the following example, we rendered the Sparkline Chart component in the Grid column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. +In the following example, we rendered the Sparkline Chart in the Grid column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -297,9 +297,9 @@ public class EmployeeDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/VXBJsWrWVXXLwpde?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Render DropDownList component in a column +### Render DropDownList in a column -To render a custom component in a grid column, you need to define a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) for the column using the column `Template` property. In the following code, we rendered the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) component in the **Order Status** column by defining the `Template` property. +To render a custom component in a Grid column, you need to define a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) for the column using the column `Template` property. In the following code, we rendered the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) in the **Order Status** column by defining the `Template` property. ```csharp @@ -393,11 +393,11 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/LNBJCrtKzUHwTXIk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Render Chip component in a column +### Render Chip in a column -The DataGrid component provides support for rendering [Chips](https://blazor.syncfusion.com/documentation/chip/getting-started-with-web-app) component in a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful when displaying data that requires a chip component to be rendered in a column. +The Sycnfusion Blazor DataGrid provides support for rendering [Chips](https://blazor.syncfusion.com/documentation/chip/getting-started-with-web-app) in a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful when displaying data that requires a chip to be rendered in a column. -In the following code, we rendered the Chips component in the Grid **First Name** column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. +In the following code, we rendered the Chips in the Grid **First Name** column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property: ``` @@ -480,11 +480,11 @@ public class EmployeeDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/BXLfsihZJaDYOHeV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Render ProgressBar component in a column +### Render ProgressBar in a column -The Syncfusion® Grid component supports rendering the [Progress Bar](https://blazor.syncfusion.com/documentation/progress-bar/getting-started-webapp) component within a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. Displaying the `Progress Bar` component in a grid column allows users to visually track the progress of tasks or operations associated with specific records. This feature is particularly useful for applications involving processes such as data loading, task completion, or other progressive activities. +The Syncfusion Blzor DataGrid supports rendering the [Progress Bar](https://blazor.syncfusion.com/documentation/progress-bar/getting-started-webapp) within a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. Displaying the `Progress Bar` in a Grid column allows users to visually track the progress of tasks or operations associated with specific records. This feature is particularly useful for applications involving processes such as data loading, task completion, or other progressive activities. -In the following code, the `Progress Bar` component render in the Grid **Freight** column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. +In the following code, the `Progress Bar` render in the Grid **Freight** column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property: ``` @@ -568,7 +568,7 @@ public class OrderDetails The Syncfusion Blazor DataGrid supports rendering a [RadioButton](https://blazor.syncfusion.com/documentation/radio-button/getting-started-webapp) within a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is particularly useful for displaying selection options such as order statuses, payment methods, or approval choices directly within the Grid. -In the following example, a `RadioButton` is rendered in the **Order Status** column of the Grid by defining the `Template` property. +In the following example, a `RadioButton` is rendered in the **Order Status** column of the Grid by defining the `Template` property: ``` @@ -650,7 +650,7 @@ public class OrderDetails The conditional column [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) allows you to display template elements based on specific conditions. -In the following code, checkbox is rendered based on **Discontinued** field value in the datasource. This data can be accessed inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) using the implicit named parameter **context**. +In the following code, checkbox is rendered based on **Discontinued** field value in the datasource. This data can be accessed inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) using the implicit named parameter **context**: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -737,9 +737,9 @@ In the following code, checkbox is rendered based on **Discontinued** field valu ## How to get the row object by clicking on the template element -The Grid component allows you to retrieve the row object of the selected record when clicking on a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) element. This feature can be useful when you need to perform custom actions based on the selected record. +The Sycnfusion Blazor DataGrid allows you to retrieve the row object of the selected record when clicking on a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) element. This feature can be useful when you need to perform custom actions based on the selected record. -In the following code, the button component is rendered in the **Employee Data** column and [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick) event binding is used to call the showDetails method when the template element is clicked and the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event of the grid used to access the selected row object and display it in the dialog popup. +In the following code, the button is rendered in the **Employee Data** column and [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick) event binding is used to call the showDetails method when the template element is clicked and the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event of the Grid used to access the selected row object and display it in the dialog popup. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -832,11 +832,11 @@ public class EmployeeDetails ## Use custom helper inside the template -The Syncfusion® Grid allows you to use custom helpers inside the `Template` directive of a column. This feature allows you to create complex templates that can incorporate additional helper functions that are not available through the default [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) syntax. +The Syncfusion Blazor DataGrid allows you to use custom helpers inside the `Template` directive of a column. This feature allows you to create complex templates that can incorporate additional helper functions that are not available through the default [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) syntax. To use the custom helper function inside a column template, you must first add the function to the template's context. -The following example demonstrates how to use a custom helper function inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property, using the `Template` element for the Freight column. +The following example demonstrates how to use a custom helper function inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property, using the `Template` element for the Freight column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -916,11 +916,11 @@ public class OrderDetails ## Dynamically adding template column -The Syncfusion® Grid component allows you to dynamically add template columns at runtime. This capability is particularly useful when the structure of the grid needs to be modified based on individual interactions or other dynamic conditions. +The Syncfusion Blazor DataGrid allows you to dynamically add template columns at runtime. This capability is particularly useful when the structure of the Grid needs to be modified based on individual interactions or other dynamic conditions. -Dynamically adding template columns involves creating and inserting columns with custom templates after the grid has been initialized. This approach provides flexibility in presenting data in a highly customizable manner. +Dynamically adding template columns involves creating and inserting columns with custom templates after the Grid has been initialized. This approach provides flexibility in presenting data in a highly customizable manner. -The following example demonstrates how to add template column using external button click. In this example, the **ShipCountry** column with a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is added in column [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template), and an icon is displayed using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) for the **ShipCountry** column. +The following example demonstrates how to add template column using external button click. In this example, the **ShipCountry** column with a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is added in column [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template), and an icon is displayed using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) for the **ShipCountry** column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1019,7 +1019,7 @@ public class OrderDetails The Column template property can be used to provide routing links inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). For routing, [UriHelper](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0&viewFallbackFrom=aspnetcore-3.0#uri-and-navigation-state-helpers) can be utilized. -This can be achieved by initially defining an anchor tag inside the column template and binding click event to it. In this event, the DataGrid data **context** is passed on to its function. +This can be achieved by initially defining an anchor tag inside the column template and binding click event to it. In this event, the Grid data **context** is passed on to its function. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1103,7 +1103,7 @@ This can be achieved by initially defining an anchor tag inside the column templ {% endhighlight %} {% endtabs %} -In the above code, the url to be navigated is specified in the Link variable of the DataGrid data. Based on this, the page is routed to the corresponding url. +In the above code, the url to be navigated is specified in the Link variable of the Grid data. Based on this, the page is routed to the corresponding url. After that, add new razor page for routing with routing url along with the parameters to be received, and initialize it with the required details. @@ -1129,9 +1129,9 @@ After that, add new razor page for routing with routing url along with the param {% endhighlight %} {% endtabs %} -The following GIF represents template routing in DataGrid +The following GIF represents template routing in Grid ![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) +* [FileUpload in Grid 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 bc67cbd6c1..521fcc2a6d 100644 --- a/blazor/datagrid/columns.md +++ b/blazor/datagrid/columns.md @@ -7,15 +7,15 @@ control: DataGrid documentation: ug --- -# Columns in Blazor DataGrid Component +# Columns in Blazor DataGrid -In Syncfusion® Blazor DataGrid, Columns are fundamental elements that play a pivotal role in organizing and displaying data within your application. They serve as the building blocks for data presentation, allowing you to specify what data fields to show, how to format and style them, and how to enable various interactions within the grid. +In Syncfusion Blazor DataGrid, Columns are fundamental elements that play a pivotal role in organizing and displaying data within your application. They serve as the building blocks for data presentation, allowing you to specify what data fields to show, how to format and style them, and how to enable various interactions within the Grid. ## Column types -The Syncfusion® Blazor DataGrid component allows you to specify the type of data that a column binds using the [Column.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) property. The `Type` property is used to determine the appropriate [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format), such as [Decimal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_Decimal), [Double](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_Double), [Integer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_Integer), [Long](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_Long), [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_None) or [Date](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_Date), for displaying the column data. +The Syncfusion Blazor DataGrid allows you to specify the type of data that a column binds using the [Column.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) property. The `Type` property is used to determine the appropriate [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format), such as [Decimal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_Decimal), [Double](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_Double), [Integer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_Integer), [Long](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_Long), [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_None) or [Date](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_Date), for displaying the column data. -DataGrid supports the following column types: +Grid supports the following column types: * **String**: Represents a column that binds to string data. This is the default type if the `Type` property is not defined. * **Decimal**: Represents a column that binds to Decimal data. @@ -32,9 +32,9 @@ DataGrid supports the following column types: * **Checkbox**: Represents a column that displays checkboxes. -> Blazor DataGrid Component supports `DateOnly` and `TimeOnly` type in .NET 7 and above version only, even though it introduced in .NET 6 itself due to serialization problem. +> Grid supports `DateOnly` and `TimeOnly` type in .NET 7 and above version only, even though it introduced in .NET 6 itself due to serialization problem. -Here is an example of how to specify column types in a grid using the types mentioned above. +Here is an example of how to specify column types in a Grid using the types mentioned above. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -114,7 +114,7 @@ Here is an example of how to specify column types in a grid using the types ment {% previewsample "https://blazorplayground.syncfusion.com/embed/hDLUiWZmBWcefthH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} >* If the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) is not defined, then it will be determined from the first record of the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource). ->* Incase if the first record of the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) is null/blank value for a column then it is necessary to define the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) for that column. This is because the grid uses the column type to determine which filter dialog to display for that column +>* Incase if the first record of the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) is null/blank value for a column then it is necessary to define the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) for that column. This is because the Grid uses the column type to determine which filter dialog to display for that column ### Difference between Boolean type and CheckBox type column @@ -122,39 +122,39 @@ Here is an example of how to specify column types in a grid using the types ment * Use the **Checkbox** column type when you want to enable selection/deselection of the whole row. -* When the grid column `Type` is a **Checkbox**, the selection type of the [GridSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html) will be multiple. This is the default behavior. +* When the Grid column `Type` is a **Checkbox**, the selection type of the [GridSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html) will be multiple. This is the default behavior. -* If you have more than one column with the column type as a **Checkbox**, the grid will automatically enable the other column’s checkbox when selecting one column checkbox. +* If you have more than one column with the column type as a **Checkbox**, the Grid will automatically enable the other column’s checkbox when selecting one column checkbox. ->To learn more about how to render boolean values as checkboxes in a Syncfusion® GridColumn, please refer to the [Render boolean values as checkbox](https://blazor.syncfusion.com/documentation/datagrid/columns#render-boolean-values-as-checkbox) section. +>To learn more about how to render boolean values as checkboxes in a Syncfusion GridColumn, please refer to the [Render boolean values as checkbox](https://blazor.syncfusion.com/documentation/datagrid/columns#render-boolean-values-as-checkbox) section. ## Column Width -To adjust the column width in a Grid, you can use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property within the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property of the Grid configuration. This property enables you to define the column width in pixels or as a percentage. You can set the width to a specific value, like **100** for 100 pixels, or as a percentage value, such as **25%** for 25% of the available width. +To adjust the column width in a Grid, you can use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property within the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property of the Grid configuration. This property enables you to define the column width in pixels or as a percentage. You can set the width to a specific value, like **100** for 100 pixels, or as a percentage value, such as **25%** for 25% of the available width. -1. Grid column width is calculated based on the sum of column widths. For example, a grid container with 4 columns and a width of 800 pixels will have columns with a default width of 200 pixels each. +1. Grid column width is calculated based on the sum of column widths. For example, a Grid container with 4 columns and a width of 800 pixels will have columns with a default width of 200 pixels each. 2. If you specify widths for some columns but not others, the Grid will distribute the available width equally among the columns without explicit widths. For example, if you have 3 columns with widths of 100px, 200px, and no width specified for the third column, the third column will occupy the remaining width after accounting for the first two columns. -3. Columns with percentage widths are responsive and adjust their width based on the size of the grid container. For example, a column with a width of 50% will occupy 50% of the grid width and will adjust proportionally when the grid container is resized to a smaller size. +3. Columns with percentage widths are responsive and adjust their width based on the size of the Grid container. For example, a column with a width of 50% will occupy 50% of the Grid width and will adjust proportionally when the Grid container is resized to a smaller size. -4. When you manually resize columns in Syncfusion® Grid, a minimum width is set to ensure that the content within the cells remains readable. By default, the minimum width is set to 10 pixels if not explicitly specified for a column. +4. When you manually resize columns in Grid, a minimum width is set to ensure that the content within the cells remains readable. By default, the minimum width is set to 10 pixels if not explicitly specified for a column. -5. If the total width of all columns exceeds the width of the grid container, a horizontal scrollbar will automatically appear to allow horizontal scrolling within the grid. +5. If the total width of all columns exceeds the width of the Grid container, a horizontal scrollbar will automatically appear to allow horizontal scrolling within the Grid. -6. When the columns is hide using the column chooser, the width of the hidden columns is removed from the total grid width, and the remaining columns will be resized to fill the available space. +6. When the columns is hide using the column chooser, the width of the hidden columns is removed from the total Grid width, and the remaining columns will be resized to fill the available space. -7. If the parent element has a fixed width, the grid component will inherit that width and occupy the available space. However, if the parent element does not have a fixed width, the grid component will adjust its width dynamically based on the available space. +7. If the parent element has a fixed width, the Grid will inherit that width and occupy the available space. However, if the parent element does not have a fixed width, the Grid will adjust its width dynamically based on the available space. 8. When AllowResizing is enabled in the Data Grid, columns whose width is unspecified will be defined as 200px. **Supported types for column width** -Syncfusion® DataGrid supports the following three types of column width: +Syncfusion DataGrid supports the following three types of column width: **1. Auto** -The column width is automatically calculated based on the content within the column cells. If the content exceeds the width of the column, it will be truncated with an ellipsis (...) at the end. You can set the width for columns as **Auto** in your DataGrid configuration as shown below: +The column width is automatically calculated based on the content within the column cells. If the content exceeds the width of the column, it will be truncated with an ellipsis (...) at the end. You can set the width for columns as **Auto** in your Grid configuration as shown below: ```cshtml @@ -162,7 +162,7 @@ The column width is automatically calculated based on the content within the col **2. Percentage** -The column width is specified as a percentage value relative to the width of the datagrid container. For example, a column width of 25% will occupy 25% of the total datagrid width. You can set the width for columns as **percentage** in your DataGrid configuration as shown below: +The column width is specified as a percentage value relative to the width of the Grid container. For example, a column width of 25% will occupy 25% of the total Grid width. You can set the width for columns as **percentage** in your Grid configuration as shown below: ```cshtml @@ -170,7 +170,7 @@ The column width is specified as a percentage value relative to the width of the **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 size. You can set the width for columns as **pixel** in your Grid configuration as shown below: +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 size. You can set the width for columns as **pixel** in your Grid configuration as shown below: ```cshtml @@ -246,7 +246,7 @@ public class OrderData ## Column Formatting -Column formatting is a powerful feature in Syncfusion® DataGrid that allows you to customize the display of data in datagrid columns. You can apply different formatting options to columns based on your requirements, such as displaying numbers with specific formats, formatting dates according to a specific locale, and using templates to format column values. +Column formatting is a powerful feature in Syncfusion DataGrid that allows you to customize the display of data in Grid columns. You can apply different formatting options to columns based on your requirements, such as displaying numbers with specific formats, formatting dates according to a specific locale, and using templates to format column values. You can use the [Column.Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property to specify the format for column values. @@ -319,7 +319,7 @@ You can use the [Column.Format](https://help.syncfusion.com/cr/blazor/Syncfusion {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVKsNgtdDxrKkCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ->* The datagrid uses the **Internalization** library to format values based on the specified format and culture. +>* The Grid uses the **Internalization** library to format values based on the specified format and culture. >* By default, the **number** and **date** values are formatted in **en-US** locale. >* The available format codes may vary depending on the data type of the column. >* You can also customize the formatting further by providing a custom function to the `Format` property, instead of a format string. @@ -327,7 +327,7 @@ You can use the [Column.Format](https://help.syncfusion.com/cr/blazor/Syncfusion ### Number formatting -Number formatting allows you to customize the display of numeric values in datagrid columns. You can use standard numeric format strings or custom numeric format strings to specify the desired format. 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 number format for numeric columns. For example, you can use the following format strings to format numbers: +Number formatting allows you to customize the display of numeric values in Grid columns. You can use standard numeric format strings or custom numeric format strings to specify the desired format. 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 number format for numeric columns. For example, you can use the following format strings to format numbers: Format |Description |Remarks -----|-----|----- @@ -416,7 +416,7 @@ The following example code demonstrates the formatting of data for **Mark 1** an ### Date formatting -Date formatting in datagrid columns allows you to customize how date values are displayed. You can use standard date format strings, such as **"d," "D," "MMM dd, yyyy,"** and more, or create your own custom format strings. To specify the desired date format, you can use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property of the DataGrid columns. For example, you can set `Format` as a string like **"yyyy-MM-dd"** for a built-in date format. +Date formatting Grid columns allows you to customize how date values are displayed. You can use standard date format strings, such as **"d," "D," "MMM dd, yyyy,"** and more, or create your own custom format strings. To specify the desired date format, you can use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property of the DataGrid columns. For example, you can set `Format` as a string like **"yyyy-MM-dd"** for a built-in date format. Additionally, you can use custom format strings to format date values, and examples of custom formats and formatted date values are provided in the table below. @@ -499,7 +499,7 @@ Type="ColumnType.Date" Format="dMM/dd/yyyy hh:mm:ss tt" | 04/07/1996 12:00 AM ### Format the date column based on localization -In Syncfusion® Blazor Grid, you can format date columns to match the user’s locale settings by configuring the application’s localization. By setting up the application culture and using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property in Grid columns, you can display dates in a format appropriate for the user’s region. +In Syncfusion Blazor Grid, you can format date columns to match the user’s locale settings by configuring the application’s localization. By setting up the application culture and using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property in Grid columns, you can display dates in a format appropriate for the user’s region. **Enabling Localization in a Blazor Application** @@ -511,7 +511,7 @@ To enable localization in your Blazor application: 2. **Register Locale Files:** - Follow the localization setup guidelines provided in the [Syncfusion® Localization Documentation](https://blazor.syncfusion.com/documentation/common/localization) to register and configure the locale files in your project. + Follow the localization setup guidelines provided in the [Syncfusion Localization Documentation](https://blazor.syncfusion.com/documentation/common/localization) to register and configure the locale files in your project. 3. **Set the Application Culture:** @@ -523,7 +523,7 @@ To enable localization in your Blazor application: CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("es-AR"); ``` -Once localization is enabled, you can specify a custom date format for each date column in the Syncfusion® Blazor Grid by using the `Format` property. This property allows you to define how dates will be displayed, enhancing user experience by ensuring date formats are familiar to the user. +Once localization is enabled, you can specify a custom date format for each date column in the Syncfusion Blazor Grid by using the `Format` property. This property allows you to define how dates will be displayed, enhancing user experience by ensuring date formats are familiar to the user. In the example below, the date format is set to **yyyy-MMM-dd** to align with the Spanish culture configured in the application. @@ -610,11 +610,11 @@ namespace LocalizationSample.Client ![Format the date column based on localization](./images/blazor-datagrid-format-localization.png) -> [Syncfusion® GitHub Sample for Blazor Localization](https://github.com/SyncfusionExamples/blazor-localization) +> [Syncfusion GitHub Sample for Blazor Localization](https://github.com/SyncfusionExamples/blazor-localization) ### Format template column value -In the Syncfusion® Blazor DataGrid, you have the ability to customize the display of data in a column through the use of template columns. Formatting template column values is essential for enhancing the visual representation of data in a web application. It allows the customization of the appearance of specific column data, such as dates and numbers, to improve readability and user understanding. +In the Syncfusion Blazor DataGrid, you have the ability to customize the display of data in a column through the use of template columns. Formatting template column values is essential for enhancing the visual representation of data in a web application. It allows the customization of the appearance of specific column data, such as dates and numbers, to improve readability and user understanding. To illustrate how to format a template column value, consider the following example where the OrderDate column is formatted to display dates in the ‘dd/MMM/yyyy’ format. @@ -717,7 +717,7 @@ public class OrderData ### Custom formatting -Syncfusion® Blazor DataGrid allows you to customize the formatting of data in the grid columns. You can apply custom formats to numeric or date columns to display data in a specific way according to the requirements. To apply custom formatting to grid columns in Syncfusion® Grid, you can use the format property. Here’s an example of how you can use custom formatting for numeric and date columns: +Syncfusion Blazor DataGrid allows you to customize the formatting of data in the Grid columns. You can apply custom formats to numeric or date columns to display data in a specific way according to the requirements. To apply custom formatting to Grid columns in Syncfusion Grid, you can use the format property. Here’s an example of how you can use custom formatting for numeric and date columns: In the below example, the numberFormatOptions object is used as the format property for the ‘Freight’ column to apply a custom numeric format with four decimal places. Similarly, the dateFormatOptions object is used as the format property for the ‘OrderDate’ column to apply a custom date format displaying the date in the format of day-of-the-week, month abbreviation, day, and 2-digit year (e.g. Sun, May 8, 23). @@ -813,7 +813,7 @@ You can align the text in the content of a Grid column using the [TextAlign](htt * **Right**: Aligns the text to the right. * **Justify**: Align the text to the justify. -Here is an example of using the `TextAlign` property to align the text of a DataGrid column: +Here is an example of using the `TextAlign` property to align the text of a Grid column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -856,7 +856,7 @@ Here is an example of using the `TextAlign` property to align the text of a Data new ColumnAlignmentOption() { Text= "Center" }, }; - // Reference to the grid + // Reference to the Grid private SfGrid grid; public void OnValueChange(ChangeEventArgs args) { @@ -939,7 +939,7 @@ Here is an example of using the `TextAlign` property to align the text of a Data ## Render boolean values as checkbox -The DataGrid component allows you to render boolean values as checkboxes in columns. This can be achieved by using the [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisplayAsCheckBox) property, which is available in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn__ctor) component. This property is useful when you have a boolean column in your DataGrid and you want to display the values as checkboxes instead of the default text representation of **true** or **false**. +The DataGrid allows you to render boolean values as checkboxes in columns. This can be achieved by using the [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisplayAsCheckBox) property, which is available in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn__ctor) component. This property is useful when you have a boolean column in your Grid and you want to display the values as checkboxes instead of the default text representation of **true** or **false**. To enable the rendering of boolean values as checkboxes, you need to set the `DisplayAsCheckBox` property of the `GridColumn` to **true**. @@ -1012,13 +1012,13 @@ To enable the rendering of boolean values as checkboxes, you need to set the `Di {% previewsample "https://blazorplayground.syncfusion.com/embed/VXLqWZKWCpWghdlk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ->* The `DisplayAsCheckBox` property is only applicable to boolean values in DataGrid columns. +>* The `DisplayAsCheckBox` property is only applicable to boolean values in Grid columns. > * Need to define [EditType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_EditType) as **EditType.BooleanEdit** to GridColumn to render checkbox while editing a boolean value. ->* When `DisplayAsCheckBox` is set to **true**, the boolean values will be rendered as checkboxes in the DataGrid column, with checked state indicating **true** and unchecked state indicating **false**. +>* When `DisplayAsCheckBox` is set to **true**, the boolean values will be rendered as checkboxes in the Grid column, with checked state indicating **true** and unchecked state indicating **false**. ## AutoFit columns -The DataGrid has a feature that allows to automatically adjust column widths based on the maximum content width of each column when you double-click on the resizer symbol located in a specific column header. This feature ensures that all data in the datagrid rows is displayed without wrapping. To use this feature, enable the resizer symbol in the column header by setting 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. +The DataGrid has a feature that allows to automatically adjust column widths based on the maximum content width of each column when you double-click on the resizer symbol located in a specific column header. This feature ensures that all data in the Grid rows is displayed without wrapping. To use this feature, enable the resizer symbol in the column header by setting 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. ### Resizing a column to fit its content using autoFit method @@ -1111,9 +1111,9 @@ The [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo ### AutoFit columns with empty space -The Autofit feature is utilized to display columns in a datagrid based on the defined width specified in the columns declaration. If the total width of the columns is less than the width of the grid, this means that white space will be displayed in the grid instead of the columns auto-adjusting to fill the entire grid width. +The Autofit feature is utilized to display columns in a Grid based on the defined width specified in the columns declaration. If the total width of the columns is less than the width of the Grid, this means that white space will be displayed in the Grid instead of the columns auto-adjusting to fill the entire Grid width. -You can enable this feature by setting the [AutoFit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoFit) property set to **true**. This feature ensures that the column width is rendered only as defined in the DataGrid column definition. +You can enable this feature by setting the [AutoFit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoFit) property set to **true**. This feature ensures that the column width is rendered only as defined in the Grid column definition. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1186,11 +1186,11 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/VXhSZUBQeWplEcFY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> If any one of the column width is undefined, then the particular column will automatically adjust to fill the entire width of the datagrid table, even if you have enabled the `AutoFit` property of the grid. +> If any one of the column width is undefined, then the particular column will automatically adjust to fill the entire width of the Grid table, even if you have enabled the `AutoFit` property of the Grid. ### Autofit columns when changing column visibility using column chooser -In Syncfusion® DataGrid, you can auto-fit columns when the column visibility is changed using the column chooser. This can be achieved by calling the [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoFitColumnsAsync) method in the [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) event. By using the **RequestType** property in the event arguments, you can differentiate between different actions, and then call the `AutoFitColumnsAsync` method when the request type is **ColumnState**. +In Syncfusion DataGrid, you can auto-fit columns when the column visibility is changed using the column chooser. This can be achieved by calling the [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoFitColumnsAsync) method in the [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) event. By using the **RequestType** property in the event arguments, you can differentiate between different actions, and then call the `AutoFitColumnsAsync` method when the request type is **ColumnState**. Here's an example code snippet in Blazor that demonstrates how to auto fit columns when changing column visibility using column chooser: @@ -1279,11 +1279,11 @@ Here's an example code snippet in Blazor that demonstrates how to auto fit colum ## Fixed columns -The Blazor DataGrid component allows you to fix specific columns at the beginning of the DataGrid, preventing them from being **reordered** or **grouped** while ensuring they remain in a fixed position. You can fix multiple columns, and they will appear in the same order as defined in the column collection. +The Syncfusion Blazor DataGrid allows you to fix specific columns at the beginning of the Grid, preventing them from being **reordered** or **grouped** while ensuring they remain in a fixed position. You can fix multiple columns, and they will appear in the same order as defined in the column collection. -To enable fixed columns in the DataGrid, set the [FixedColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FixedColumn) property to **true** for the respective columns. +To enable fixed columns in the Grid, set the [FixedColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FixedColumn) property to **true** for the respective columns. -The following example demonstrates how to fix the **OrderID** and **OrderDate** columns in a DataGrid using the `FixedColumn` property. These columns will remain fixed and cannot be reordered or grouped. +The following example demonstrates how to fix the **OrderID** and **OrderDate** columns in a Grid using the `FixedColumn` property. These columns will remain fixed and cannot be reordered or grouped. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1358,13 +1358,13 @@ public class OrderDetails ## Show or hide columns -The Syncfusion® Grid control allows you to show or hide columns dynamically by using property or methods available in the grid. This feature can be useful when you want to customize the visibility of columns in the Grid based on the requirements. +The Syncfusion Grid control allows you to show or hide columns dynamically by using property or methods available in the Grid. This feature can be useful when you want to customize the visibility of columns in the Grid based on the requirements. ### Using property -You can show or hide columns in the Blazor DataGrid using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property of each column. By setting the `Visible` property to **true** or **false**, you can control whether the column should be visible or hidden in the datagrid. Here's an example of how to show or hide a column in the Blazor DataGrid using the visible property: +You can show or hide columns in the Blazor DataGrid using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property of each column. By setting the `Visible` property to **true** or **false**, you can control whether the column should be visible or hidden in the Grid. Here's an example of how to show or hide a column in the Grid using the visible property: -In the below example, the **ShipCity** column is defined with `Visible` property set to **false**, which will hide the column in the rendered grid. +In the below example, the **ShipCity** column is defined with `Visible` property set to **false**, which will hide the column in the rendered Grid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1440,19 +1440,19 @@ 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 only affects the UI representation of the datagrid. The data for the hidden column will still be available in the underlying data source, and can be accessed or modified programmatically. ->* When a column is hidden, its width is not included in the calculation of the total datagrid width. +>* Hiding a column using the `Visible` property only affects the UI representation of the Grid. The data for the hidden column will still be available in the underlying data source, and can be accessed or modified programmatically. +>* When a column is hidden, its width is not included in the calculation of the total Grid width. >* To hide a column permanently, you can set its Visible property to false in the column definition, or remove the column definition altogether. ### Using methods -You can also show or hide columns in the Blazor DataGrid using the [ShowColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnsAsync_System_String___System_String_) and [HideColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumnsAsync_System_String___System_String_) methods of the datagrid component. These methods allow you to show or hide columns based on either the `HeaderText` or the `Field` of the column. +You can also show or hide columns in the Blazor DataGrid using the [ShowColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnsAsync_System_String___System_String_) and [HideColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumnsAsync_System_String___System_String_) methods of the Grid. These methods allow you to show or hide columns based on either the `HeaderText` or the `Field` of the column. **Based on header text** You can dynamically show or hide columns in the DataGrid based on the header text by invoking the `ShowColumnsAsync` or `HideColumnsAsync` methods. These methods take an array of column header texts as the first parameter, and the value `HeaderText` as the second parameter to specify that you are showing or hiding columns based on the header text. -Here's an example of how to show or hide a column based on the HeaderText in the Blazor DataGrid: +Here's an example of how to show or hide a column based on the HeaderText in the a Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1541,7 +1541,7 @@ Here's an example of how to show or hide a column based on the HeaderText in the You can dynamically show or hide columns in the DataGrid using external buttons based on the field by invoking the `ShowColumnsAsync` or `HideColumnsAsync` methods. These methods take an array of column fields as the first parameter, and the value `Field` as the second parameter to specify that you are showing or hiding columns based on the field. -Here's an example of how to show or hide a column based on the field in the Blazor DataGrid: +Here's an example of how to show or hide a column based on the field in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1630,7 +1630,7 @@ public class OrderData ## Removing hidden column elements from the DOM -The Syncfusion® Blazor DataGrid component provides control over whether the cell elements of hidden columns are rendered in the DOM. By default, hidden columns are included in the DOM, but you can prevent their rendering using the [ShouldRenderHiddenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShouldRenderHiddenColumns) property. This optimization improves performance, especially when multiple hidden columns are present. +The Syncfusion Blazor DataGrid provides control over whether the cell elements of hidden columns are rendered in the DOM. By default, hidden columns are included in the DOM, but you can prevent their rendering using the [ShouldRenderHiddenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShouldRenderHiddenColumns) property. This optimization improves performance, especially when multiple hidden columns are present. You can set the `ShouldRenderHiddenColumns` property to **false** to remove hidden column elements from the DOM, improving performance when handling large datasets with multiple hidden columns. @@ -1723,7 +1723,7 @@ public class OrderDetails ## Controlling Grid actions -You can control various actions such as filtering, grouping, sorting, resizing, reordering, editing, and searching for specific columns in the Syncfusion® Blazor DataGrid using the following properties: +You can control various actions such as filtering, grouping, sorting, resizing, reordering, editing, and searching for specific columns in the Syncfusion Blazor DataGrid using the following properties: * [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowEditing): Enables or disables editing for a column. * [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowFiltering): Enables or disables filtering for a column. @@ -1733,7 +1733,7 @@ You can control various actions such as filtering, grouping, sorting, resizing, * [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing): Enables or disables resizing for a column * [AllowSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSearching): Enables or disables searching for a column -Here is an example code that demonstrates how to control datagrid actions for specific columns: +Here is an example code that demonstrates how to control Grid actions for specific columns: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1808,21 +1808,21 @@ Here is an example code that demonstrates how to control datagrid actions for sp ## Customize column styles -Customizing the datagrid column styles allows you to modify the appearance of columns in the DataGrid control to meet your design requirements. You can customize the font, background color, and other styles of the columns. To customize the columns styles in the datagrid, you can use grid event, css, property or method support. +Customizing the Grid column styles allows you to modify the appearance of columns in the DataGrid control to meet your design requirements. You can customize the font, background color, and other styles of the columns. To customize the columns styles in the Grid, you can use Grid event, css, property or method support. For more information check on this [documentation](https://blazor.syncfusion.com/documentation/datagrid/cell#customize-cell-styles). ## Manipulating columns -The Syncfusion® DataGrid for Blazor provides powerful features for manipulating columns in a datagrid. This section explains how to access columns and add/remove columns using Syncfusion® DataGrid properties, methods, and events. +The Syncfusion DataGrid for Blazor provides powerful features for manipulating columns in a Grid. This section explains how to access columns and add/remove columns using Syncfusion Grid properties, methods, and events. ### Accessing Columns -To access columns in the Syncfusion® DataGrid, you can use the following methods in the datagrid. +To access columns in the Syncfusion DataGrid, you can use the following methods in the Grid. * **[GetColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnsAsync_System_Nullable_System_Boolean__)**: -This method returns the array of columns defined in the datagrid. +This method returns the array of columns defined in the Grid. ```csharp var Columns = this.Grid.GetColumnsAsync().Result; @@ -1862,7 +1862,7 @@ var ForeignKeyColumns = this.Grid.GetForeignKeyColumnsAsync.Result; * **[GetColumnFieldNamesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnFieldNamesAsync)** -This method returns an list of field names of all the columns in the DataGrid. +This method returns an list of field names of all the columns in the Grid. ```csharp var FieldNames = this.Grid.GetColumnFieldNamesAsync().Result; @@ -1872,11 +1872,11 @@ This method returns an list of field names of all the columns in the DataGrid. ### Adding/Removing Columns -The DataGrid component allows you to dynamically add or remove columns to and from the datagrid using the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property, which can be accessed through the instance of the DataGrid. +The Blazor Grid allows you to dynamically add or remove columns to and from the Grid using the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property, which can be accessed through the instance of the Grid. -To add a new column to the DataGrid, you can directly **Add** the new column object to the columns property.To remove a column from the DataGrid, you can use the **RemoveAt** method. This method allows you to remove a specific column from the columns list of the DataGrid. In the below provided code snippet, the column removed is the last column in the list. If you want to remove a specific list of columns by its index. +To add a new column to the Grid, you can directly **Add** the new column object to the columns property.To remove a column from the Grid, you can use the **RemoveAt** method. This method allows you to remove a specific column from the columns list of the Grid. In the below provided code snippet, the column removed is the last column in the list. If you want to remove a specific list of columns by its index. -Here's an example of how you can add and remove a column from the datagrid: +Here's an example of how you can add and remove a column from the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1979,16 +1979,16 @@ Here's an example of how you can add and remove a column from the datagrid: ### How to refresh columns -You can use the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method of the Syncfusion® DataGrid to refresh the columns in the datagrid. This method can be used when you need to update the datagrid columns dynamically based on user actions or data changes. +You can use the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method of the Syncfusion DataGrid to refresh the columns in the Grid. This method can be used when you need to update the Grid columns dynamically based on user actions or data changes. ```cs this.Grid.RefreshColumnsAsync(); ``` ## Responsive columns -The Syncfusion® Blazor DataGrid provides a built-in feature to toggle the visibility of columns based on Media Queries using the [HideAtMedia](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HideAtMedia) Column property. The `HideAtMedia` accepts valid [Media Queries](http://cssmediaqueries.com/what-are-css-media-queries.html). +The Syncfusion Blazor DataGrid provides a built-in feature to toggle the visibility of columns based on Media Queries using the [HideAtMedia](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HideAtMedia) Column property. The `HideAtMedia` accepts valid [Media Queries](http://cssmediaqueries.com/what-are-css-media-queries.html). -In this example, we have a DataGrid that displays data with three columns: **Order ID, Customer ID, and Freight**. We have set the `HideAtMedia` property of the **OrderID** column to (min-width: 700px) which means that this column will be hidden when the browser screen width is less than or equal to 700px. +In this example, we have a Grid that displays data with three columns: **Order ID, Customer ID, and Freight**. We have set the `HideAtMedia` property of the **OrderID** column to (min-width: 700px) which means that this column will be hidden when the browser screen width is less than or equal to 700px. {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/foreignKey-column.md b/blazor/datagrid/foreignKey-column.md index 1196489664..39f3ef094f 100644 --- a/blazor/datagrid/foreignKey-column.md +++ b/blazor/datagrid/foreignKey-column.md @@ -7,21 +7,21 @@ control: DataGrid documentation: ug --- -# Foreign key column in Blazor DataGrid component +# Foreign key column in Blazor DataGrid -The Foreign key column in the Syncfusion® Grid component allows you to display related data from a foreign key data source in a column within the grid. This feature is particularly useful when you have a column in the grid that represents a foreign key relationship with another data source. +The Foreign key column in the Syncfusion Blazor DataGrid allows you to display related data from a foreign key data source in a column within the Grid. This feature is particularly useful when you have a column in the Grid that represents a foreign key relationship with another data source. Foreign key column can be enabled by using `ForeignDataSource`, [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) and [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) properties of **GridForeignColumn** directive. -Define the foreign key column in the grid using the following properties: +Define the foreign key column in the Grid using the following properties: * `ForeignDataSource` - Specifies the foreign 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 name in the grid to the field in the foreign data source that represents the foreign key relationship. -* [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 as the related data. +* [ForeignKeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyField) - Maps the column name in the Grid to the field in the foreign data source that represents the foreign key relationship. +* [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 as the related data. ## Binding local data -The Syncfusion® Grid component provides a convenient way to bind local data to a foreign key column. This allows you to display related data from a local data source within the grid. Here’s an example of how to bind local data to a Foreign Key column in Syncfusion® Grid: +The Syncfusion Grid provides a convenient way to bind local data to a foreign key column. This allows you to display related data from a local data source within the Grid. Here’s an example of how to bind local data to a Foreign Key column in Grid: In this example, data is the local data source for the Grid, and **Employee Name** is the local data source for the foreign key column. The ForeignKeyValue property is set to **FirstName** which represents the field name in the **Employee Name** that you want to display in the foreign key column. @@ -119,9 +119,9 @@ public class EmployeeDetails ## Binding remote data -The Foreign key column in Syncfusion® Grid allows you to bind remote data for a foreign key column. You can use `SfDataManager` component instead of using `DataSource` property. +The Foreign key column in Syncfusion Blazor DataGrid allows you to bind remote data for a foreign key column. You can use `SfDataManager` instead of using `DataSource` property. -This example demonstrates how to use the foreign key column with remote data binding using the `ODataV4Adaptor` in the grid: +This example demonstrates how to use the foreign key column with remote data binding using the `ODataV4Adaptor` in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -204,9 +204,9 @@ public class OrderDetails ## Use edit template in foreign key column -The Syncfusion® Grid provides support for using an edit template in a foreign key column. By default, a dropdown component is used for editing foreign key column. Other editable components can be rendered using the EditTemplate feature of Grid. The following example demonstrates the way of using edit template with ComboBox component in the foreign column. +The Syncfusion Blazor DataGrid provides support for using an edit template in a foreign key column. By default, a dropdown is used for editing foreign key column. Other editable components can be rendered using the EditTemplate feature of Grid. The following example demonstrates the way of using edit template with ComboBox in the foreign column. -In the following code example, the Employee Name is a foreign key column. When editing, the ComboBox component is rendered instead of DropDownList. +In the following code example, the Employee Name is a foreign key column. When editing, the `ComboBox` is rendered instead of `DropDownList`: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -323,11 +323,11 @@ In the following code example, the Employee Name is a foreign key column. When e ## Customize filter UI in foreignkey column -The Syncfusion® Grid allows you to customize the filtering user interface (UI) for foreign key columns by using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. By default, a dropdown component is used for filtering foreign key columns. However, you can create your own custom filtering UI by [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. Here’s an example that demonstrates how to create a custom filtering UI in a foreign key column: +The Syncfusion Blazor DataGrid allows you to customize the filtering user interface (UI) for foreign key columns by 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 used for filtering foreign key columns. However, you can create your own custom filtering UI by [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. Here’s an example that demonstrates how to create a custom filtering UI in a foreign key column: > For all filter types other than FilterBar, filtering parameters will be sent in the form of `PredicateModel`. Here, T represents the type of `ForeignKeyValue` property when using the foreignkey column. -In this example, a DropDownList component is rendered as the filter UI for the **“EmployeeID”** foreign key column. The **DataSource** property of the `SfDropDownList` component is set to the employees data, and the Fields property is configured to display the **FirstName** field as the text and **EmployeeID** field as the value. The `value` property is set to the current filter value of the column. +In this example, a `DropDownList` is rendered as the filter UI for the **“EmployeeID”** foreign key column. The **DataSource** property of the `SfDropDownList` is set to the employees data, and the Fields property is configured to display the **FirstName** field as the text and **EmployeeID** field as the value. The `value` property is set to the current filter value of the column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -433,9 +433,9 @@ public class EmployeeDetails ## Use filter bar template in foreign key column -You can use the filter template in a foreign key column in Grid by using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This allows you to customize the filter bar for the foreign key column with a custom component or HTML template. Here’s an example that demonstrates how to use a Filter template in a foreign key column: +You can use the filter template in a foreign key column in Grid by using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This allows you to customize the filter bar for the foreign key column with a custom component or HTML template. Here’s an example that demonstrates how to use a Filter template in a foreign key column: -In this example, the **“EmployeeID”** column is a foreign key column. The `FilterTemplate` property is used to render a Syncfusion DropDownList component as a filter, you can select filter value by using the **DropDown** options. +In this example, the **“EmployeeID”** column is a foreign key column. The `FilterTemplate` property is used to render a `DropDownList` as a filter, you can select filter value by using the **DropDown** options. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -567,7 +567,7 @@ public class EmployeeDetails ## Perform aggregation in foreign key column -By default, aggregations are not supported in a foreign key column in the Syncfusion DataGrid. However, you can achieve aggregation for a foreign key column by using `customAggregate`. +By default, aggregations are not supported in a foreign key column in the Syncfusion Blazor DataGrid. However, you can achieve aggregation for a foreign key column by using `customAggregate`. To perform aggregation in a foreign key column, follow these steps: @@ -577,7 +577,7 @@ To perform aggregation in a foreign key column, follow these steps: Here's an example that demonstrates how to perform aggregation in a foreign key column: -In the provided example, the `customAggregateFn` function is used to filter and count the **Margaret** data based on the **FirstName** field of the foreign key column. The result is displayed in the DataGrid's footer template using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate) property. +In the provided example, the `customAggregateFn` function is used to filter and count the **Margaret** data based on the **FirstName** field of the foreign key column. The result is displayed in the Grid's footer template using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate) property. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -692,7 +692,7 @@ public class EmployeeDetails By default, a filter query for the foreignkey column will be generated based on the foreignkey value. You can prevent the default filter query generation for the foreignkey column and add the custom filter query. This can be achieved by setting the [PreventFilterQuery](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ActionEventArgs-1.html#Syncfusion_Blazor_Grids_ActionEventArgs_1_PreventFilterQuery) argument of the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event to true. -In the following code sample, you can prevent default filter query generation using the `PreventFilterQuery` property and generate a custom filter query to execute a filter operation. +In the following code sample, you can prevent default filter query generation using the `PreventFilterQuery` property and generate a custom filter query to execute a filter operation: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -855,9 +855,9 @@ The following example demonstrates how to render a foreign key value using a col ## Enable multiple foreign key columns -The Syncfusion® Grid component supports the feature of enabling multiple foreign key columns with editing options. This allows users to display columns from foreign data sources in the Grid component. +The Syncfusion Blazor DataGrid supports the feature of enabling multiple foreign key columns with editing options. This allows users to display columns from foreign data sources in the Grid. -In the following example, Employee Name and Ship City are foreign key columns that display the FirstName and ShipCity columns from foreign data. +In the following example, Employee Name and Ship City are foreign key columns that display the FirstName and ShipCity columns from foreign data: {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/frozen-column.md b/blazor/datagrid/frozen-column.md index b17298c444..90e60b4ea9 100644 --- a/blazor/datagrid/frozen-column.md +++ b/blazor/datagrid/frozen-column.md @@ -7,15 +7,15 @@ control: DataGrid documentation: ug --- -# Column Pinning (Frozen) in Blazor DataGrid component +# Column Pinning (Frozen) in Blazor DataGrid -In the Syncfusion® Blazor DataGrid component, you have the capability to **freeze** columns, ensuring they remain visible as you scroll through extensive datasets. This functionality significantly improves user experience by keeping critical information constantly within view, even when navigating through large volumes of data. This means that important columns remain fixed in their positions, making it easier to access and reference key data points while working with the grid. +In the Syncfusion Blazor DataGrid, you have the capability to **freeze** columns, ensuring they remain visible as you scroll through extensive datasets. This functionality significantly improves user experience by keeping critical information constantly within view, even when navigating through large volumes of data. This means that important columns remain fixed in their positions, making it easier to access and reference key data points while working with the Grid. -To know about frozen columns in Blazor DataGrid Component, you can check this video. +To know about frozen columns in Grid, you can check this video. {% youtube "youtube:https://www.youtube.com/watch?v=L2NvKyBomhM"%} -In the following example, the [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) property is set to **2**. This configuration freezes the left two columns of the grid, and they will remain fixed in their positions while the rest of the columns grid can be scrolled horizontally. +In the following example, the [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) property is set to **2**. This configuration freezes the left two columns of the Grid, and they will remain fixed in their positions while the rest of the columns Grid can be scrolled horizontally: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -130,14 +130,14 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/BDhfWsCbfiSSvvZz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * Frozen columns should not be set outside the grid view port. +> * Frozen columns should not be set outside the Grid view port. > * Frozen Grid support column virtualization feature, which helps to improve the Grid performance while loading a large dataset. > * The frozen feature is supported only for the columns that are visible in the current view. > * You can use both `FrozenColumns` property and [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) property in the same application. ## Change default frozen line color -You can customize the frozen line borders of frozen columns in the Syncfusion® DataGrid component by applying custom CSS styles to the specific frozen column. This allows you to change the border color of the left frozen columns, right frozen columns, and fixed frozen columns to match your application's design and theme. +You can customize the frozen line borders of frozen columns in the Syncfusion Blazor DataGrid by applying custom CSS styles to the specific frozen column. This allows you to change the border color of the left frozen columns, right frozen columns, and fixed frozen columns to match your application's design and theme. To change default frozen line color, use the following class name and apply the border color based on your requirement. @@ -166,7 +166,7 @@ For fixed frozen columns, you need to specify both left and right border as ment border-right-color: rgb(10, 224, 10); } ``` -The following example demonstrates how to change the default frozen line color using CSS. +The following example demonstrates how to change the default frozen line color using CSS: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -274,9 +274,9 @@ The following example demonstrates how to change the default frozen line color u ## Detail template with frozen columns -The Syncfusion® DataGrid allows columns to be **frozen** while using a [detail template](https://blazor.syncfusion.com/documentation/datagrid/detail-template). The detail template in the DataGrid component enables you to display additional information about a specific row by expanding or collapsing its detail content. +The Syncfusion Blazor DataGrid allows columns to be **frozen** while using a [detail template](https://blazor.syncfusion.com/documentation/datagrid/detail-template). The detail template in the Grid enables you to display additional information about a specific row by expanding or collapsing its detail content. -Here’s an example of using the **detail template** alongside **frozen columns** in the DataGrid: +Here’s an example of using the **detail template** alongside **frozen columns** in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -409,11 +409,11 @@ public class EmployeeDetails ## Add or remove frozen columns by dragging the column separator -The Syncfusion® Blazor DataGrid allows you to dynamically add or remove columns from the frozen content by dragging and dropping the column separator. This provides flexibility to customize the grid layout directly through individual interactions. +The Syncfusion Blazor DataGrid allows you to dynamically add or remove columns from the frozen content by dragging and dropping the column separator. This provides flexibility to customize the Grid layout directly through individual interactions. -To enable this feature, 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 component. +To enable this feature, 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. -Here is an example that demonstrates how to enable and use the `AllowFreezeLineMoving` property in the Syncfusion® DataGrid. +Here is an example that demonstrates how to enable and use the `AllowFreezeLineMoving` property in the Grid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -505,7 +505,7 @@ public class OrderDetails ## Limitations of frozen columns and freeze direction -The frozen columns and freeze direction features in Syncfusion® Blazor DataGrid have the following limitations: +The frozen columns and freeze direction features in Syncfusion Blazor DataGrid have the following limitations: **General limitations for frozen columns** @@ -519,5 +519,4 @@ The frozen columns and freeze direction features in Syncfusion Date: Wed, 4 Jun 2025 10:57:28 +0530 Subject: [PATCH 3/4] updated the md file --- blazor/datagrid/column-chooser.md | 2 +- blazor/datagrid/column-headers.md | 6 ++--- blazor/datagrid/column-menu.md | 2 +- blazor/datagrid/column-rendering.md | 4 ++-- blazor/datagrid/column-reorder.md | 4 ++-- blazor/datagrid/column-resizing.md | 4 ++-- blazor/datagrid/column-template.md | 12 +++++----- blazor/datagrid/columns.md | 34 ++++++++++++++-------------- blazor/datagrid/foreignKey-column.md | 6 ++--- blazor/datagrid/frozen-column.md | 4 ++-- 10 files changed, 39 insertions(+), 39 deletions(-) diff --git a/blazor/datagrid/column-chooser.md b/blazor/datagrid/column-chooser.md index 99d3098cd5..934fa496c6 100644 --- a/blazor/datagrid/column-chooser.md +++ b/blazor/datagrid/column-chooser.md @@ -154,7 +154,7 @@ 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 element individually. By setting it to false, you can hide specific columns from the column chooser dialog. -> * To work with showing and hiding columns, it is necessary to have at least one column of the grid in a visible state. +> * To work with showing and hiding columns, it is necessary to have at least one column of the Grid in a visible state. ## Open column chooser by external button diff --git a/blazor/datagrid/column-headers.md b/blazor/datagrid/column-headers.md index c917473082..a8f73571b4 100644 --- a/blazor/datagrid/column-headers.md +++ b/blazor/datagrid/column-headers.md @@ -13,7 +13,7 @@ The Syncfusion Blazor DataGrid provides a comprehensive set of options to custom ## Header text -By default, the header text of a column in DataGrid is displayed from the column's [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value. However, you can easily override the default header title and provide a custom header text for the column using the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property. +By default, the header text of a column in Syncfusion Blazor DataGrid is displayed from the column's [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value. However, you can easily override the default header title and provide a custom header text for the column using the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property. To enable the `HeaderText` property, you simply need to define it in the **GridColumn**. The following example demonstrates how to enable header text for a Grid column: @@ -556,7 +556,7 @@ The Syncfusion Blazor DataGrid provides a way to modify the header text of a cor **Using Event** -To modify the header text of a corresponding column dynamically, you can use the [HeaderCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_HeaderCellInfo) event provided by the Syncfusion Grid. This event is triggered for each header cell element rendered in the Grid. +To modify the header text of a corresponding column dynamically, you can use the [HeaderCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_HeaderCellInfo) event provided by the Grid. This event is triggered for each header cell element rendered in the Grid. When the `HeaderCellInfo` event is triggered, it provides a **HeaderCellInfoEventArgs** object as a parameter. This object contains the following properties: @@ -1047,7 +1047,7 @@ public class OrderDetails ## Customize header text styles -Customizing the Sycnfusion Blazor DataGrid header styles allows you to modify the appearance of the column header in the Grid to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the Grid, you can use CSS and CustomAttributes property of the GridColumn. +Customizing the Syncfusion Blazor DataGrid header styles allows you to modify the appearance of the column header in the Grid to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the Grid, you can use CSS and CustomAttributes property of the GridColumn. ### Using CSS diff --git a/blazor/datagrid/column-menu.md b/blazor/datagrid/column-menu.md index 4dd23626ac..71652a9ea9 100644 --- a/blazor/datagrid/column-menu.md +++ b/blazor/datagrid/column-menu.md @@ -353,7 +353,7 @@ public class OrderData ## Render nested column menu -The nested column menu feature provides an extended menu option in the Grid column headers, allows you to access additional actions and options related to the columns. +The nested column menu feature provides an extended menu option in the Syncfusion Blazor DataGrid column headers, allows you to access additional actions and options related to the columns. To enable the nested column menu feature, you need to define the [ColumnMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ColumnMenuItems) property in your component. The `ColumnMenuItems` property is an array that contains the items for the column menu. Each item can be a string representing a built-in menu item or an object defining a custom menu item. diff --git a/blazor/datagrid/column-rendering.md b/blazor/datagrid/column-rendering.md index a07943b31d..df8c448b7f 100644 --- a/blazor/datagrid/column-rendering.md +++ b/blazor/datagrid/column-rendering.md @@ -11,9 +11,9 @@ documentation: ug In Syncfusion Blazor DataGrid, column rendering provides you with the ability to finely control how data is presented. This allows you to manually define columns, automatically generate them, and dynamically customize data presentation. With column rendering, you can ensure that your data is displayed exactly as needed, offering a wide range of possibilities for organizing and showcasing information within the Grid. -The column definitions are used as the DataSource schema in the Grid. The Grid operations such as sorting, filtering and grouping etc. are performed based on column definitions. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property of Grid column is necessary to map the datasource values in the Grid columns. +The column definitions are used as the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) schema in the Grid. The Grid operations such as sorting, filtering and grouping etc. are performed based on column definitions. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property of Grid column is necessary to map the `DataSource` values in the Grid columns. -> If the column `Field` is not specified in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource), the column values will be empty. +> If the column `Field` is not specified in the `DataSource`, the column values will be empty. > If the `Field` name contains **dot** operator, it is considered as complex binding. > It is must to define the `Field` property for a Template column, to perform CRUD or data Operations such as filtering, searching etc. diff --git a/blazor/datagrid/column-reorder.md b/blazor/datagrid/column-reorder.md index 4715c09ceb..2da46d3ff5 100644 --- a/blazor/datagrid/column-reorder.md +++ b/blazor/datagrid/column-reorder.md @@ -85,7 +85,7 @@ public class OrderDetails ## Prevent reordering for particular column -By default, all columns in the Syncfusion Blazor Grid can be reordered by dragging and dropping their headers to another location within the Grid. However, there may be certain columns that you do not want to be reordered. In such cases, you can set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of that particular column to false. Here is an example that demonstrates how to prevent reordering for a specific column: +By default, all columns in the Syncfusion Blazor DataGrid can be reordered by dragging and dropping their headers to another location within the Grid. However, there may be certain columns that you do not want to be reordered. In such cases, you can set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of that particular column to false. Here is an example that demonstrates how to prevent reordering for a specific column: In this example, the **ShipCity** column is prevented from being reordered by setting the `AllowReordering` property to **false**: @@ -154,7 +154,7 @@ public class OrderDetails ## Reorder columns externally -The Syncfusion Blazor Grid allows you to reorder columns externally, which means that using methods you can programmatically move columns around within the Grid, based on their index or target index, or by using their field name. +The Syncfusion Blazor DataGrid allows you to reorder columns externally, which means that using methods you can programmatically move columns around within the Grid, based on their index or target index, or by using their field name. > When reordering columns externally, you must set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of the Grid to **true**. diff --git a/blazor/datagrid/column-resizing.md b/blazor/datagrid/column-resizing.md index 35f1c00529..a805e7dfcc 100644 --- a/blazor/datagrid/column-resizing.md +++ b/blazor/datagrid/column-resizing.md @@ -346,7 +346,7 @@ The following screenshot represents the column resizing in touch device. ## Resizing column externally -Grid provides the ability to resize columns using an external button click. This can be achieved by changing the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property of the column and refreshing the Grid using the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method in the external button click function. +The Syncfusion Blazor DataGrid provides the ability to resize columns using an external button click. This can be achieved by changing the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property of the column and refreshing the Grid using the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method in the external button click function. The following example demonstrates how to resize the columns in a Grid. This is done by using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of the `DropDownList` by change the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property of the selected column. This is accomplished using the [GetColumnByFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnByFieldAsync_System_String_) on external button click. Then, the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method is called on the Grid to update the displayed columns based on user interaction. @@ -466,7 +466,7 @@ public class OrderDetails ## Resizing events -During the resizing action, the Grid triggers the below two events. +During the resizing action, the Syncfusion Blazor DataGrid triggers the below two events. 1. The [OnResizeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnResizeStart) event triggers when column resize starts. This event can be used to perform actions when the user begins to resize a column. diff --git a/blazor/datagrid/column-template.md b/blazor/datagrid/column-template.md index 5196b6c983..ef17b090de 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -9,7 +9,7 @@ documentation: ug # Column Template in Blazor DataGrid -Sycnfusion Blazor DataGrid provides a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) option that allows you to display custom elements in a column instead of the field value. This can be useful when you need to display images, buttons, or other custom content within a column. +Syncfusion Blazor DataGrid provides a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) option that allows you to display custom elements in a column instead of the field value. This can be useful when you need to display images, buttons, or other custom content within a column. > Before adding column template to the Grid, it is recommended to go through the [template](./templates/#templates) section topic to configure the template. @@ -118,7 +118,7 @@ The following example demonstrates how to define a `Template` for the **Employee ## Render hyperlink in a column -The Sycnfusion Blazor DataGrid provides support for rendering hyperlink columns and performing routing on click using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful when displaying data that requires a link to another page or website. +The Syncfusion Blazor DataGrid provides support for rendering hyperlink columns and performing routing on click using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful when displaying data that requires a link to another page or website. The following example demonstrates, how to render hyperlink column in the Grid using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property of the `GridColumn` tag. To define a `Template` for the column, you can use the `Template` with the `a` tag to create the hyperlink: @@ -195,7 +195,7 @@ public class EmployeeDetails ## Render other components in a column -The column template has options to render a custom component in a Grid column instead of a field value. +The column template has options to render a custom component in a Syncfusion Blazor DataGrid column instead of a field value. ### Render LineChart in a column @@ -299,7 +299,7 @@ public class EmployeeDetails ### Render DropDownList in a column -To render a custom component in a Grid column, you need to define a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) for the column using the column `Template` property. In the following code, we rendered the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) in the **Order Status** column by defining the `Template` property. +To render a custom component in a Syncfusion Blazor DataGrid column, you need to define a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) for the column using the column `Template` property. In the following code, we rendered the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) in the **Order Status** column by defining the `Template` property. ```csharp @@ -395,7 +395,7 @@ public class OrderDetails ### Render Chip in a column -The Sycnfusion Blazor DataGrid provides support for rendering [Chips](https://blazor.syncfusion.com/documentation/chip/getting-started-with-web-app) in a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful when displaying data that requires a chip to be rendered in a column. +The Syncfusion Blazor DataGrid provides support for rendering [Chips](https://blazor.syncfusion.com/documentation/chip/getting-started-with-web-app) in a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful when displaying data that requires a chip to be rendered in a column. In the following code, we rendered the Chips in the Grid **First Name** column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property: @@ -797,7 +797,7 @@ In the example below, a new column called **FinalCost** is created to display th ## How to get the row object by clicking on the template element -The Sycnfusion Blazor DataGrid allows you to retrieve the row object of the selected record when clicking on a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) element. This feature can be useful when you need to perform custom actions based on the selected record. +The Syncfusion Blazor DataGrid allows you to retrieve the row object of the selected record when clicking on a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) element. This feature can be useful when you need to perform custom actions based on the selected record. In the following code, the button is rendered in the **Employee Data** column and [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick) event binding is used to call the showDetails method when the template element is clicked and the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event of the Grid used to access the selected row object and display it in the dialog popup. diff --git a/blazor/datagrid/columns.md b/blazor/datagrid/columns.md index 521fcc2a6d..34182b3b30 100644 --- a/blazor/datagrid/columns.md +++ b/blazor/datagrid/columns.md @@ -150,7 +150,7 @@ To adjust the column width in a Grid, you can use the [Width](https://help.syncf **Supported types for column width** -Syncfusion DataGrid supports the following three types of column width: +Syncfusion Blazor DataGrid supports the following three types of column width: **1. Auto** @@ -246,7 +246,7 @@ public class OrderData ## Column Formatting -Column formatting is a powerful feature in Syncfusion DataGrid that allows you to customize the display of data in Grid columns. You can apply different formatting options to columns based on your requirements, such as displaying numbers with specific formats, formatting dates according to a specific locale, and using templates to format column values. +Column formatting is a powerful feature in Syncfusion Blazor DataGrid that allows you to customize the display of data in Grid columns. You can apply different formatting options to columns based on your requirements, such as displaying numbers with specific formats, formatting dates according to a specific locale, and using templates to format column values. You can use the [Column.Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property to specify the format for column values. @@ -416,7 +416,7 @@ The following example code demonstrates the formatting of data for **Mark 1** an ### Date formatting -Date formatting Grid columns allows you to customize how date values are displayed. You can use standard date format strings, such as **"d," "D," "MMM dd, yyyy,"** and more, or create your own custom format strings. To specify the desired date format, you can use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property of the DataGrid columns. For example, you can set `Format` as a string like **"yyyy-MM-dd"** for a built-in date format. +Date formatting Syncfusion Blazor DataGrid columns allows you to customize how date values are displayed. You can use standard date format strings, such as **"d," "D," "MMM dd, yyyy,"** and more, or create your own custom format strings. To specify the desired date format, you can use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property of the Grid columns. For example, you can set `Format` as a string like **"yyyy-MM-dd"** for a built-in date format. Additionally, you can use custom format strings to format date values, and examples of custom formats and formatted date values are provided in the table below. @@ -806,7 +806,7 @@ public class OrderData ## Align the text of content -You can align the text in the content of a Grid column using the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) property. This property allows you to specify the alignment of the text within the cells of a particular column in the DataGrid. By default, the text is aligned to the left, but you can change the alignment by setting the value of the `TextAlign` property to one of the following options: +You can align the text in the content of a Grid column using the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) property. This property allows you to specify the alignment of the text within the cells of a particular column in the Grid. By default, the text is aligned to the left, but you can change the alignment by setting the value of the `TextAlign` property to one of the following options: * **Left**: Aligns the text to the left (default). * **Center**: Aligns the text to the center. @@ -939,7 +939,7 @@ Here is an example of using the `TextAlign` property to align the text of a Grid ## Render boolean values as checkbox -The DataGrid allows you to render boolean values as checkboxes in columns. This can be achieved by using the [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisplayAsCheckBox) property, which is available in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn__ctor) component. This property is useful when you have a boolean column in your Grid and you want to display the values as checkboxes instead of the default text representation of **true** or **false**. +The Syncfusion Blazor DataGrid allows you to render boolean values as checkboxes in columns. This can be achieved by using the [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisplayAsCheckBox) property, which is available in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn__ctor) component. This property is useful when you have a boolean column in your Grid and you want to display the values as checkboxes instead of the default text representation of **true** or **false**. To enable the rendering of boolean values as checkboxes, you need to set the `DisplayAsCheckBox` property of the `GridColumn` to **true**. @@ -1018,7 +1018,7 @@ To enable the rendering of boolean values as checkboxes, you need to set the `Di ## AutoFit columns -The DataGrid has a feature that allows to automatically adjust column widths based on the maximum content width of each column when you double-click on the resizer symbol located in a specific column header. This feature ensures that all data in the Grid rows is displayed without wrapping. To use this feature, enable the resizer symbol in the column header by setting 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. +The Syncfusion Blazor DataGrid has a feature that allows to automatically adjust column widths based on the maximum content width of each column when you double-click on the resizer symbol located in a specific column header. This feature ensures that all data in the Grid rows is displayed without wrapping. To use this feature, enable the resizer symbol in the column header by setting 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. ### Resizing a column to fit its content using autoFit method @@ -1190,7 +1190,7 @@ public class OrderDetails ### Autofit columns when changing column visibility using column chooser -In Syncfusion DataGrid, you can auto-fit columns when the column visibility is changed using the column chooser. This can be achieved by calling the [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoFitColumnsAsync) method in the [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) event. By using the **RequestType** property in the event arguments, you can differentiate between different actions, and then call the `AutoFitColumnsAsync` method when the request type is **ColumnState**. +In Syncfusion Blazor DataGrid, you can auto-fit columns when the column visibility is changed using the column chooser. This can be achieved by calling the [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AutoFitColumnsAsync) method in the [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) event. By using the **RequestType** property in the event arguments, you can differentiate between different actions, and then call the `AutoFitColumnsAsync` method when the request type is **ColumnState**. Here's an example code snippet in Blazor that demonstrates how to auto fit columns when changing column visibility using column chooser: @@ -1362,7 +1362,7 @@ The Syncfusion Grid control allows you to show or hide columns dynamically by us ### Using property -You can show or hide columns in the Blazor DataGrid using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property of each column. By setting the `Visible` property to **true** or **false**, you can control whether the column should be visible or hidden in the Grid. Here's an example of how to show or hide a column in the Grid using the visible property: +You can show or hide columns in the Syncfusion Blazor DataGrid using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property of each column. By setting the `Visible` property to **true** or **false**, you can control whether the column should be visible or hidden in the Grid. Here's an example of how to show or hide a column in the Grid using the visible property: In the below example, the **ShipCity** column is defined with `Visible` property set to **false**, which will hide the column in the rendered Grid. @@ -1446,11 +1446,11 @@ public class OrderData ### Using methods -You can also show or hide columns in the Blazor DataGrid using the [ShowColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnsAsync_System_String___System_String_) and [HideColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumnsAsync_System_String___System_String_) methods of the Grid. These methods allow you to show or hide columns based on either the `HeaderText` or the `Field` of the column. +You can also show or hide columns in the Syncfusion Blazor DataGrid using the [ShowColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowColumnsAsync_System_String___System_String_) and [HideColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideColumnsAsync_System_String___System_String_) methods of the Grid. These methods allow you to show or hide columns based on either the `HeaderText` or the `Field` of the column. **Based on header text** -You can dynamically show or hide columns in the DataGrid based on the header text by invoking the `ShowColumnsAsync` or `HideColumnsAsync` methods. These methods take an array of column header texts as the first parameter, and the value `HeaderText` as the second parameter to specify that you are showing or hiding columns based on the header text. +You can dynamically show or hide columns in the Grid based on the header text by invoking the `ShowColumnsAsync` or `HideColumnsAsync` methods. These methods take an array of column header texts as the first parameter, and the value `HeaderText` as the second parameter to specify that you are showing or hiding columns based on the header text. Here's an example of how to show or hide a column based on the HeaderText in the a Grid: @@ -1539,7 +1539,7 @@ Here's an example of how to show or hide a column based on the HeaderText in the **Based on field** -You can dynamically show or hide columns in the DataGrid using external buttons based on the field by invoking the `ShowColumnsAsync` or `HideColumnsAsync` methods. These methods take an array of column fields as the first parameter, and the value `Field` as the second parameter to specify that you are showing or hiding columns based on the field. +You can dynamically show or hide columns in the Grid using external buttons based on the field by invoking the `ShowColumnsAsync` or `HideColumnsAsync` methods. These methods take an array of column fields as the first parameter, and the value `Field` as the second parameter to specify that you are showing or hiding columns based on the field. Here's an example of how to show or hide a column based on the field in the Grid: @@ -1721,7 +1721,7 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/hDreNgBwyiwPMKFy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Controlling Grid actions +## Controlling Blazor DataGrid actions You can control various actions such as filtering, grouping, sorting, resizing, reordering, editing, and searching for specific columns in the Syncfusion Blazor DataGrid using the following properties: @@ -1808,17 +1808,17 @@ Here is an example code that demonstrates how to control Grid actions for specif ## Customize column styles -Customizing the Grid column styles allows you to modify the appearance of columns in the DataGrid control to meet your design requirements. You can customize the font, background color, and other styles of the columns. To customize the columns styles in the Grid, you can use Grid event, css, property or method support. +Customizing the Syncfusion Blazor DataGrid column styles allows you to modify the appearance of columns in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the columns. To customize the columns styles in the Grid, you can use Grid event, css, property or method support. For more information check on this [documentation](https://blazor.syncfusion.com/documentation/datagrid/cell#customize-cell-styles). ## Manipulating columns -The Syncfusion DataGrid for Blazor provides powerful features for manipulating columns in a Grid. This section explains how to access columns and add/remove columns using Syncfusion Grid properties, methods, and events. +The Syncfusion Blazor DataGrid for Blazor provides powerful features for manipulating columns in a Grid. This section explains how to access columns and add/remove columns using Syncfusion Grid properties, methods, and events. ### Accessing Columns -To access columns in the Syncfusion DataGrid, you can use the following methods in the Grid. +To access columns in the Syncfusion Blazor DataGrid, you can use the following methods in the Grid. * **[GetColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnsAsync_System_Nullable_System_Boolean__)**: @@ -1979,7 +1979,7 @@ Here's an example of how you can add and remove a column from the Grid: ### How to refresh columns -You can use the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method of the Syncfusion DataGrid to refresh the columns in the Grid. This method can be used when you need to update the Grid columns dynamically based on user actions or data changes. +You can use the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method of the Syncfusion Blazor DataGrid to refresh the columns in the Grid. This method can be used when you need to update the Grid columns dynamically based on user actions or data changes. ```cs this.Grid.RefreshColumnsAsync(); @@ -2063,4 +2063,4 @@ In this example, we have a Grid that displays data with three columns: **Order I * [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) -> You can refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. +> You can refer to the [Syncfusion Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Syncfusion Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. diff --git a/blazor/datagrid/foreignKey-column.md b/blazor/datagrid/foreignKey-column.md index 39f3ef094f..5b0c1ae31e 100644 --- a/blazor/datagrid/foreignKey-column.md +++ b/blazor/datagrid/foreignKey-column.md @@ -21,7 +21,7 @@ Define the foreign key column in the Grid using the following properties: ## Binding local data -The Syncfusion Grid provides a convenient way to bind local data to a foreign key column. This allows you to display related data from a local data source within the Grid. Here’s an example of how to bind local data to a Foreign Key column in Grid: +The Syncfusion Blazor DataGrid provides a convenient way to bind local data to a foreign key column. This allows you to display related data from a local data source within the Grid. Here’s an example of how to bind local data to a Foreign Key column in Grid: In this example, data is the local data source for the Grid, and **Employee Name** is the local data source for the foreign key column. The ForeignKeyValue property is set to **FirstName** which represents the field name in the **Employee Name** that you want to display in the foreign key column. @@ -204,7 +204,7 @@ public class OrderDetails ## Use edit template in foreign key column -The Syncfusion Blazor DataGrid provides support for using an edit template in a foreign key column. By default, a dropdown is used for editing foreign key column. Other editable components can be rendered using the EditTemplate feature of Grid. The following example demonstrates the way of using edit template with ComboBox in the foreign column. +The Syncfusion Blazor DataGrid provides support for using an edit template in a foreign key column. By default, a dropdown is used for editing foreign key column. Other editable components can be rendered using the `EditTemplate` feature of Grid. The following example demonstrates the way of using edit template with `ComboBox` in the foreign column. In the following code example, the Employee Name is a foreign key column. When editing, the `ComboBox` is rendered instead of `DropDownList`: @@ -433,7 +433,7 @@ public class EmployeeDetails ## Use filter bar template in foreign key column -You can use the filter template in a foreign key column in Grid by using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This allows you to customize the filter bar for the foreign key column with a custom component or HTML template. Here’s an example that demonstrates how to use a Filter template in a foreign key column: +You can use the filter template in a foreign key column in Syncfusion Blazor DataGrid by using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This allows you to customize the filter bar for the foreign key column with a custom component or HTML template. Here’s an example that demonstrates how to use a Filter template in a foreign key column: In this example, the **“EmployeeID”** column is a foreign key column. The `FilterTemplate` property is used to render a `DropDownList` as a filter, you can select filter value by using the **DropDown** options. diff --git a/blazor/datagrid/frozen-column.md b/blazor/datagrid/frozen-column.md index 90e60b4ea9..29729d7f47 100644 --- a/blazor/datagrid/frozen-column.md +++ b/blazor/datagrid/frozen-column.md @@ -405,7 +405,7 @@ public class EmployeeDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/VZheNULQpBltUNaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> You can freeze the DataGrid columns either by using the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsFrozen) or [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) properties. +> You can freeze the Grid columns either by using the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsFrozen) or [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) properties. ## Add or remove frozen columns by dragging the column separator @@ -519,4 +519,4 @@ The frozen columns and freeze direction features in Syncfusion Blazor DataGrid h * Using a cell template or text wrap in any one of the panels may cause variable row heights between the panels. The height is recalculated based on the DOM offset height and applied uniformly across all rows to maintain consistency. This can lead to visual glitches. You can resolve this problem by setting static values for the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property in `SfGrid`. * The [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) and [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) properties are incompatible and cannot be used simultaneously. -> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file +> You can refer to our [Syncfusion Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Syncfusion Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file From 269165f8dd671691b471dc3417b3808c47e71d90 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Wed, 4 Jun 2025 12:26:32 +0530 Subject: [PATCH 4/4] updated the md file --- blazor/datagrid/column-resizing.md | 2 +- blazor/datagrid/column-template.md | 2 +- blazor/datagrid/columns.md | 16 ++++++++-------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/blazor/datagrid/column-resizing.md b/blazor/datagrid/column-resizing.md index a805e7dfcc..bcc4f3966d 100644 --- a/blazor/datagrid/column-resizing.md +++ b/blazor/datagrid/column-resizing.md @@ -177,7 +177,7 @@ public class OrderDetails ## Prevent resizing for particular column -The Syncfusion Blaazor DataGrid provides the ability to prevent resizing for a particular column. This can be useful if you want to maintain a consistent column width or prevent users from changing the width of a column. +The Syncfusion Blazor DataGrid provides the ability to prevent resizing for a particular column. This can be useful if you want to maintain a consistent column width or prevent users from changing the width of a column. You can disable resizing for a particular column by setting the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing) property of the column to false. The following example demonstrates, how to disabled resize for Customer ID column. diff --git a/blazor/datagrid/column-template.md b/blazor/datagrid/column-template.md index ef17b090de..1fbacee54a 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -482,7 +482,7 @@ public class EmployeeDetails ### Render ProgressBar in a column -The Syncfusion Blzor DataGrid supports rendering the [Progress Bar](https://blazor.syncfusion.com/documentation/progress-bar/getting-started-webapp) within a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. Displaying the `Progress Bar` in a Grid column allows users to visually track the progress of tasks or operations associated with specific records. This feature is particularly useful for applications involving processes such as data loading, task completion, or other progressive activities. +The Syncfusion Blazor DataGrid supports rendering the [Progress Bar](https://blazor.syncfusion.com/documentation/progress-bar/getting-started-webapp) within a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. Displaying the `Progress Bar` in a Grid column allows users to visually track the progress of tasks or operations associated with specific records. This feature is particularly useful for applications involving processes such as data loading, task completion, or other progressive activities. In the following code, the `Progress Bar` render in the Grid **Freight** column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property: diff --git a/blazor/datagrid/columns.md b/blazor/datagrid/columns.md index 34182b3b30..4a8a074507 100644 --- a/blazor/datagrid/columns.md +++ b/blazor/datagrid/columns.md @@ -126,7 +126,7 @@ Here is an example of how to specify column types in a Grid using the types ment * If you have more than one column with the column type as a **Checkbox**, the Grid will automatically enable the other column’s checkbox when selecting one column checkbox. ->To learn more about how to render boolean values as checkboxes in a Syncfusion GridColumn, please refer to the [Render boolean values as checkbox](https://blazor.syncfusion.com/documentation/datagrid/columns#render-boolean-values-as-checkbox) section. +>To learn more about how to render boolean values as checkboxes in a GridColumn, please refer to the [Render boolean values as checkbox](https://blazor.syncfusion.com/documentation/datagrid/columns#render-boolean-values-as-checkbox) section. ## Column Width @@ -499,7 +499,7 @@ Type="ColumnType.Date" Format="dMM/dd/yyyy hh:mm:ss tt" | 04/07/1996 12:00 AM ### Format the date column based on localization -In Syncfusion Blazor Grid, you can format date columns to match the user’s locale settings by configuring the application’s localization. By setting up the application culture and using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property in Grid columns, you can display dates in a format appropriate for the user’s region. +In Syncfusion Blazor DataGrid, you can format date columns to match the user’s locale settings by configuring the application’s localization. By setting up the application culture and using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property in Grid columns, you can display dates in a format appropriate for the user’s region. **Enabling Localization in a Blazor Application** @@ -523,7 +523,7 @@ To enable localization in your Blazor application: CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("es-AR"); ``` -Once localization is enabled, you can specify a custom date format for each date column in the Syncfusion Blazor Grid by using the `Format` property. This property allows you to define how dates will be displayed, enhancing user experience by ensuring date formats are familiar to the user. +Once localization is enabled, you can specify a custom date format for each date column in the Grid by using the `Format` property. This property allows you to define how dates will be displayed, enhancing user experience by ensuring date formats are familiar to the user. In the example below, the date format is set to **yyyy-MMM-dd** to align with the Spanish culture configured in the application. @@ -717,7 +717,7 @@ public class OrderData ### Custom formatting -Syncfusion Blazor DataGrid allows you to customize the formatting of data in the Grid columns. You can apply custom formats to numeric or date columns to display data in a specific way according to the requirements. To apply custom formatting to Grid columns in Syncfusion Grid, you can use the format property. Here’s an example of how you can use custom formatting for numeric and date columns: +Syncfusion Blazor DataGrid allows you to customize the formatting of data in the Grid columns. You can apply custom formats to numeric or date columns to display data in a specific way according to the requirements. To apply custom formatting to Grid columns in Grid, you can use the format property. Here’s an example of how you can use custom formatting for numeric and date columns: In the below example, the numberFormatOptions object is used as the format property for the ‘Freight’ column to apply a custom numeric format with four decimal places. Similarly, the dateFormatOptions object is used as the format property for the ‘OrderDate’ column to apply a custom date format displaying the date in the format of day-of-the-week, month abbreviation, day, and 2-digit year (e.g. Sun, May 8, 23). @@ -1358,7 +1358,7 @@ public class OrderDetails ## Show or hide columns -The Syncfusion Grid control allows you to show or hide columns dynamically by using property or methods available in the Grid. This feature can be useful when you want to customize the visibility of columns in the Grid based on the requirements. +The Syncfusion Blazor DataGrid allows you to show or hide columns dynamically by using property or methods available in the Grid. This feature can be useful when you want to customize the visibility of columns in the Grid based on the requirements. ### Using property @@ -1808,13 +1808,13 @@ Here is an example code that demonstrates how to control Grid actions for specif ## Customize column styles -Customizing the Syncfusion Blazor DataGrid column styles allows you to modify the appearance of columns in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the columns. To customize the columns styles in the Grid, you can use Grid event, css, property or method support. +Customizing the Syncfusion Blazor DataGrid column styles allows you to modify the appearance of columns in the Grid to meet your design requirements. You can customize the font, background color, and other styles of the columns. To customize the columns styles in the Grid, you can use Grid event, css, property or method support. For more information check on this [documentation](https://blazor.syncfusion.com/documentation/datagrid/cell#customize-cell-styles). ## Manipulating columns -The Syncfusion Blazor DataGrid for Blazor provides powerful features for manipulating columns in a Grid. This section explains how to access columns and add/remove columns using Syncfusion Grid properties, methods, and events. +The Syncfusion Blazor DataGrid for Blazor provides powerful features for manipulating columns in a Grid. This section explains how to access columns and add/remove columns using Grid properties, methods, and events. ### Accessing Columns @@ -1872,7 +1872,7 @@ This method returns an list of field names of all the columns in the Grid. ### Adding/Removing Columns -The Blazor Grid allows you to dynamically add or remove columns to and from the Grid using the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property, which can be accessed through the instance of the Grid. +The Syncfusion Blazor DataGrid allows you to dynamically add or remove columns to and from the Grid using the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property, which can be accessed through the instance of the Grid. To add a new column to the Grid, you can directly **Add** the new column object to the columns property.To remove a column from the Grid, you can use the **RemoveAt** method. This method allows you to remove a specific column from the columns list of the Grid. In the below provided code snippet, the column removed is the last column in the list. If you want to remove a specific list of columns by its index.