diff --git a/blazor/datagrid/column-reorder.md b/blazor/datagrid/column-reorder.md index 33c083d954..bd197a4999 100644 --- a/blazor/datagrid/column-reorder.md +++ b/blazor/datagrid/column-reorder.md @@ -1,7 +1,7 @@ --- layout: post title: Column Reorder in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about column reorder in the Syncfusion Blazor DataGrid component and much more details. +description: Learn how to reorder columns in Syncfusion Blazor DataGrid using methods and events for single, multiple, and interactive reordering. platform: Blazor control: DataGrid documentation: ug @@ -9,11 +9,9 @@ documentation: ug # Column Reorder in Blazor DataGrid -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. +The Syncfusion® Blazor DataGrid allows columns to be reordered by dragging and dropping a column header from one position to another 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. - -Here’s an example for column reordering in your Grid: +To enable column reordering, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowReordering) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **true**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -80,14 +78,16 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/LNrpMrXHLHHVDWpr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * You can disable reordering a particular column by setting the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) as **false**. -> * When columns are reordered, the position of the corresponding column data will also be changed. As a result, you should ensure that any additional code or logic that relies on the order of the column data is updated accordingly. +> * To disable reordering for a specific column, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**. +> * When columns are reordered, the position of the corresponding column data also changes. Ensure that any logic dependent on column order is updated accordingly. ## Prevent reordering for particular 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: +The Syncfusion® Blazor DataGrid allows all columns to be reordered by dragging and dropping their headers. However, certain columns are intended to remain fixed in position. + +To disable reordering for a specific column, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**. -In this example, the **ShipCity** column is prevented from being reordered by setting the `AllowReordering` property to **false**: +In this configuration, reordering is disabled for the **ShipCity** column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -152,22 +152,22 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/rZBJWLjxrwmYsHAA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Reorder columns externally - -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. +## Reorder columns via programmatically -> 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**. +The Syncfusion® Blazor DataGrid allows columns to be reordered programmatically using built-in methods. Columns can be moved based on index or field name, enabling dynamic layout control through external UI elements such as buttons. -### Reorder column based on index +> To reorder columns externally, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowReordering) property of the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **true**. -You can use the [ReorderColumnByIndexAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnByIndexAsync_System_Int32_System_Int32_) method to reorder columns based on their current index. This method takes two arguments: +### Reorder column by index -* **fromIndex** : Current index of the column to be reordered. -* **toIndex** : New index of the column after the reordering. +To reorder columns by their current index, use the [ReorderColumnByIndexAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnByIndexAsync_System_Int32_System_Int32_) method. -Here is an example of how to use the `ReorderColumnByIndexAsync` method: +| Parameter | Type | Description | +|-------------|------|--------------------------------------------------| +| fromIndex | int | Current index of the column to be moved. | +| toIndex | int | Target index where the column should be placed. | -In this example, we are moving the column at index 1 to index 2. +In this configuration, the column at index **1** is moved to index **2**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -243,14 +243,18 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLzChtxLaAoXrZm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Reorder column based on target index +### Reorder column by target index -You can also use the [ReorderColumnByTargetIndexAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnByTargetIndexAsync_System_String_System_Int32_) method to reorder column columns based on the target index. This method takes two arguments: +To reorder a column by its field name and target index, use the [ReorderColumnByTargetIndexAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnByTargetIndexAsync_System_String_System_Int32_) method. -* **FieldName** : Field name of the column to be reordered -* **toIndex** : New index of the column after the reordering -Here is an example of how to use the `ReorderColumnByTargetIndexAsync` method to reorder column based on target index: +| Parameter | Type | Description | +|-------------|--------|--------------------------------------------------| +| FieldName | string | Field name of the column to be moved. | +| toIndex | int | Target index where the column should be placed. | + + +In this configuration, the column with field name **OrderID** is moved to index **3**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -326,18 +330,30 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/VZhpCVZRUILkYtuK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Reorder column based on field names +### Reorder column by field names + +Columns can be reordered programmatically by specifying the field names of the columns to move and the target position. This functionality supports both single-column and multi-column reordering. + +**Reorder a single column** + +The [ReorderColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ReorderColumnAsync_System_String_System_String_) method reorders a single column by specifying its current field name and the target column's field name. + + +| Parameter | Type | Description | +|------------------|----------|--------------------------------------------------------------------------| +| fromFieldName | string | Field name of the column to be moved. | +| toFieldName | string | Field name of the column before which the column should be placed. | + -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. +**Reorder multiple columns** -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. - * **ToFieldName**: The field name of the column you want to move the column to. -2. `ReorderColumnsAsync`: This method reorders multiple columns simultaneously by providing their field names in a list. It takes the following arguments: - * **FromFieldName**: The field name of the column you want to move. - * **ToFieldName** : The field name of the column you want to move the column to. +The [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_) method reorders multiple columns simultaneously by providing a list of field names and the target column's field name. -Here is an example demonstrating how to use the `ReorderColumnAsync` and `ReorderColumnsAsync` method to reorder single and multiple columns based on their field names: + +| Parameter | Type | Description | +|-------------------|-----------------|--------------------------------------------------------------------------| +| fromFieldNames | List<string> | Field names of the columns to be moved. | +| toFieldName | string | Field name of the column before which the group should be placed. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -420,13 +436,38 @@ public class OrderDetails ## Reorder 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: +The Syncfusion® Blazor DataGrid provides events to handle column reordering interactions. These events allow executing custom logic during drag-and-drop operations. + +1. [ColumnReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordering): Triggered while a column header is being dragged. +2. [ColumnReordered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordered): Triggered when a column header is dropped on the target column. + +### ColumnReordering + +The `ColumnReordering` event is triggered while a column header is being dragged during a reordering operation. This event can be used to inspect the column being moved and optionally cancel the reordering based on custom logic. + +**Event Arguments** + +The event uses the [ColumnReorderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnReorderingEventArgs.html) class, which includes the following properties: + +| Event Argument | Type | Description | +|--------------------|------------------------|------------------------------------------------------------------------------| +| ReorderingColumns | List<GridColumn> | Represents the columns being dragged. | +| Cancel | bool | Set to **true** to cancel the reordering operation. | + + +### ColumnReordered + +The `ColumnReordered` event is triggered after a column header is dropped on the target column during a reordering operation. This event allows executing custom logic after the reordering is completed, such as updating UI elements or logging changes. + +**Event Arguments** -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. +The event uses the [ColumnReorderedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnReorderedEventArgs.html) class, which includes the following properties: -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. +| Parameter | Type | Description | +|----------------------|------------------------|-----------------------------------------------------------------------------| +| ReorderingColumns | List<GridColumn> | Represents the columns that were reordered. | +| ToColumn | GridColumn | Destination column where the reordered columns are placed. | -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 5512a8e6a1..0804501749 100644 --- a/blazor/datagrid/column-resizing.md +++ b/blazor/datagrid/column-resizing.md @@ -1,7 +1,7 @@ --- layout: post title: Column Resizing in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about column resizing in the Syncfusion Blazor DataGrid component and much more details. +description: Learn how to resize columns in the Syncfusion Blazor DataGrid, including programmatic resizing, stacked headers, touch support, and events. platform: Blazor control: DataGrid documentation: ug @@ -9,9 +9,11 @@ documentation: ug # Column Resizing in Blazor DataGrid -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. +The Syncfusion® Blazor DataGrid provides an intuitive interface for resizing columns to fit their content. This feature allows columns to be adjusted for improved readability and layout control. -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. +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 [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to **true**. + +Once enabled, column width can be adjusted by clicking and dragging the right edge of the column header. The column resizes immediately during the drag operation. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -86,18 +88,16 @@ 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** to false. -> * In RTL mode, you can click and drag the left edge of the header cell to resize the column. -> * The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) property of the GridColumn 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. -> * When the `Width` property of a GridColumn is explicitly set to **0** and column resizing is enabled, the DataGrid will automatically assign a default width of **200px** to that column. +> * To disable resizing for a specific column, set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**. +> * In RTL mode, column resizing is performed by dragging the left edge of the header cell. +> * The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) property of the `GridColumn` can be set to define the initial column width. When resizing is enabled, this value can be overridden by manual adjustments. +> * If the `Width` property of a `GridColumn` is explicitly set to **0** and resizing is enabled, the DataGrid automatically assigns a default width of **200px** to that column. ## Restrict the resizing based on minimum and maximum width -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. +The Syncfusion® Blazor DataGrid allows restricting column resizing between a defined minimum and maximum width. This ensures that columns remain within a specific size range, maintaining layout consistency and readability. -In the below code, **OrderID**, **Ship Name** and **Ship Country** columns are defined with minimum and maximum width. The **OrderID** column is set to have a minimum width of 100 pixels and a maximum width of 250 pixels. Similarly, the **ShipName** column is set to have a minimum width of 150 pixels and a maximum width of 300 pixels. The **ShipCountry** column is set to have a minimum width of 120 pixels and a maximum width of 280 pixels. +To configure this behavior, set 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 for the respective [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -172,15 +172,17 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJChtRfnLvXiTu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * 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 will be considered only when the user resizes the column. When resizing the window, these properties will not be considered. This is because columns cannot be re-rendered when resizing the window. -> * When setting the `MinWidth` and `MaxWidth` properties, ensure that the values are appropriate for your data and layout requirements. -> * The specified `MinWidth` and `MaxWidth` values take precedence over any user-initiated resizing attempts that fall outside the defined range. +> * The `MinWidth` and `MaxWidth` properties are applied only during column resizing. These constraints are not enforced when resizing the browser window. +> * Ensure that the values assigned to `MinWidth` and `MaxWidth` are suitable for the content and layout requirements. +> * When resizing exceeds the defined range, the column width is automatically restricted to the nearest valid value within the specified limits. ## Prevent resizing for particular 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. +The Syncfusion® Blazor DataGrid provides the ability to restrict resizing for individual columns. This is useful when a column's width must remain fixed for layout consistency or to prevent unintended changes. + +To disable resizing for a specific column, set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) 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 the column to false. The following example demonstrates, how to disabled resize for Customer ID column. +In this configuration, resizing is disabled for the **CustomerID** column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -245,13 +247,15 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/rZhJsBsWiczvQVGx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> You can also prevent resizing by setting `args.Cancel` to **true** in the [OnResizeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnResizeStart) event. +> Resizing can also be prevented dynamically by setting **args.Cancel** to **true** in the [OnResizeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnResizeStart) event. ## Resize stacked header column -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. +The Syncfusion® Blazor DataGrid allows resizing stacked columns by dragging the right edge of the stacked column header. During this action, the widths of the child columns are adjusted simultaneously. -In this below code, we have disabled resize for **Ship City** column. +To disable resizing for a specific stacked column, set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**. + +In this configuration, resizing is disabled for the **ShipCity** column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -329,27 +333,23 @@ public class OrderDetails ## Touch interaction -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. +The Syncfusion® Blazor DataGrid supports touch interactions, enabling column resizing on mobile devices. Columns can be resized by tapping and dragging the floating handler, or adjusted using the column menu options. **Resizing Columns on Touch Devices** -To resize columns on a touch device: - -1.Tap on the right edge of the header cell of the column that you want to resize. +To resize a column: -2.A floating handler will appear over the right border of the column - -3.Tap and drag the floating handler to resize the column to the desired width. - -The following screenshot represents the column resizing in touch device. +1. Tap the right edge of the column header. +2. A floating handler appears over the column’s right border. +3. Tap and drag the handler to adjust the column width. ![Blazor DataGrid column resizing in touch interaction.](./images/blazor-datagrid-column-resizing.jpg) -## Resizing column externally +## Resize columns via programmatically -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 Syncfusion® Blazor DataGrid supports column resizing through external UI interactions such as dropdowns or buttons. This allows dynamic control over column widths without relying on the Grid’s built-in UI handlers. -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. +To resize a column externally, update the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property of the target [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html), and invoke the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method to apply the changes. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -467,13 +467,39 @@ public class OrderDetails ## Resizing events -During the resizing action, the Syncfusion® Blazor DataGrid triggers the below two events. +The Syncfusion® Blazor DataGrid provides events that are triggered during column resizing operations. These events allow execution of custom logic before and after a column is resized, enabling validation, customization, and UI updates or notifications. + +1. [OnResizeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnResizeStart): Triggered when column resizing begins. + +2. [ResizeStopped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ResizeStopped): Triggered when column resizing ends. + +### OnResizeStart + +The `OnResizeStart` event is triggered before a column is resized. This event can be used to inspect or cancel the resizing operation based on custom logic. + +**Event Arguments** + +The event uses the [ResizeArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ResizeArgs.html) class, which includes the following properties: + +| Event Argument | Description | +|----------------|------------------------------------------------------------------------------| +| Column | Represents the column being resized. | +| Cancel | Determines whether the resizing operation should be aborted. Setting this property to **true** prevents the resizing from being applied. | + + +### ResizeStopped + +The `ResizeStopped` event is triggered after a column has been resized. This event provides details about the resized column and can be used to display messages or perform post-resize actions. + +**Event Arguments** -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. +The event uses the [ResizeArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ResizeArgs.html) class, which includes the following properties: -2. The [ResizeStopped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ResizeStopped) event triggers when column resize ends. This event can be used to perform actions after the column is resized. +| Event Argument | Description | +|----------------|------------------------------------------------------------------------------| +| Column | Represents the column that was resized. | +| Cancel | Indicates whether the resize operation was canceled. If **true**, the column was not resized. | -The following is an example of using the resizing events, the [OnResizeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnResizeStart) event is used to cancel the resizing of the **OrderID** column. The [ResizeStopped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ResizeStopped) event is used to display the details in the message of the resized column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -563,4 +589,4 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBTWViiLnOofXge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBTWViiLnOofXge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/frozen-column.md b/blazor/datagrid/frozen-column.md index d7aee8eaf7..7197270275 100644 --- a/blazor/datagrid/frozen-column.md +++ b/blazor/datagrid/frozen-column.md @@ -9,13 +9,35 @@ documentation: ug # Column Pinning (Frozen) in Blazor DataGrid -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. +The Syncfusion® Blazor DataGrid supports freezing columns to keep them visible while scrolling through large datasets. This feature ensures that important fields remain accessible regardless of horizontal scroll position. -To know about frozen columns in Grid, you can check this video. +Column pinning can be configured using either grid-level or column-level settings. + +**Grid-level freezing** + +To freeze columns from the left side of the grid: + +- Set the [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) property in the [SfGrid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) component to a **numeric** value. +- This value determines how many columns from the **left** remain **fixed** during horizontal scrolling. + +**Column-level freezing** + +To freeze specific columns regardless of their position: + +- Set the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsFrozen) property of a [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **true**. +- Use the [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) property to define the freeze direction. The [FreezeDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html) enum supports the following values: + + * [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Left) – Freezes the column to the left side of the grid. + * [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Right) – Freezes the column to the right side of the grid. + * [Fixed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Fixed) – Keeps the column fixed in place regardless of scroll direction. + +These options allow precise control over which columns remain visible during horizontal scrolling. + +A video demonstration is available at: {% youtube "youtube:https://www.youtube.com/watch?v=L2NvKyBomhM"%} -In 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 this configuration, the `FrozenColumns` property is set to **2**, which keeps the first two columns fixed while the remaining columns can be scrolled horizontally. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -130,32 +152,32 @@ 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 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. +> * Frozen columns must remain within the visible viewport of the grid. +> * Column virtualization is supported with frozen columns to improve performance when handling large datasets. +> * Freezing is applicable only to columns currently visible in the grid. +> * Both [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) and [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) properties can be used together in the same grid. ## Change default frozen line color -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. +The Syncfusion® Blazor DataGrid allows customizing the border color of frozen columns using CSS. This includes styling for **left**, **right**, and **fixed** frozen columns to match application design requirements. -To change default frozen line color, use the following class name and apply the border color based on your requirement. +To change the default frozen line color, apply styles using these class selectors: -For left frozen columns: +* **Left frozen columns** ```css .e-grid .e-leftfreeze.e-freezeleftborder { border-right-color: rgb(198, 30, 204); } ``` -For right frozen columns: +* **Right frozen columns** ```css .e-grid .e-rightfreeze.e-freezerightborder { border-left-color: rgb(19, 228, 243); } ``` -For fixed frozen columns, you need to specify both left and right border as mentioned below +* **Fixed frozen columns** ```css .e-grid .e-fixedfreeze.e-freezeleftborder{ @@ -166,7 +188,6 @@ 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: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -274,9 +295,7 @@ The following example demonstrates how to change the default frozen line color u ## Detail template with frozen columns -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 Grid: +The Syncfusion® Blazor DataGrid supports frozen columns in combination with a [DetailTemplate](https://blazor.syncfusion.com/documentation/datagrid/detail-template). The detail template displays additional information for a row when expanded, without affecting the frozen column layout. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -405,15 +424,12 @@ public class EmployeeDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/VZheNULQpBltUNaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> 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. +> * Freeze columns using either 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 -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. - -Here is an example that demonstrates how to enable and use the `AllowFreezeLineMoving` property in the Grid. +The Syncfusion® Blazor DataGrid allows dynamically modifying frozen columns by dragging and dropping the column separator. This interaction enables adjusting which columns remain frozen, providing flexibility to customize the layout directly through the Grid UI. +To enable this behavior, set the [AllowFreezeLineMoving](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFreezeLineMoving) property to **true** in the Grid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -501,7 +517,7 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/hZBTMhthBzKufVpW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> If frozen columns are not specified, the frozen column separator will be displayed at the left and right ends. You can dynamically change the frozen columns by dragging the column separator. +> If no columns are frozen, the frozen column separator appears at the **left** and **right** edges of the Grid. Columns can be dynamically frozen or unfrozen by dragging the separator. ## Limitations of frozen columns and freeze direction @@ -509,14 +525,16 @@ The frozen columns and freeze direction features in 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 +> N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. \ No newline at end of file