Class SfGrid<TValue>

Blazor Grid component displays tabular data and it has in-built support for various data binding, editing, sorting and filtering.

Inheritance

System.Object

SfBaseComponent

SfDataBoundComponent

SfGrid<TValue>

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfDataBoundComponent.DataManager

SfDataBoundComponent.MainParent

SfDataBoundComponent.SetDataManager<T>(Object)

Namespace: Syncfusion.Blazor.Grids

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfGrid<TValue> : SfDataBoundComponent, IGrid, ISfCircularComponent

Type Parameters

Name	Description
TValue	A type which provides schema for the grid component.

Remarks

TValue is inferred from value of DataSource property if it is bounded with IEnumerable. If data is consumed using SfDataManager then TValue must be assigned explicitly.

Constructors

SfGrid()

Declaration

public SfGrid()

Properties

AdaptiveUIMode

Gets or sets the Adaptive mode which used to render Grid component with adaptive UI layout in the specified mode.

Declaration

public AdaptiveMode AdaptiveUIMode { get; set; }

Property Value

Type	Description
AdaptiveMode	One of the AdaptiveMode enumeration that specifies the Adaptive Mode. The default value is Both.

Remarks

The AdaptiveMode property can be set to one of the following values:

• BothRenders adaptive layout for both mobile and desktop devices.
• MobileRenders adaptive layout only for smaller devices.
• DesktopRenders adaptive layout only for desktop devices.

When set to true the Grid is rendered with a full-screen adaptive UI layout for some grid actions, such as filtering, sorting, and CRUD operations.

Aggregates

Gets or sets the list of GridAggregate instances that control the rendering of aggregate rows displayed in the grid content.

Declaration

public List<GridAggregate> Aggregates { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<GridAggregate>	A list of GridAggregate instances.

Remarks

The GridAggregates class provides various properties to customize aggregate operations. You can use the GridAggregate class to configure specific aggregate operations for individual columns in the grid.

AllowExcelExport

Gets or sets a value indicating whether the user is allowed to export the grid to an Excel file.

Declaration

public bool AllowExcelExport { get; set; }

Property Value

Type	Description
System.Boolean	true, User will export the grid to an Excel file. The default value is false

Remarks

To perform excel export, bind OnToolbarClick event and invoke Syncfusion.Blazor.Grids.SfGrid`1.ExcelExport(Syncfusion.Blazor.Grids.ExcelExportProperties) method in its toolbar item click handler.

AllowFiltering

Gets or sets a value indicating whether to display the filter bar for all columns in the Syncfusion Blazor DataGrid.

Declaration

public bool AllowFiltering { get; set; }

Property Value

Type	Description
System.Boolean	true, Filter bar will be displayed for all columns and allows the user to filter grid records with required criteria. The default value is false

Remarks

Filter bar is disabled for template and command column, which means the columns is not having Field property. Filter type can be changed from Filterbar using the Type property. Filter can be disabled for a particular column by using the AllowFiltering property. See FilterType for more details.

AllowFreezeLineMoving

Gets or sets a value that indicates whether the user can move the frozen line by dragging and dropping it in the Syncfusion Blazor DataGrid columns.

Declaration

public bool AllowFreezeLineMoving { get; set; }

Property Value

Type	Description
System.Boolean	true, User can adjust the freeze line. The default value is false.

Remarks

When this property is enabled, the user can adjust the number of frozen columns by dragging and dropping the freeze bar between columns. If frozen columns are not specified, the frozen column separator will be displayed at the left and right edges of the Grid, and the user can dynamically adjust the number of frozen columns by dragging the separator.

AllowGrouping

Gets or sets a value that specifies whether the user can dynamically group or ungroup columns.

Declaration

public bool AllowGrouping { get; set; }

Property Value

Type	Description
System.Boolean	true, The user can group columns by drag and drop columns from the column header to the group drop area. The default value is false

Remarks

To disable grouping for a particular column, set the AllowGrouping property to false for that column. To programmatically group or ungroup columns, use the Syncfusion.Blazor.Grids.SfGrid`1.GroupColumn(System.String) and Syncfusion.Blazor.Grids.SfGrid`1.UngroupColumn(System.String) methods. Grouping can be further customized using the GridGroupSettings component.

AllowMultiSorting

Gets or sets a value that specifies whether to allow the user to sort multiple columns in the grid.

Declaration

public bool AllowMultiSorting { get; set; }

Property Value

Type	Description
System.Boolean	true, the user can do the multi sort by clicking on the column header while holding the Shift or Ctrl key. The default value is true.

Remarks

Note that AllowSorting must be set to true in order to use this property. Sorting can be further configured using the GridSortSettings component.

AllowPaging

Gets or sets a value that indicates whether paging is enabled for the SfGrid<TValue> component.

Declaration

public bool AllowPaging { get; set; }

Property Value

Type	Description
System.Boolean	true, a pager is rendered at the footer of the grid. The pager can be used to handle page navigation in the grid. The default value is false

Remarks

Paging can be further configured using GridPageSettings component.

AllowPdfExport

Gets or sets a value specifies whether the grid allow users to export grid to PDF document.

Declaration

public bool AllowPdfExport { get; set; }

Property Value

Type	Description
System.Boolean	true, The user can export the grid to a PDF document. The default value is false.

Remarks

To perform pdf export, bind the OnToolbarClick event and In the toolbar item click handler, invoke the Syncfusion.Blazor.Grids.SfGrid`1.PdfExport(Syncfusion.Blazor.Grids.PdfExportProperties) method with required export properties. The export properties can be further customized using the PdfExportProperties class.

AllowReordering

Gets or sets a value indicating whether users can reorder the columns in the grid by dragging and dropping them.

Declaration

public bool AllowReordering { get; set; }

Property Value

Type	Description
System.Boolean	true, if the grid columns can be reordered. The default value is false

Remarks

If Grid is rendered with stacked headers, reordering is allowed only at the same level as the column headers.

AllowResizing

Gets or sets a value that indicates whether the user is allowed to resize the columns of the Grid.

Declaration

public bool AllowResizing { get; set; }

Property Value

Type	Description
System.Boolean	true, Grid columns can be resized by dragging the right edge of the column header. The default value is false.

Remarks

Resizing can be disabled for a particular column by setting the AllowResizing property to false. In RTL mode, Grid columns can be resized by clicking and dragging the left edge of the header cell.

AllowRowDragAndDrop

Gets or sets a value that indicates whether to allow the user to drag and drop grid rows.

Declaration

public bool AllowRowDragAndDrop { get; set; }

Property Value

Type	Description
System.Boolean	true, Users can drag and drop grid rows at another or within grid. The default value is false.

Remarks

To drag and drop rows between grids or to another component, you should provide the ID of the target grid or component to the TargetID property. Selection feature must be enabled for row drag and drop within grids. Multiple rows can be selected by clicking and dragging inside the grid. For multiple row selection, the Type property must be set to multiple. For performing row drag and drop action on the data grid, any one of the columns should be defined as a primary key using the IsPrimaryKey property

AllowSelection

Gets or sets a value that indicates whether the Grid records can be selected by clicking on it.

Declaration

public bool AllowSelection { get; set; }

Property Value

Type	Description
System.Boolean	true, The Grid records can be selected by clicking on it. The default value is true.

Remarks

Selection can be further configured using GridSelectionSettings component.

AllowSorting

Gets or sets a value that determines whether the grid records are allowed to sort while clicking on the column header.

Declaration

public bool AllowSorting { get; set; }

Property Value

Type	Description
System.Boolean	true, Grid records can be sorted by clicking on the column header. The default value is false.

Remarks

Columns in the DataGrid are sorted in ascending order when clicked. Clicking on an already sorted column will toggle the sort direction between ascending and descending. To disable sorting for a particular column, set the AllowSorting property to false. Sorting can be further configured using GridSortSettings component.

AllowTextWrap

Gets or sets a value that indicates whether the text content in the column cells wraps to the next line when it exceeds the width of the column.

Declaration

public bool AllowTextWrap { get; set; }

Property Value

Type	Description
System.Boolean	true, If the text content of the column cells will wrap to the next line when it exceeds the width of the column. The default value is false.

Remarks

When a column width is not specified, the text wrapping of columns will automatically adjust based on the width of the DataGrid. To further customize text wrapping for specific columns, use the property.

AutoFit

Gets or sets a value that determines whether the columns should automatically fit based on the given width.

Declaration

public bool AutoFit { get; set; }

Property Value

Type	Description
System.Boolean	true to enforce column width as defined in Width; otherwise, false. The default value is false.

Remarks

If the total width of the columns is less than the width of the Grid, white space will be displayed. If any column width is undefined, it will automatically adjust to fill the grid width, even if AutoFit is enabled.

ClipMode

Gets or sets the clip mode to handle content overflow of the Grid cell.

Declaration

public ClipMode ClipMode { get; set; }

Property Value

Type	Description
ClipMode	One of the ClipMode enumeration that specifies the Clip Mode. The default value is Ellipsis which displays an ellipsis when the content overflows the cell area.

Remarks

The ClipMode property can be set to one of the following values:

• ClipTruncates the cell content when it overflows the cell area.
• EllipsisDisplays an ellipsis when the cell content overflows its area.
• EllipsisWithTooltipDisplays an ellipsis when the cell content overflows its area and displays a tooltip while hovering on the cell.

ColumnChooserSettings

Gets or sets the GridColumnChooserSettings instance that configures the behavior of the column chooser in the grid.

Declaration

public GridColumnChooserSettings ColumnChooserSettings { get; set; }

Property Value

Type	Description
GridColumnChooserSettings	An instance of GridColumnChooserSettings.

Remarks

The GridColumnChooserSettings class provides various properties to customize column chooser operations, such as enabling or disabling the column chooser, specifying the column chooser button's text, and setting the position of the column chooser dialog.

ColumnMenuItems

Gets or sets the column menu items that define both built-in and custom items.

Declaration

public object ColumnMenuItems { get; set; }

Property Value

Type

Description

System.Object

The available built-in items are: AutoFitAllAuto fit the size of all columns. AutoFitAuto fit the current column. GroupGroup by current column. UngroupUngroup by current column. SortAscendingSort the current column in ascending order. SortDescendingSort the current column in descending order. FilterFilter options will show based on FilterSettings property like checkbox filter, excel filter, menu filter.

Remarks

To disable column menu for a particular column by defining the ShowColumnMenu property as false. To customize the default menu items, define the ColumnMenuItems property with the required items.

ColumnQueryMode

Gets or sets the column query mode for retrieving data from the data source.

Declaration

public ColumnQueryModeType ColumnQueryMode { get; set; }

Property Value

Type	Description
ColumnQueryModeType	The default value is All.

Remarks

The available options are:

• AllRetrieves the entire data source.
• SchemaRetrieves data for all the defined columns in the grid from the data source.
• ExcludeHiddenRetrieves data only for visible columns of the grid from the data source.

Columns

Defines the schema of the data source for the grid and allows you to add, customize, and remove columns in the grid.

Declaration

public List<GridColumn> Columns { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<GridColumn>	A list of GridColumn instances that define the columns in the grid.

Remarks

The GridColumn class provides various properties to customize the grid columns, such as setting the column header text, specifying the data field to bind the column to, and formatting the cell values in the column. If the Columns declaration is empty or undefined, the columns are automatically generated from the data source.

ContextMenuItems

Gets or sets a collection of item to be displayed in the context menu when you right-click on a row or cell in the Grid.

Declaration

public object ContextMenuItems { get; set; }

Property Value

Type

Description

System.Object

The context menu items can be both built-in and custom. The available built-in items are: AutoFitAllAutofit the size of all columns width. AutoFitAutofit the current column width. GroupGroup by current column. UngroupUngroup by current column. EditEdit the current record. DeleteDelete the current record. SaveSave the edited record. CancelCancel the edited state. CopyCopy the selected records. PdfExportExport the grid as PDF format. ExcelExportExport the grid as Excel format. CsvExportExport the grid as CSV format. SortAscendingSort the current column in ascending order. SortDescendingSort the current column in descending order. FirstPageGo to the first page. PrevPageGo to the previous page. LastPageGo to the last page. NextPageGo to the next page.

Remarks

You can customize the context menu by providing a template for it using the component. The context menu can also be disabled for specific columns using the property.

CurrentViewData

Gets or sets the current data details displayed in the grid.

Declaration

public IEnumerable<object> CurrentViewData { get; }

Property Value

Type
System.Collections.Generic.IEnumerable<System.Object>

Remarks

This property returns an IEnumerable object that represents the current data displayed in the grid. You can use this property to access or modify the data in the grid.

DataSource

Gets or sets the data source for the grid rows.

Declaration

public IEnumerable<TValue> DataSource { get; set; }

Property Value

Type
System.Collections.Generic.IEnumerable<TValue>

Remarks

Use this property to set the data source for the grid. This property expects an IEnumerable of TValue, where TValue represents the type of the data object. To consume data from a remote service or custom adaptor, use the SfDataManager component.

DataSourceChanged

Gets or sets the event that occurs when the data source changes.

Declaration

public EventCallback<IEnumerable<TValue>> DataSourceChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Collections.Generic.IEnumerable<TValue>>

Remarks

Use this event to handle changes to the data source in the grid.This event is raised when the data source is updated or changed. The event handler receives an IEnumerable of TValue, where TValue represents the type of the data object.

EditSettings

Gets or sets the instance of GridEditSettings that configures the editing behavior of the grid.

Declaration

public GridEditSettings EditSettings { get; set; }

Property Value

Type	Description
GridEditSettings	An instance of GridEditSettings.

Remarks

Customize the editing behavior of grid by GridEditSettings class provides various properties to configure editing operations, such as allowing or disallowing editing for specific columns, enabling inline or dialog editing, and setting validation rules for edited data.

EnableAdaptiveUI

Gets or sets a value that indicates whether the Grid is rendered with a full-screen adaptive UI layout for some grid actions, such as filtering, sorting, and CRUD operations.

Declaration

public bool EnableAdaptiveUI { get; set; }

Property Value

Type	Description
System.Boolean	true, The grid is render adaptive dialogs such that they will fit the full screen to provide a better user experience on smaller screen devices. The default value is false.

Remarks

For rendering the adaptive UI layout in grid only for mobile devices then need to set the AdaptiveUIMode property value as "Mobile". Also to view the the rows vertically with headers positioned in the same row instead of at the top then need to set the RowRenderingMode property value as "Vertical".

EnableAltRow

Gets or sets a value indicating whether the grid will render with alternative row styling for improved readability.

Declaration

public bool EnableAltRow { get; set; }

Property Value

Type	Description
System.Boolean	false the grid rows are rendered without any alternative row styling. The default value is true.

Remarks

When set to true, the grid will apply the e-altrow CSS class to alternative tr element of grid rows. This can be useful for styling alternating rows differently for improved readability. The alternative row styling is customized by simply overriding the e-altrow class in application end.

EnableAutoFill

Gets or sets a value indicating whether the AutoFill feature is enabled, which allows copying and pasting data from selected cells to other cells by dragging the AutoFill icon.

Declaration

public bool EnableAutoFill { get; set; }

Property Value

Type	Description
System.Boolean	true, The auto fill icon will be displayed on cell selection for copying and pasting the data to other cells while dragging the icon. The default value is false.

Remarks

To use the AutoFill feature, the Mode property must be set to "Cell", the CellSelectionMode property must be set to "Box", and Mode property must be set as "Batch".

EnableColumnVirtualization

Gets or sets a value indicating whether the Grid will render with the columns which are visible within the view-port and load the subsequent columns on horizontal scrolling.

Declaration

public bool EnableColumnVirtualization { get; set; }

Property Value

Type	Description
System.Boolean	true, It helps to load large amount of columns in Grid by rendering only the columns that are visible within the view-port and loading subsequent columns on horizontal scrolling. The default value is false.

Remarks

Width is required for column virtualization. If Width is not defined for any of the column then by default 200px is considered for that column. The collapsed or expanded state will persist only for local dataSource while scrolling.

EnableHeaderFocus

Gets or sets a value indicating whether the first visible header cell will be focused when focus moves to the grid.

Declaration

public bool EnableHeaderFocus { get; set; }

Property Value

Type	Description
System.Boolean	true, The header element will be focused when focus moves to grid. The default value is false.

Remarks

This property is marked as deprecated, since the first visible header cell will get focused by default.

EnableHover

Gets or sets a value indicating whether the hovering effect is enabled while hover on the grid rows.

Declaration

public bool EnableHover { get; set; }

Property Value

Type	Description
System.Boolean	false, the rows are not highlighted while hover on the grid rows. The default value is true.

Remarks

When it is set to true, the CSS class "e-hover" will be applied to the row when it is hovered over. This can be used to style the row differently and provide visual feedback to the user. The row hovering style is customized by simply overriding the "e-hover" class in the application end.

EnableInfiniteScrolling

Gets or sets a value indicating whether the Grid loads the next set of data's on-demand, when the vertical scrollbar reaches the end of the scroller. This feature enables loading large datasets into the Grid without the need of traditional pagination.

Declaration

public bool EnableInfiniteScrolling { get; set; }

Property Value

Type	Description
System.Boolean	Set true to enable infinite scroll by loading data when vertical scroll bar reaches the end of scrollbar. The default value is false.

Remarks

During the initial rendering, the grid loads a block of data based on the InitialBlocks property. The default value of InitialBlocks is 3. After that the buffering data's are loaded based on the page size or rows which are rendered within the provided height. Subsequently, as the user scrolls to the end of the grid, additional blocks of data will be loaded in on-demand. In the default Infinite Scrolling mode, a block of data accumulates every time the scrollbar reaches the end. However, in the cache mode, blocks of data are rendered based on the MaximumBlocks setting. If the number of blocks exceeds this limit during scrolling, the Grid removes rows from the DOM to accommodate the new block of data. EnableCache and MaximumBlocks can be configured through the properties of the GridInfiniteScrollSettings class.

EnablePersistence

Gets or sets a value indicates whether enables or disables the persistence of component's state while page reloads.

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	true, The grid state such as column order, column width, sort information etc. is stored in the window.localStorage when the component is disposed. The default value is false.

Remarks

If the ID property is set for the Grid, then the state will be persisted based on this ID. Otherwise, it will use a default ID. Users can also store grid state in a database instead of the browser's local storage by using the Syncfusion.Blazor.Grids.SfGrid`1.GetPersistData method.

EnableRtl

Gets or sets a value indicating whether to render the component in right to left (RTL) direction.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true, the component should rendered in RTL direction. The default value is false.

Remarks

When the true value is set, the component content will be aligned to the right of the page and the sorting, filtering, and paging icons will be rendered in the right-to-left (RTL) direction.

EnableStickyHeader

Gets or sets a value that indicates whether the grid header should remain fixed while scrolling the grid content vertically.

Declaration

public bool EnableStickyHeader { get; set; }

Property Value

Type	Description
System.Boolean	true to make the column headers sticky while scrolling the grid content vertically. The default value is false.

Remarks

It is suitable only for single headers.

EnableVirtualization

Gets or sets a value indicating whether virtualization is enabled in the DataGrid which means loads the data in on-demand basis while scrolling the grid vertically.

Declaration

public bool EnableVirtualization { get; set; }

Property Value

Type	Description
System.Boolean	true to enable virtualization in the DataGrid. The default value is false.

Remarks

When set to true, virtualization is enabled, and the DataGrid will load only the rows that are currently visible in the viewport, which can significantly improve the performance and responsiveness of the DataGrid when dealing with large datasets. Subsequent rows will be loaded dynamically as the user scrolls vertically through the DataGrid.

EnableVirtualMaskRow

Gets or sets a value indicating whether to show the masked row or placeholder until the data's are loaded in the grid during virtualization.

Declaration

public bool EnableVirtualMaskRow { get; set; }

Property Value

Type	Description
System.Boolean	true the DataGrid will display a masked row when the data is not readily available to show in the grid. The default value is false.

Remarks

It is must to set EnableVirtualization or EnableColumnVirtualization property value as true to use this mask row feature. The Virtual mask row is supported for column virtualization too.

FilterSettings

Gets or sets instance of GridFilterSettings which configures the filtering behavior of grid.

Declaration

public GridFilterSettings FilterSettings { get; set; }

Property Value

Type	Description
GridFilterSettings	An instance of GridFilterSettings.

Remarks

GridFilterSettings class provides various properties to customize filtering operations.

ForceUpdate

Gets or sets a value indicating whether to force the immediate re-rendering of the grid component.

Declaration

public bool ForceUpdate { get; set; }

Property Value

Type	Description
System.Boolean	true to force the grid component to re-render immediately. The default value is false.

FrozenColumns

Gets or sets the number of columns to be frozen in the DataGrid.

Declaration

public int FrozenColumns { get; set; }

Property Value

Type	Description
System.Int32	The number of columns that need to be frozen in the DataGrid. The default value is 0.

Remarks

Use this property to freeze a specific number of columns in the DataGrid, so that they remain fixed on the left side of the grid when the user scrolls horizontally through the grid. Note that the frozen columns must be within the view port of the DataGrid in order to be visible. For example, to freeze the first two columns of the grid, you can set the FrozenColumns property to 2. To freeze a specific column, set its IsFrozen property to true and also use the property to set the direction of frozen columns.

FrozenRows

Gets or sets the number of rows need to be frozen in the DataGrid.

Declaration

public int FrozenRows { get; set; }

Property Value

Type	Description
System.Int32	The number of rows that needs to be frozen DataGrid. The default value is 0.

Remarks

The frozen rows will always be displayed at the top of the grid content, and will not move when the user scrolls vertically. Note that the frozen rows must be within the view port of the DataGrid. For example, to freeze the first two rows of the grid, you can set the FrozenRows property to 2.

GridEvents

Gets or sets the grid events that are triggered on various actions in the grid.

Declaration

public GridEvents<TValue> GridEvents { get; set; }

Property Value

Type
GridEvents<TValue>

Remarks

The events can be used to customize the grid's behavior, perform custom actions on data, and handle user interactions with the grid.

GridLines

Gets or sets the visibility of border lines of rows and columns in the grid.

Declaration

public GridLine GridLines { get; set; }

Property Value

Type	Description
GridLine	The default value is Default.

Remarks

The available modes are,

• BothDisplays both the horizontal and vertical grid lines.
• NoneNo grid lines are displayed.
• HorizontalDisplays the horizontal grid lines only.
• VerticalDisplays the vertical grid lines only.
• DefaultDisplays DataGrid lines based on the theme.

GroupSettings

Gets or sets instance of GridGroupSettings which configures the grouping behavior of grid.

Declaration

public GridGroupSettings GroupSettings { get; set; }

Property Value

Type	Description
GridGroupSettings	An instance of GridGroupSettings.

Remarks

GridGroupSettings class provides various properties to customize grouping operations.

Height

Gets or sets the scrollable height of the grid content.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	The default value is "auto".

Remarks

You can assign the height using pixel and percentage values such as 100px, 100%, etc. If the height is set to "auto", the grid height will be automatically adjusted based on the number of rows displayed.

HierarchyPrintMode

Gets or sets the hierarchy grid print mode, which defines how the grid and child grids are printed based on this specific mode.

Declaration

public HierarchyGridPrintMode HierarchyPrintMode { get; set; }

Property Value

Type	Description
HierarchyGridPrintMode	The default value is Expanded.

Remarks

The available modes are:

• ExpandedPrints the master grid with expanded child grids.
• AllPrints the master grid with all the child grids.
• NonePrints the master grid alone without any child grids.

ID

Gets or sets the unique ID of the grid element.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	Accepts the string value.

InfiniteScrollSettings

Gets or sets an instance of GridInfiniteScrollSettings which configures the infinite scrolling behavior of the grid.

Declaration

public GridInfiniteScrollSettings InfiniteScrollSettings { get; set; }

Property Value

Type	Description
GridInfiniteScrollSettings	An instance of GridInfiniteScrollSettings.

Remarks

The GridInfiniteScrollSettings class provides various properties to customize the infinite scrolling operation of the grid.

IsEdit

Gets or sets a value indicating whether the grid is currently in edit mode.

Declaration

public bool IsEdit { get; set; }

Property Value

Type	Description
System.Boolean	true if a row is being edited in the grid.The default value is false.

KeySettings

Gets or sets instance of GridKeySettings which configures the cell movement keys in the grid.

Declaration

public GridKeySettings KeySettings { get; set; }

Property Value

Type	Description
GridKeySettings	An instance of GridKeySettings.

Remarks

GridKeySettings class provides various properties to customize key operations.

OverscanCount

Gets or sets the number of additional items to be render in the DOM before and after the visible items (based on PageSize) during virtual scrolling and initial rendering.

Declaration

public int OverscanCount { get; set; }

Property Value

Type	Description
System.Int32	The number of additional items to pre-render before and after the visible items (based on PageSize). The default value is 0, indicating no overscan.

Remarks

Adjusting this property can enhance scrolling performance and optimize rendering, especially for large datasets in a virtualized grid. By pre-rendering a buffer of extra items that are not yet visible, the component minimizes the need for frequent re-rendering while scrolling. This optimization results in a smoother and more responsive user experience. If the PageSize is not explicitly provided, it will be calculated based on the viewport height to ensure an optimal user experience.

PageSettings

Gets or sets instance of GridPageSettings which configures the pager behavior of grid.

Declaration

public GridPageSettings PageSettings { get; set; }

Property Value

Type	Description
GridPageSettings	An instance of the GridPageSettings class.

Remarks

The GridPageSettings class provides various properties to customize paging operations, such as the number of pages, page size, and current page number.

PrintMode

Gets or sets the hierarchy grid print mode, which defines how the grid and child grids are printed.

Declaration

public PrintMode PrintMode { get; set; }

Property Value

Type	Description
PrintMode	The default value is Expanded.

Remarks

The available modes are:

• Expanded: Prints the master grid with expanded child grids.
• All: Prints the master grid with all the child grids.
• None: Prints the master grid alone without any child grids.

Query

Gets or sets the external query that will be executed along with data processing.

Declaration

public Query Query { get; set; }

Property Value

Type	Description
Query	An instance of Query class that represents the query parameters that will be sent to the server. The default value is null.

Remarks

This property can be used to add additional parameters to the data request by using the AddParams(String, Object) method.

RowDropSettings

Gets or sets instance of GridRowDropSettings which configures the row drop behavior of grid.

Declaration

public GridRowDropSettings RowDropSettings { get; set; }

Property Value

Type	Description
GridRowDropSettings	An instance of GridRowDropSettings.

Remarks

GridRowDropSettings class provides various properties to customize row drop operations.

RowHeight

Gets or sets the height of grid rows.

Declaration

public double RowHeight { get; set; }

Property Value

Type	Description
System.Double	The default value is differ based on the theme.

Remarks

The row height can be specified in pixels or as a percentage of the Grid's overall height. For example, to set the row height to 50 pixels, you can set RowHeight property to 50. To set the row height to 10% of the Grid's overall height, you can set RowHeight property to "10%".

RowRenderingMode

Gets or sets the row rendering mode in the grid.

Declaration

public RowDirection RowRenderingMode { get; set; }

Property Value

Type	Description
RowDirection	The default value is Horizontal.

Remarks

The available modes are:

• HorizontalDisplays the data rows in horizontal direction.
• VerticalDisplays the data rows in vertical direction.

The RowRenderingMode property is rendered on the adaptive layout based on the AdaptiveUIMode property. Setting this property value as "Vertical" rows are rendered vertically with headers in the same row which suits better to view grid in small screens. In vertical row rendering mode, limited features are supported like filtering, sorting, dialog editing, selection, searching and row virtualization.

SearchSettings

Gets or sets instance of GridSearchSettings which configures the search behavior of grid.

Declaration

public GridSearchSettings SearchSettings { get; set; }

Property Value

Type	Description
GridSearchSettings	An instance of GridSearchSettings.

Remarks

GridSearchSettings class provides various properties to customize searching operations.

SelectedRecords

Gets the selected records of the grid.

Declaration

public List<TValue> SelectedRecords { get; }

Property Value

Type
System.Collections.Generic.List<TValue>

Remarks

If the selection persistence feature is enabled through the PersistSelection property, this property returns the selected records across all pages. Otherwise, it only returns the selected records in the current page. PersistSelection

SelectedRowIndex

Gets or sets the index of the row that is selected initially while rendering the grid component.

Declaration

public int SelectedRowIndex { get; set; }

Property Value

Type	Description
System.Int32	The default value is -1. Initially, no rows are selected in the data grid.

Remarks

This property allows you to select a row at initial rendering. It can also be used to programmatically select a row. You can select a row initially by setting the value of this property to the index of the row to be selected.

SelectedRowIndexes

Gets the indexes of the currently selected rows in the Grid.

Declaration

public List<int> SelectedRowIndexes { get; }

Property Value

Type
System.Collections.Generic.List<System.Int32>

Remarks

When one or more rows are selected in the Grid, the corresponding row index values are added to this list. You can use this property to programmatically access the index values of the currently selected rows in the Grid.

SelectionSettings

Gets or sets instance of GridSelectionSettings which configures the selection behavior of the grid.

Declaration

public GridSelectionSettings SelectionSettings { get; set; }

Property Value

Type	Description
GridSelectionSettings	An instance of GridSelectionSettings.

Remarks

The GridSelectionSettings class provides various properties to customize the selection operations of the grid, such as mode, type, persistSelection, and more.

ShouldRenderHiddenColumns

Gets or sets a value indicating whether to render the cell elements of hidden columns in the DOM.

Declaration

public bool ShouldRenderHiddenColumns { get; set; }

Property Value

Type	Description
System.Boolean	true to render the hidden column elements in the DOM; false to prevent their rendering. The default value is true.

Remarks

By default, hidden columns are rendered in the DOM and hidden using CSS.
Setting this property to false removes the corresponding elements from the DOM,
improving performance when handling a large number of hidden columns.

ShowColumnChooser

Gets or sets a value indicating whether to enable the column chooser feature to dynamically show or hide the grid columns.

Declaration

public bool ShowColumnChooser { get; set; }

Property Value

Type	Description
System.Boolean	true, allows users to show or hide columns dynamically by using the column chooser feature. The default value is false.

Remarks

You can hide the column names in column chooser by defining the ShowInColumnChooser property as false.

ShowColumnMenu

Gets or sets a value indicating whether to enable the column menu options in each columns.

Declaration

public bool ShowColumnMenu { get; set; }

Property Value

Type	Description
System.Boolean	true, then it will enable the column menu options in each columns. The default value is false.

Remarks

To disable column menu for a particular column by defining the ShowColumnMenu property as false.

SortSettings

Gets or sets instance of GridSortSettings which configures the sorting behavior of grid.

Declaration

public GridSortSettings SortSettings { get; set; }

Property Value

Type	Description
GridSortSettings	An instance of GridSortSettings.

Remarks

GridSortSettings class provides various properties to customize sort operations.

TextWrapSettings

Gets or sets instance of GridTextWrapSettings which configures the text wrap behavior of grid.

Declaration

public GridTextWrapSettings TextWrapSettings { get; set; }

Property Value

Type	Description
GridTextWrapSettings	An instance of GridTextWrapSettings.

Remarks

GridTextWrapSettings class provides various properties to customize text wrap operations.

Toolbar

Gets or sets the ToolBar items of the Grid.

Declaration

public object Toolbar { get; set; }

Property Value

Type

Description

System.Object

The available built-in items are: AddAdds a new record. AddAdds a new record. EditEdits the selected record. UpdateUpdates the edited record. DeleteDeletes the selected record. CancelCancels the edit state. SearchSearches the records by the given key. PrintPrints the datagrid. ExcelExportExports the datagrid to Excel file format. PdfExportExports the datagrid to PDF file format. CsvExportExports the datagrid to CSV file format.

Remarks

In some cases, you may want to use a custom toolbar instead of the default one. In such cases, you can use the ToolbarTemplate property to provide a custom toolbar template

TotalItemCount

Gets or sets the total number of records in the Grid's data source.

Declaration

public int TotalItemCount { get; set; }

Property Value

Type
System.Int32

UnMatchedAttributes

Gets or sets the unmatched attributes for the Grid component.

Declaration

public IDictionary<string, object> UnMatchedAttributes { get; set; }

Property Value

Type
System.Collections.Generic.IDictionary<System.String, System.Object>

Remarks

The UnMatchedAttributes property can be used to specify custom attributes, styles, and classes for the Grid component that are not explicitly defined as properties in the component.

Width

Gets or sets the width of the Grid.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	The default value is "auto".

Remarks

The Width property can be assigned with pixel and percentage values such as 100px, 100% etc. When the total column width exceeds the specified value, a horizontal scrollbar will be displayed to allow the user to scroll through the data.

Methods

AddRecordAsync()

A new row with input fields is rendered in grid content, for user to fill the fields and then to save the new record.

Declaration

public Task AddRecordAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method opens a form with input fields to add a new record to the grid. The new record will only be added if AllowAdding is set to true.

Examples

<button id="AddRecord" @onclick="AddRecord">AddItem</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task AddRecord()
   {
     await grid.AddRecordAsync();
   }
}

AddRecordAsync(TValue, Nullable<Int32>)

Adds a new record to the Grid at a specific row index.

Declaration

public Task AddRecordAsync(TValue data, Nullable<int> index = null)

Parameters

Type	Name	Description
TValue	data	New record to be added. The data should be of the same type as the generic type of the grid.
System.Nullable<System.Int32>	index	The index in which the new record is to be added. If no index is provided, the record will be added to the end of the grid.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method adds the row only if AllowAdding is set to true.

Examples

<button id="AddRecord" @onclick="AddItem">AddRecord</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task AddItem()
   {
       var data = new Order() { OrderID = 1000, CustomerID = "ALFKI", OrderDate = new DateTime(1995, 03, 25), Freight = 25.7 * 2) };
       await grid.AddRecordAsync(data, 1); // pass data and index here.
   }
}

ApplyBatchChangesAsync(BatchChanges<TValue>)

Updates the Grid component UI with a batch of changes, including new records, edited records, and deleted records.

Declaration

public Task ApplyBatchChangesAsync(BatchChanges<TValue> batchChanges)

Parameters

Type	Name	Description
BatchChanges<TValue>	batchChanges	It contains the collection of records to add, edit, and delete.

Returns

Type	Description
System.Threading.Tasks.Task	A task representing the asynchronous operation. The task result can indicate the success or failure of the batch update operation.

Remarks

This method is used to make bulk changes to the grid UI when in EditMode.Batch. The edited and newly added records will be visually highlighted in the grid UI, and the highlighting will be cleared once the changes are saved or canceled.

Examples

<button id="GetData" @onclick="SetData">Apply Batch Changes</button>
<SfGrid @ref="grid" DataSource="@Orders">
 <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings>
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task SetData()
   {
     var batchChanges = new BatchChanges<Order>()
       {
           AddedRecords = new List<Order>() { new Order() { OrderID = 1, CustomerID = "ANTAR" } }, DeletedRecords = new List<Order>() { new Order() { OrderID = 1002 } }, ChangedRecords = new List<Order>() { new Order() { OrderID = 1001, CustomerID = "VINET" } } 
       }
      await grid.ApplyBatchChangesAsync(batchChanges);
   }
}

AutoFitColumnAsync(String)

Automatically adjusts the width of a specified column to fit its content, without wrapping. Hidden columns are ignored.

Declaration

public Task AutoFitColumnAsync(string fieldName)

Parameters

Type	Name	Description
System.String	fieldName	The name of the column to be auto fitted, identified by its Field property.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

You can use this method in the DataBound event or set the AutoFit property to autofit the columns at initial rendering.

Examples

<button id="AutoFitColumn" @onclick="AutoFitColumn">AutoFitColumn</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task AutoFitColumn()
   {
      string columnField = "OrderID";
      await grid.AutoFitColumnAsync(columnField);
   }
}

AutoFitColumnsAsync()

Changes the column width to automatically fit its content and ensure that the content is not wrapped or hidden. This method will ignore any hidden columns.

Declaration

public Task AutoFitColumnsAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

You can use this method in the DataBound event or set the AutoFit property to autofit the columns at initial rendering.

Examples

<button id="AutoFit" @onclick="AutoFit">AutoFit Column</button>
<SfGrid @ref="Grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> Grid;
   private async Task AutoFit()
   {
      await grid.AutoFitColumnsAsync();
   }
}

AutoFitColumnsAsync(String[])

Automatically adjusts the width of specified columns to fit their content, without wrapping or hiding.

Declaration

public Task AutoFitColumnsAsync(string[] fieldNames)

Parameters

Type	Name	Description
System.String[]	fieldNames	An array of columns to be auto fitted, identified by their Field property.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous operation.

Remarks

Hidden columns are ignored for this autofit process. You can use this method in the DataBound event or set the AutoFit property to autofit the columns at initial rendering. If EnablePersistence is true, the current autofit state of the columns will be persisted across page refreshes.

Examples

<button id="AutoFit" @onclick="AutoFit">AutoFit Column</button>
<SfGrid @ref="Grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> Grid;
   private async Task AutoFit()
   {
      string[] Columns = { "OrderID", "CustomerID", "Freight" };
      await grid.AutoFitColumnsAsync(Columns);
   }
}

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

ClearCellSelectionAsync()

Clears the selection of all currently selected cells in the grid.

Declaration

public Task ClearCellSelectionAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method does not clear the selection if Mode is set as Row.

Examples

<button id="ClearCell" @onclick="ClearCell">Clear</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ClearCell()
   {
      await grid.ClearCellSelectionAsync();
   }
}

ClearFilteringAsync()

Clears all the columns filtering and refreshes the Grid asynchronously.

Declaration

public Task ClearFilteringAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous clear operation.

Remarks

This method clears the filtering and refreshes the Grid to show the rows. This method will clears filtering for all the columns.

Examples

<button id="ClearRecord" @onclick="ClearFilter">Clear</button>
<SfGrid @ref="grid" DataSource="@Orders" AllowFiltering="true">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ClearFilter()
   {
      await grid.ClearFilteringAsync();
   }
}

ClearFilteringAsync(List<String>)

Clears the filtering for the specificed columns and refreshes the Grid asynchronously.

Declaration

public Task ClearFilteringAsync(List<string> fieldNames)

Parameters

Type	Name	Description
System.Collections.Generic.List<System.String>	fieldNames	A list of columns to be cleared, identified by their Field property.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method clears the filtering for the specified columns and refreshes the Grid.

Examples

<button id="ClearRecord" @onclick="ClearFilter">Clear</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   List<string> listItems = new List<string>();
   private async Task ClearFilter()
   {
      listItems.Add("OrderID");
      listItems.Add("CustomerID");
      await grid.ClearFilteringAsync(listItems);
   }
}

ClearFilteringAsync(String)

Clears specific column filtering of the Grid based on the specified field name.

Declaration

public Task ClearFilteringAsync(string fieldName)

Parameters

Type	Name	Description
System.String	fieldName	The name of the column by which the filtering should be cleared, identified by its Field property.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method clears the filtering for the specified column and refreshes the Grid to show all rows.

Examples

<button id="ClearRecord" @onclick="ClearFilter">Clear</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ClearFilter()
   {
      string columnField = "OrderID";
      await grid.ClearFilteringAsync(columnField);
   }
}

ClearGroupingAsync()

Clears all the grouped columns of the Grid, returning it to its original un-grouped state.

Declaration

public Task ClearGroupingAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Examples

<button id="ClearGrouping" @onclick="ClearGrouping">ClearGrouping</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ClearGrouping()
   {
      await grid.ClearGroupingAsync();
   }
}

ClearRowSelectionAsync()

Clears all the currently selected rows in the grid.

Declaration

public Task ClearRowSelectionAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

Its removes selection from all the pages too if checkbox selection is enabled.

Examples

<button id="ClearSelection" @onclick="ClearSelection">ClearSelection</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ClearSelection()
   {
      await grid.ClearRowSelectionAsync();
   }
}

ClearSelectionAsync()

Clears all the selected rows and cells in the Grid.

Declaration

public Task ClearSelectionAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method first checks the Mode. If the Grid is in Row, it calls the Syncfusion.Blazor.Grids.SfGrid`1.ClearRowSelection otherwise, it calls the Syncfusion.Blazor.Grids.SfGrid`1.ClearCellSelection to clear the selection.

Examples

<button id="ClearSelection" @onclick="ClearSelection">ClearSelection</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ClearSelection()
   {
      await grid.ClearSelectionAsync();
   }
}

ClearSortingAsync()

Clears all the sorted columns of the Grid.

Declaration

public Task ClearSortingAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method is used to clear all the sorted columns in the Grid. The sorting of grouped columns is not cleared.

Examples

<button id="ClearSorting" @onclick="ClearSorting">Clear Sorting</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ClearSorting()
   {
     await grid.ClearSortingAsync();
   }
}

ClearSortingAsync(List<String>)

Clears the sorted columns of the Grid based on the specified field names.

Declaration

public Task ClearSortingAsync(List<string> fieldNames)

Parameters

Type	Name	Description
System.Collections.Generic.List<System.String>	fieldNames	The list of sorted columns to be cleared, identified by their Field property.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method removes the specified columns from the sorted columns of the grid. If a column is not in the list of sorted columns, it is ignored.

Examples

<button id="ClearSorting" @onclick="ClearSorting">Clear Sorting</button>
<SfGrid @ref="grid" AllowSorting="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   List<string> listItems = new List<string>();
   private async Task ClearSorting()
   {
      listItems.Add("OrderID");
      listItems.Add("CustomerID");
      await grid.ClearSortingAsync(listItems);
   }
}

CloseEditAsync()

Cancels the edited state of the grid.

Declaration

public Task CloseEditAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method cancels the current edit state of the grid and closes the EditMode. If EditMode.Batch is used and the user has made BatchChanges<T> to the data, it will display a confirmation dialog before saving the changes. Any unsaved changes will be discarded.

Examples

<button id="ClearEdit" @onclick="ClearEdit">Clear Edit State</button>
<SfGrid @ref="grid" DataSource="@Orders">
<GridEditSettings AllowEditing="true"></GridEditSettings>
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ClearEdit()
   {
      await grid.CloseEditAsync();
   }
}

CollapseAllDetailRowAsync()

Collapses all the detail rows of the Grid including those are currently expanded.

Declaration

public Task CollapseAllDetailRowAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Taskrepresenting the asynchronous collapse operation.

Examples

<button id="Collapse" @onclick="Collapse">CollapseAll</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task Collapse()
   {
       await grid.CollapseAllDetailRowAsync();
   }
}

CollapseAllGroupAsync()

Collapses all the currently expanded grouped rows in the Grid.

Declaration

public Task CollapseAllGroupAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method will only Collapse all the grouped rows if AllowGrouping is set to true. If the EnableLazyLoading property is true, this method collapses all groups and refreshes the grid data. If the EnableVirtualization property is true, this method sets the VirtualScrollModule.GeneratedGroupedRows property to an empty list and call the DataProcess method. If the AllowPaging property is true, this method resets the current page to the first page using the Syncfusion.Blazor.Grids.GridPageSettings.UpdateProperties(System.String,System.Object) and call the DataProcess method. If the EnableLazyLoading property is false, this method collapses all groups by setting their visibility to false and setting their IsExpand property to false.

Examples

<button id="Collapse" @onclick="CollapseGroup">CollapseGroup</button>
<SfGrid @ref="grid" DataSource="@Orders" AllowGrouping="true">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task CollapseGroup()
   {
     await grid.CollapseAllGroupAsync();
   }
}

CopyAsync(Nullable<Boolean>)

Copies the selected rows or cells data into the clipboard.

Declaration

public Task CopyAsync(Nullable<bool> withHeader = null)

Parameters

Type	Name	Description
System.Nullable<System.Boolean>	withHeader	A nullable Boolean value that determines whether to copy the data along with the column header names. The default value is null.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method is used to copy the selected data in the grid to the clipboard. The data can either include the column header names or not, depending on the value of the withHeader parameter.

Examples

<button id="copy" @onclick="Copy">Copy</button>
<button id="copyWithHeader" @onclick="CopyWithHeader">Copy With Header</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task Copy()
   {
        await grid.Copy();  // Copies the selected rows or cells
   }
   private async Task CopyWithHeader()
   {
        await grid.Copy(true); // Copies the selected rows or cells with header
   }
}

DeleteRecordAsync()

Deletes the currently selected record from the grid.

Declaration

public Task DeleteRecordAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method will only delete a record if AllowDeleting is set to true. If no records are selected, it will display an alert message with key DeleteAlert. If ShowDeleteConfirmDialog is set to true, it will display a confirm dialog before deleting the record with key DeleteConfirmAlert.

Examples

<button id="DeleteRecords" @onclick="DeleteRecords">DeleteRecords</button>
<SfGrid @ref="grid" DataSource="@Orders">
<GridEditSettings AllowDeleting="true"></GridEditSettings>
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task DeleteRecords()
   {
      await grid.DeleteRecordAsync();
   }
}

DeleteRecordAsync(String, TValue)

Deletes a record in the grid by providing a column name and data.

Declaration

public Task DeleteRecordAsync(string fieldName, TValue data)

Parameters

Type	Name	Description
System.String	fieldName	The primary key column name of the record to be deleted, identified by its Field property.
TValue	data	The data of the record to be deleted.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method will only delete a record if AllowDeleting is set to true. If fieldName and data is not provided and no records are selected, then it will display an alert message with key DeleteAlert while calling this method. If ShowDeleteConfirmDialog is set to true, it will display a confirm dialog before deleting the record with key DeleteConfirmAlert.

Examples

<button id="DeleteRecords" @onclick="DeleteRecords">DeleteRecords</button>
<SfGrid @ref="grid" DataSource="@Orders">
<GridEditSettings AllowDeleting="true"></GridEditSettings>
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
    var data = new Order() { OrderID = 1006, CustomerID = "ALFKI", OrderDate = new DateTime(1995, 05, 15), Freight = 25.7 * 2 };
   private async Task DeleteRecords()
   {
      await grid.DeleteRecordAsync("OrderID", data);
   }
}

EditCellAsync(Int32, String)

Change a particular cell into an edited state by providing the row index and field name in Batch mode.

Declaration

public Task EditCellAsync(int index, string fieldName)

Parameters

Type	Name	Description
System.Int32	index	The index of the row to be edited.
System.String	fieldName	The column name of the cell to be edited, identified by its Field property.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method will only edit the cell if the Mode is set to EditMode.Batch and AllowEditing is set to true. It will search for the row and cell based on the provided index and fieldName, and call EditModule.EditCell to edit the cell.

Examples

<button id="editCell" @onclick="EditCell">EditCell</button>
<SfGrid @ref="grid" DataSource="@Orders">
<GridEditSettings AllowEditing="true" Mode="EditMode.Batch"></GridEditSettings>
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task EditCell()
   {
     await grid.EditCellAsync(3, "CustomerID");
   }
}

EnableToolbarItemsAsync(List<String>, Boolean)

Enables or disables toolbar items by identified their IDs.

Declaration

public Task EnableToolbarItemsAsync(List<string> items, bool isEnable)

Parameters

Type	Name	Description
System.Collections.Generic.List<System.String>	items	A list of strings containing the IDs of toolbar items to enable or disable.
System.Boolean	isEnable	Specifies whether to enable (true) or disable (false) the toolbar items.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method enables or disables the specified toolbar items by adding or updating their key-value pairs.

Examples

<button id="EnableToolbarItems" @onclick="ToolbarHandler">EnableToolbarItems</button>
<SfGrid @ref="grid" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
<GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"/>
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ToolbarHandler()
   {
	await grid.EnableToolbarItemsAsync(new List<string>() { "Add" , "Edit"}, false); // here we disabled the Add and Edit toolbar items.
   }
}

EndEditAsync()

Saves the modified values when the row or cell is in editing state.

Declaration

public Task EndEditAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

To close the edit state without saving changes, use the CloseEditAsync() method.

Examples

<button id="EndEdit" @onclick="EditHandler">EndEdit</button>
<SfGrid @ref="grid" DataSource="@Orders">
<GridEditSettings AllowEditing="true"></GridEditSettings>
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task EditHandler()
   {
     await grid.EndEditAsync();
   }
}

ExpandAllDetailRowAsync()

Expands all the detail rows of the Grid including those are currently collapsed.

Declaration

public Task ExpandAllDetailRowAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Taskrepresenting the asynchronous expand operation.

Remarks

You can use this method in the DataBound event to expand all the rows at initial rendering.

Examples

<button id="Expand" @onclick="Expand">ExpandAll</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task Expand()
   {
       await grid.ExpandAllDetailRowAsync();
   }
}

ExpandAllGroupAsync()

Expand all grouped rows in the Grid.

Declaration

public Task ExpandAllGroupAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method will only expand grouped rows if AllowGrouping is set to true. If GroupSettings.EnableLazyLoading is set to true, it will set IsLazyExpandAll to true and call DataProcess method. Otherwise, it will set IsExpand property to true for all grouped rows and update the grid accordingly.

Examples

<button id="ExpandAll" @onclick="ExpandAll">ExpandAll</button>
<SfGrid @ref="grid" DataSource="@Orders" AllowGrouping="true">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ExpandAll()
   {
     await grid.ExpandAllGroupAsync();
   }
}

ExpandCollapseDetailRowAsync(TValue)

Expands or collapses the detail row of the Grid with the specified row data.

Declaration

public Task ExpandCollapseDetailRowAsync(TValue data)

Parameters

Type	Name	Description
TValue	data	The data of the row by which the detail row will be expanded or collapsed.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous expand or collapse operation.

Remarks

The given data will be compared against the CurrentViewData and if a matching row is found, its detail row will be expanded or collapsed. If the input data and current view data do not have the same reference, use the Syncfusion.Blazor.Grids.SfGrid`1.DetailExpandCollapseRow(System.String,System.Object) method.

Examples

<button id="ExpandOrCollapse" @onclick="RowHandler">ExpandOrCollapse</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task RowHandler()
   {
        var data = new EmployeeData() { EmployeeID = 1, FirstName = "Nancy", LastName = "Davolio", Title = "Sales Representative", HireDate = new DateTime(1995, 05, 15), City = "Seattle", Country = "USA" };
        await grid.ExpandCollapseDetailRowAsync(data);  
   }
}

ExpandCollapseDetailRowAsync(String, Object)

Expands or collapses the detail row of the Grid with the specified field name and row data value..

Declaration

public Task ExpandCollapseDetailRowAsync(string fieldName, object value)

Parameters

Type	Name	Description
System.String	fieldName	The name of the column by which the detail row will be expanded or collapsed, identified by its Field property.
System.Object	value	The value of the row by which the detail row will be expanded or collapsed

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Taskrepresenting the asynchronous expand or collapse operation.

Remarks

The specified row data value will be compared against the CurrentViewData and if a matching row is found, its detail row will be expanded or collapsed.

Examples

<button id="ExpandOrCollapse" @onclick="RowHandler">ExpandOrCollapse</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task RowHandler()
   {
        await grid.ExpandCollapseDetailRowAsync("FirstName", "Nancy");  
   }
}

ExportToCsvAsync(ExcelExportProperties)

Exports the grid data to a CSV file.

Declaration

public Task ExportToCsvAsync(ExcelExportProperties excelExportProperties = null)

Parameters

Type	Name	Description
ExcelExportProperties	excelExportProperties	An object of type ExcelExportProperties, provides properties to customize the column, data source, theme, etc. for the exported CSV file. If not provided, default values will be used.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

AllowExcelExport property must be true to use this feature. excelExportProperties object can be used to customize the appearance of the exported CSV file. If not provided, this method will use default values.

Examples

<button id="ExportToCsv" @onclick="ExportHandler">ExportToCsv</button>
<SfGrid @ref="grid" AllowExcelExport="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ExportHandler()
   {
       Syncfusion.Blazor.Grids.ExcelExportProperties ExportProperties = new Syncfusion.Blazor.Grids.ExcelExportProperties();
       ExportProperties.ExportType = Syncfusion.Blazor.Grids.ExportType.CurrentPage; // here we have changed the ExportType from AllPages to CurrentPage, as like same we can change our desire properties.
       await grid.ExportToCsvAsync(ExportProperties);
   }
}

ExportToCsvAsync(Boolean, ExcelExportProperties)

Gets the Grid CSV file as a System.IO.MemoryStream.

Declaration

public Task<MemoryStream> ExportToCsvAsync(bool asMemoryStream, ExcelExportProperties excelExportProperties = null)

Parameters

Type	Name	Description
System.Boolean	asMemoryStream	Specifies whether to return the CSV as a memory stream.
ExcelExportProperties	excelExportProperties	Optional. Provides the Excel export properties such as custom columns, data sources, themes, etc.

Returns

Type	Description
System.Threading.Tasks.Task<System.IO.MemoryStream>	An asynchronous task that provides a System.IO.MemoryStream containing the exported CSV file when asMemoryStream parameter is true; otherwise, it returns null and exports the CSV file in the browser.

Remarks

This method will only export the csv file if the AllowExcelExport is set to true. It exports the Grid sheet to a CSV file (.csv) in the browser by defining asMemoryStream parameter value to false.

Examples

<button id="ExportToExcel<"@onclick="ExportHandler">ExportToCsv<</button>
<SfGrid @ref="grid" AllowExcelExport="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ExportHandler()
   {
       Syncfusion.Blazor.Grids.ExcelExportProperties ExportProperties = new Syncfusion.Blazor.Grids.ExcelExportProperties();
       ExportProperties.ExportType = Syncfusion.Blazor.Grids.ExportType.CurrentPage; // here we have changed the ExportType from AllPages to CurrentPage, as like same we can change our desire properties.
       MemoryStream streamDocument = await grid.ExportToCsvAsync(true, ExportProperties);
   }
}

See Also

ExcelExportProperties

ExportToExcelAsync(ExcelExportProperties)

Exports Grid data to an Excel file(.xlsx).

Declaration

public Task ExportToExcelAsync(ExcelExportProperties excelExportProperties = null)

Parameters

Type	Name	Description
ExcelExportProperties	excelExportProperties	Provides the excel export properties such as custom columns, data sources, themes, etc.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method exports the data from the current Grid instance to an Excel file. The exported file will be in the .xlsx format.

Examples

<button id="ExportToExcel<"@onclick="ExportHandler">ExportToExcel<</button>
<SfGrid @ref="grid" AllowExcelExport="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ExportHandler()
   {
       Syncfusion.Blazor.Grids.ExcelExportProperties ExportProperties = new Syncfusion.Blazor.Grids.ExcelExportProperties();
       ExportProperties.ExportType = Syncfusion.Blazor.Grids.ExportType.CurrentPage; // here we have changed the ExportType from AllPages to CurrentPage, as like same we can change our desire properties.
       await grid.ExportToExcel(ExportProperties);
   }
}

ExportToExcelAsync(Boolean, ExcelExportProperties)

Gets the Grid Excel sheet as a System.IO.MemoryStream.

Declaration

public Task<MemoryStream> ExportToExcelAsync(bool asMemoryStream, ExcelExportProperties excelExportProperties = null)

Parameters

Type	Name	Description
System.Boolean	asMemoryStream	Specifies whether to return the Excel worksheet as a memory stream.
ExcelExportProperties	excelExportProperties	Optional. Provides the excel export properties such as custom columns, data sources, themes, etc.

Returns

Type	Description
System.Threading.Tasks.Task<System.IO.MemoryStream>	An asynchronous task that provides a System.IO.MemoryStream containing the exported Excel data when asMemoryStream parameter is true; otherwise, it returns null and exports the Excel sheet in browser.

Remarks

It exports the Grid sheet to an Excel file (.xlsx) in the browser by defining asMemoryStream parameter value to false.

Examples

<button id="ExportToExcel<"@onclick="ExportHandler">ExportToExcel<</button>
<SfGrid @ref="grid" AllowExcelExport="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ExportHandler()
   {
       Syncfusion.Blazor.Grids.ExcelExportProperties ExportProperties = new Syncfusion.Blazor.Grids.ExcelExportProperties();
       ExportProperties.ExportType = Syncfusion.Blazor.Grids.ExportType.CurrentPage; // here we have changed the ExportType from AllPages to CurrentPage, as like same we can change our desire properties.
       MemoryStream streamDocument = await grid.ExportToExcel(true, ExportProperties);
   }
}

See Also

ExcelExportProperties

ExportToPdfAsync(PdfExportProperties)

Export Grid data to PDF document.

Declaration

public Task ExportToPdfAsync(PdfExportProperties pdfExportProperties = null)

Parameters

Type	Name	Description
PdfExportProperties	pdfExportProperties	Provides the pdf export properties such as custom columns, data sources, themes, etc.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation

Examples

<button id="ExportToPdf<"@onclick="ExportHandler">ExportToPdf<</button>
<SfGrid @ref="grid" AllowPdfExport="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ExportHandler()
   {
       Syncfusion.Blazor.Grids.PdfExportProperties ExportProperties = new Syncfusion.Blazor.Grids.PdfExportProperties();
       ExportProperties.ExportType = Syncfusion.Blazor.Grids.ExportType.CurrentPage; // here we have changed the ExportType from AllPages to CurrentPage, as like same we can change our desire properties.
       await grid.ExportToPdfAsync(ExportProperties);
}

ExportToPdfAsync(Boolean, PdfExportProperties)

Gets the Grid PDF document as a System.IO.MemoryStream.

Declaration

public Task<MemoryStream> ExportToPdfAsync(bool asMemoryStream, PdfExportProperties pdfExportProperties = null)

Parameters

Type	Name	Description
System.Boolean	asMemoryStream	Specifies whether to return the PDF document as a memory stream.
PdfExportProperties	pdfExportProperties	Optional. Provides the pdf export properties such as custom columns, data sources, themes, etc.

Returns

Type	Description
System.Threading.Tasks.Task<System.IO.MemoryStream>	An asynchronous task that provides a System.IO.MemoryStream containing the exported PDF document when asMemoryStream parameter is true; otherwise, it returns null and exports the PDF document in browser.

Remarks

It exports the Grid data to a PDF document in the browser by defining asMemoryStream parameter value to false.

Examples

<button id="ExportToPdf<"@onclick="ExportHandler">ExportToPdf<</button>
<SfGrid @ref="grid" AllowPdfExport="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ExportHandler()
   {
       Syncfusion.Blazor.Grids.PdfExportProperties ExportProperties = new Syncfusion.Blazor.Grids.PdfExportProperties();
       ExportProperties.ExportType = Syncfusion.Blazor.Grids.ExportType.CurrentPage; // here we have changed the ExportType from AllPages to CurrentPage, as like same we can change our desire properties.
       MemoryStream streamDocument = await grid.ExportToPdfAsync(true, ExportProperties);
}

See Also

PdfExportProperties

FilterByColumnAsync(String, String, Object, String, Nullable<Boolean>, Nullable<Boolean>, Object, Object, String)

Filters the grid row by a specified column with the given options.

Declaration

public Task FilterByColumnAsync(string fieldName, string filterOperator, object filterValue, string predicate = null, Nullable<bool> matchCase = null, Nullable<bool> ignoreAccent = null, object actualFilterValue = null, object actualOperator = null, string columnUid = null)

Parameters

Type	Name	Description
System.String	fieldName	The name of the column to be filtered, identified by its Field property.
System.String	filterOperator	The operator to apply to the filter, refer to the operator list in Operator.
System.Object	filterValue	The value to use for filtering.
System.String	predicate	The predicate is used to generate the filter query to meet the multiple filtering requests. This parameter is optional.
System.Nullable<System.Boolean>	matchCase	A Boolean value that indicates whether the filter should be case-sensitive. This parameter is optional.
System.Nullable<System.Boolean>	ignoreAccent	A Boolean value that indicates whether the filter should ignore accents when comparing values. This parameter is optional.
System.Object	actualFilterValue	Specifies the actual filter value as defined in the corresponding data type. This parameter is optional.
System.Object	actualOperator	Specifies the actual operator to apply to the filter, as defined in the corresponding data type. This parameter is optional.
System.String	columnUid	Selects the appropriate column when multiple foreign key columns have the same fieldName. This parameter is optional.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous filtering operation.

Examples

<button id="FilterByColumn" @onclick="FilterHandler">FilterByColumn</button>
<SfGrid @ref="grid" AllowFiltering="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
     SfGrid<Order> grid;
     private async Task FilterHandler()
     {
	await grid.FilterByColumnAsync("CustomerID", "equal", "ANANTR");
     }

FocusAsync()

Focuses the grid element.

Declaration

public Task FocusAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous focus operation.

Remarks

This method focuses on the grid element. If the grid element is not rendered yet, the method does nothing.

Examples

<button id="Focus" @onclick="Focus">Focus</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task Focus()
   {
       await grid.FocusAsync();
   }
}

GetBatchChangesAsync()

Gets the added, edited, and deleted data before bulk save to the data Source in Batch mode.

Declaration

public Task<BatchChanges<TValue>> GetBatchChangesAsync()

Returns

Type	Description
System.Threading.Tasks.Task<BatchChanges<TValue>>	A System.Threading.Tasks.Task<> representing the asynchronous operation.

Remarks

This method should be used when making bulk changes to the data source in EditMode.Batch to allow for review and modification of the changes before they are committed to the data source. The edited and new added records are highlighted in grid UI. It will cleared once we saved the updated changes in the grid.

Examples

<button id="GetData" @onclick="GetData">Get Data</button>
<SfGrid @ref="grid" DataSource="@Orders">
 <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings>
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetData()
   {
     var Data = await grid.GetBatchChangesAsync();
   }
}

GetCellValueByIndexAsync(Int32, Int32)

Gets the value of a cell in the grid based on row and column indices.

Declaration

public Task<object> GetCellValueByIndexAsync(int rowIndex, int columnIndex)

Parameters

Type	Name	Description
System.Int32	rowIndex	The index of the row from which to retrieve the cell value.
System.Int32	columnIndex	The index of the column from which to retrieve the cell value.

Returns

Type	Description
System.Threading.Tasks.Task<System.Object>	A System.Threading.Tasks.Task representing the asynchronous operation that returns the cell value as an object for the specified row and column indices.

Remarks

This method retrieves the formatted value of a cell from the current view data. When performing grid actions such as sorting, filtering, and grouping, this method returns the current visible data based on the provided indexes When binding a Foreignkey column in the grid, this method returns the Foreignkey value and not the Foreignkey field. The column index represents the index of the column in the Grid UI, not the column order defined in the columns. If the provided row or column index is not valid, null is returned.

Examples

<button @onclick="GetCellValue">GetCellValue</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
      SfGrid<Order> grid;        
      private async Task GetCellValue()        
      {        
         await grid.GetCellValueByIndexAsync(2,3);    
      }      
    }        

GetClass()

Returns the class name to be added to the container element.

Declaration

public string GetClass()

Returns

Type	Description
System.String	string.

GetColumnByFieldAsync(String)

Gets a Column details based on the specific column field name.

Declaration

public Task<GridColumn> GetColumnByFieldAsync(string fieldName)

Parameters

Type	Name	Description
System.String	fieldName	The field name of the column to retrieve, identified by its Field property.

Returns

Type	Description
System.Threading.Tasks.Task<GridColumn>	A System.Threading.Tasks.Task<> representing the asynchronous operation that returns the GridColumn with the specified fieldName.

Remarks

This method searches through all columns in the grid and returns the first column whose field name matches the specified fieldName parameter. If no column is found with the specified fieldName, this method returns null. Case-insensitive search is used while comparing the field name.

Examples

<button id="getColumns" @onclick="GetColumn">Get Column</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   List<string> listItems = new List<string>();
   private async Task GetColumn()
   {
        var Column = await grid.GetColumnByFieldAsync("CustomerID");
   }
}

GetColumnByUidAsync(String)

Gets a column by its unique identifier (UID) value.

Declaration

public Task<GridColumn> GetColumnByUidAsync(string uid)

Parameters

Type	Name	Description
System.String	uid	The unique identifier of the column to retrieve the corresponding column details.

Returns

Type	Description
System.Threading.Tasks.Task<GridColumn>	A System.Threading.Tasks.Task<> representing the asynchronous operation that yields the GridColumn with the specified uid, or null if no such column exists.

Examples

<button id="getColumns" @onclick="GetColumn">Get Column</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetColumn()
   {
        var Column = await grid.GetColumnByUidAsync("grid-column18");
   }
}

GetColumnFieldNamesAsync()

Gets the collection of column field names which are bound in the grid.

Declaration

public Task<List<string>> GetColumnFieldNamesAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.List<System.String>>	A System.Threading.Tasks.Task representing the asynchronous operation that returns a list of strings representing the names of the column fields.

Remarks

This method use the Syncfusion.Blazor.Grids.Internal.GridUtils.GetColumns(Syncfusion.Blazor.Grids.IGrid,System.Collections.Generic.List{Syncfusion.Blazor.Grids.GridColumn}) method to retrieve a list of column objects, and then extract the Field property of each column object and return it as a list of strings.

Examples

<button id="getColumns" @onclick="GetColumns">GetColumnFieldNames</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetColumns()
   {
        var columns = await grid.GetColumnFieldNamesAsync();
   }
}

GetColumnIndexByFieldAsync(String)

Gets the index of a column by its field name.

Declaration

public Task<int> GetColumnIndexByFieldAsync(string fieldName)

Parameters

Type	Name	Description
System.String	fieldName	A string value representing the field name of the column whose index is to be returned, identified by its Field property.

Returns

Type	Description
System.Threading.Tasks.Task<System.Int32>	A System.Threading.Tasks.Task<> representing the asynchronous operation.

Remarks

This method retrieves the list of columns from the grid using Syncfusion.Blazor.Grids.Internal.GridUtils.GetColumns(Syncfusion.Blazor.Grids.IGrid,System.Collections.Generic.List{Syncfusion.Blazor.Grids.GridColumn}), and searches for the first column whose name matches the GridColumn.Field property of the grid and return its index.

Examples

<button id="GetColumnIndex" @onclick="GetColumnIndex">Get ColumnIndex</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetColumnIndex()
   {
        var ColumnIndex = await grid.GetColumnIndexByFieldAsync("CustomerID");
   }
}

GetColumnIndexByUidAsync(String)

Gets the index of a column by its unique identifier (UID).

Declaration

public Task<int> GetColumnIndexByUidAsync(string uid)

Parameters

Type	Name	Description
System.String	uid	The unique identifier (UID) of the column whose index is to be returned.

Returns

Type	Description
System.Threading.Tasks.Task<System.Int32>	A System.Threading.Tasks.Task<> representing the asynchronous operation that returns the index of the column with the specified UID.

Remarks

The method searches for the column by comparing the provided UID to the Uid property of each column in the grid using an ordinal comparison.

Examples

<button id="GetColumnIndex" @onclick="GetColumnIndex">Get ColumnIndex</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetColumnIndex()
   {
        var ColumnIndex = await grid.GetColumnIndexByUidAsync("grid-column18");
   }
}

GetColumnsAsync(Nullable<Boolean>)

Gets the list of columns details which are bound in the Grid.

Declaration

public Task<List<GridColumn>> GetColumnsAsync(Nullable<bool> isRefresh = null)

Parameters

Type	Name	Description
System.Nullable<System.Boolean>	isRefresh	An optional boolean value indicating whether to refresh the grid columns.

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.List<GridColumn>>	A System.Threading.Tasks.Task<> representing the asynchronous operation that returns the GridColumn.

Examples

<button id="getColumns" @onclick="GetColumns">Get Columns</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetColumns()
   {
        var Columns = await grid.GetColumnsAsync();
   }
}

GetCurrentViewRecordsAsync()

Gets the records which are currently visible in the grid.

Declaration

public Task<List<TValue>> GetCurrentViewRecordsAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.List<TValue>>	A System.Threading.Tasks.Task representing the asynchronous operation.

Examples

<button id="GetCurrentViewRecords" @onclick="GetDataHandler">Get CurrentViewRecords</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetDataHandler()
   {
        var records = await grid.GetCurrentViewRecordsAsync();
   }
}

GetEditContextAsync()

Gets the current Microsoft.AspNetCore.Components.Forms.EditContext instance used in the Grid editing operations such as "Add" and "Edit".

Declaration

public Task<EditContext> GetEditContextAsync()

Returns

Type	Description
System.Threading.Tasks.Task<Microsoft.AspNetCore.Components.Forms.EditContext>	A System.Threading.Tasks.Task<> representing the asynchronous operation. The task result contains the Microsoft.AspNetCore.Components.Forms.EditContext instance, which provides information about the edit operation including modified field states and validation messages. Returns null if editing is not enabled.

Remarks

This method retrieves the current Microsoft.AspNetCore.Components.Forms.EditContext associated with the Grid editing context. It is useful when you need to access edit tracking details programmatically, such as performing custom validation or integrating with external forms.

Examples

The following example shows how to retrieve the Microsoft.AspNetCore.Components.Forms.EditContext from the Grid:

<button @onclick="GetEditContext">GetEditContext</button>
<SfGrid @ref="grid" DataSource="@Orders">
    ........
</SfGrid>
@code {
    SfGrid<Order> grid;        

    private async Task GetEditContext()        
    {        
        await grid.GetEditContextAsync();    
    }      
}

GetFilteredRecordsAsync(Boolean)

Get the filtered records details of the DataGrid.

Declaration

public Task<object> GetFilteredRecordsAsync(bool isStrictFiltering = false)

Parameters

Type	Name	Description
System.Boolean	isStrictFiltering	A boolean value indicating whether strict filtering should be applied. By default, its value is false. When set to true, the method ensures that at least one column is filtered before returning records. When false, it returns all available records without enforcing filtering conditions.

Returns

Type	Description
System.Threading.Tasks.Task<System.Object>	A System.Threading.Tasks.Task representing the asynchronous operation that returns an array of objects for the local dataSource. If the Grid has remote data, it returns a promise object.

Examples

Any one of the column must be filtered to get the filtered record details while using this method. If isStrictFiltering is enabled and no columns are filtered, an empty collection is returned.

<button id="GetFilteredRecords" @onclick="FilterHandler ">Get Filtered Records</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task FilterHandler()
   {
        var data = await grid.GetFilteredRecordsAsync();
   }
}

GetForeignKeyColumnsAsync()

Gets the foreign columns detail from the Grid.

Declaration

public Task<List<GridColumn>> GetForeignKeyColumnsAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.List<GridColumn>>	A System.Threading.Tasks.Task representing the asynchronous operation that returns a list of GridColumn objects.

Remarks

A foreign key column must be specified using the ForeignKeyValue property and ForeignKeyField property.

Examples

<button id="GetForeignKeyColumns" @onclick="GetColumnHandler ">Get ForeignKeyColumns</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetColumnHandler()
   {
        var Columns = await grid.GetForeignKeyColumnsAsync();
   }
}

GetHiddenColumnsAsync()

Gets the hidden columns from the Grid.

Declaration

public Task<List<GridColumn>> GetHiddenColumnsAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.List<GridColumn>>	A System.Threading.Tasks.Task representing the asynchronous operation that returns a list of GridColumn objects.

Remarks

This method retrieves all the columns from the Grid using the Syncfusion.Blazor.Grids.Internal.GridUtils.GetColumns(Syncfusion.Blazor.Grids.IGrid,System.Collections.Generic.List{Syncfusion.Blazor.Grids.GridColumn}) and filters the list that are not visible using the Visible property.

Examples

<button id="GetHiddenColumns" @onclick="GetColumnHandler ">Get HiddenColumns</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetColumnHandler()
   {
        var Columns = await grid.GetHiddenColumnsAsync();
   }
}

GetPersistDataAsync()

Get the grid properties which are maintained in the persisted state.

Declaration

public Task<string> GetPersistDataAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.String>	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

Returns the state of the grid as string value which can be saved and loaded into grid later using SetPersistData method.

Examples

<button id="GetPersistData" @onclick="GetPersistData">Get PersistData</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetPersistData()
   {
        var data = await grid.GetPersistDataAsync();
   }
}

GetPrimaryKeyFieldNamesAsync()

Get the names of the primary key columns of the Grid.

Declaration

public Task<List<string>> GetPrimaryKeyFieldNamesAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.List<System.String>>	A System.Threading.Tasks.Task representing the asynchronous operation that returns a list of strings representing the names of the primary key columns.

Remarks

This method retrieves all the columns from the Grid using the Syncfusion.Blazor.Grids.Internal.GridUtils.GetColumns(Syncfusion.Blazor.Grids.IGrid,System.Collections.Generic.List{Syncfusion.Blazor.Grids.GridColumn}) and filters the list of columns based on the IsPrimaryKey property. 

Examples

<button id="GetPrimaryKeyFieldNames" @onclick="GetDataHandler">Get PrimaryKeyFieldNames</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetDataHandler()
   {
        var fieldNames = await grid.GetPrimaryKeyFieldNamesAsync();
   }
}

GetRowIndexByPrimaryKeyAsync(Object)

Gets the index of a row in the grid using a specified primary key value.

Declaration

public Task<int> GetRowIndexByPrimaryKeyAsync(object value)

Parameters

Type	Name	Description
System.Object	value	The value of the primary key column, for the row whose index is to be returned.

Returns

Type	Description
System.Threading.Tasks.Task<System.Int32>	A System.Threading.Tasks.Task representing the asynchronous operation that result contains the index of the row, or -1 if the row cannot be found.

Remarks

A primary key column must be specified using the IsPrimaryKey property.

Examples

<button id="GetRowIndexByPrimaryKey" @onclick="GetDataHandler">GetRowIndexByPrimaryKey</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetDataHandler()
   {
        var rowIndex  = await grid.GetRowIndexByPrimaryKeyAsync(1);  // pass primary key value here.
   }
}

GetSelectedRecordsAsync()

Gets the collection of selected records.

Declaration

public Task<List<TValue>> GetSelectedRecordsAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.List<TValue>>	A System.Threading.Tasks.Task representing the asynchronous operation that result contains a list of the currently selected records.

Remarks

While using this method, you can get the collection of record details which are currently selected in the grid.

Examples

<button id="Get SelectedRecords" @onclick="GetDataHandler">GetSelectedRecords</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetDataHandler()
   {
        var selectedRecords  = await grid.GetSelectedRecordsAsync();  
   }
}

GetSelectedRowCellIndexesAsync()

Gets the collection of cell indexes from the selected row.

Declaration

public Task<List<ValueTuple<int, int>>> GetSelectedRowCellIndexesAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.List<System.ValueTuple<System.Int32, System.Int32>>>	A System.Threading.Tasks.Task representing the asynchronous operation that result contains a list of ValueTuple instances representing the selected row and cell indexes.

Remarks

If there are no rows or the AllowSelection is set to false or selection mode is set to Row, an empty list is returned.

Examples

<button id="Get selectedRowcellIndexes " @onclick="GetDataHandler ">GetSelectedRowcellIndexes </button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetDataHandler()
   {
        var selectedRowcellIndexes = await grid.GetSelectedRowCellIndexesAsync();  
   }
}

GetSelectedRowIndexesAsync()

Gets the collection of selected row indexes.

Declaration

public Task<List<int>> GetSelectedRowIndexesAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.List<System.Int32>>	A System.Threading.Tasks.Task representing the asynchronous operation that result contains a list of integer representing the indexes of the selected rows.

Examples

This method does not retrieve the row indexes if Mode is set to Cell.

<button id="GetSelectedRowIndexes " @onclick="GetDataHandler">GetSelectedRowIndexes </button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetDataHandler()
   {
        var SelectedRowIndexes = await grid.GetSelectedRowIndexesAsync();  
   }
}

GetUidByColumnFieldAsync(String)

Gets the unique identifier (UID) by its column field name.

Declaration

public Task<string> GetUidByColumnFieldAsync(string fieldName)

Parameters

Type	Name	Description
System.String	fieldName	The field name of the column whose unique identifier (UID) is to be retrieved, identified by its Field property.

Returns

Type	Description
System.Threading.Tasks.Task<System.String>	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method searches through all columns in the grid and returns the UID of the first column whose field name matches the specified fieldName parameter. If no column is found, this method returns null. Case-insensitive search is used while comparing the field name.

Examples

<button id="GetUidByColumnField" @onclick="GetDataHandler">GetUidByColumnField</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetDataHandler()
   {
        var Uid = await grid.GetUidByColumnFieldAsync("CustomerID");  //pass column name here
   }
}

GetVisibleColumnsAsync()

Gets a list of all visible columns in the grid.

Declaration

public Task<List<GridColumn>> GetVisibleColumnsAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.List<GridColumn>>	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method uses the Syncfusion.Blazor.Grids.Internal.GridUtils.GetColumns(Syncfusion.Blazor.Grids.IGrid,System.Collections.Generic.List{Syncfusion.Blazor.Grids.GridColumn}) method to retrieve all columns in the grid and returns a list of columns where Visible property is true.

Examples

<button id="GetVisibleColumns" @onclick="GetDataHandler">GetVisibleColumns</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GetDataHandler()
   {
        var Columns = await grid.GetVisibleColumnsAsync();
   }
}

GoToPageAsync(Int32)

Navigate to the specified target page number asynchronously.

Declaration

public Task GoToPageAsync(int pageNo)

Parameters

Type	Name	Description
System.Int32	pageNo	Specifies the page number you want to navigate.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

AllowPaging should be set to true in order to use this method.

Examples

<button id="GoToPage" @onclick="PagingHandler">GoToPage</button>
<SfGrid @ref="grid" AllowPaging="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task PagingHandler()
   {
        await grid.GoToPageAsync(4); // pass desire page number here.
   }
}

GroupColumnAsync(String)

Group a column based on the specified field name of the column.

Declaration

public Task GroupColumnAsync(string columnName)

Parameters

Type	Name	Description
System.String	columnName	Specifies the column field name to be grouped.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

AllowGrouping must be true to use this method.

Examples

<button id="GroupColumn" @onclick="GroupColumn">GroupColumn</button>
<SfGrid @ref="grid" DataSource="@Orders" AllowGrouping="true">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task GroupColumn()
   {
     await grid.GroupColumnAsync();
   }
}

HideColumnAsync(String, String)

Hides a column in the grid by its Field or HeaderText.

Declaration

public Task HideColumnAsync(string columnName, string hideBy = "HeaderText")

Parameters

Type	Name	Description
System.String	columnName	The name of the column to hide.
System.String	hideBy	Specifies whether the column name is hide by its Field or HeaderText. Default value is HeaderText.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation of hiding the specified column in the grid

Remarks

You can dynamically hide showing columns in the grid.

Examples

<button id="HideColumn" @onclick="ColumnHandler">HideColumn</button>
<button id="HideColumnByField" @onclick="ColumnFieldHandler">HideColumnByField</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ColumnHandler()
   {
        await grid.HideColumnAsync("Ship Country");
   }
   private async Task ColumnFieldHandler()
   {
        await grid.HideColumnAsync("ShipCountry","Field");   //pass second param as "Field" to hide using field name.
   }
}

HideColumnsAsync(String[], String)

Hide one or more columns in the grid by their Field or HeaderText.

Declaration

public Task HideColumnsAsync(string[] columnNames, string hideBy = "HeaderText")

Parameters

Type	Name	Description
System.String[]	columnNames	An array of column names to be hidden in the grid.
System.String	hideBy	Specifies whether the column name is hide by its Field or HeaderText. Default value is HeaderText.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation of hiding the specified columns in the grid

Remarks

You can dynamically hide showing columns in the grid.

Examples

<button id="HideColumns" @onclick="ColumnHandler">HideColumns</button>
<button id="HideColumnsByField" @onclick="ColumnFieldHandler">HideColumnsByField</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ColumnHandler()
   {
        var columns = new List<string>() { "Freight", "Ship Country" };
        await grid.HideColumnsAsync(columns.ToArray());
   }
   private async Task ColumnFieldHandler()
   {
        var columns = new List<string>() { "Freight", "ShipCountry" };
        await grid.HideColumnsAsync(columns.ToArray(),"Field");   //pass second param as "Field" to hide using field name.
   }
}

HideSpinnerAsync()

Hide the spinner which is shown while performing any grid action or grid loading time.

Declaration

public Task HideSpinnerAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation of hiding the spinner element.

Remarks

This method checks if _hasSpinner is true and if SpinnerRef is not null before hiding the spinner.

Examples

<button id="HideSpinner" @onclick="SpinnerHandler">HideSpinner</button>
<SfGrid @ref="grid" DataSource="@Orders">
      .................
</SfGrid>
@code{
     SfGrid<Order> grid;
     private async Task SpinnerHandler()
     {
	await grid.HideSpinnerAsync(); // Hides the spinner.
     }

IsDirtyAsync()

Determines whether the grid has any batch changes before updating it.

Declaration

public Task<bool> IsDirtyAsync()

Returns

Type	Description
System.Threading.Tasks.Task<System.Boolean>	A System.Threading.Tasks.Task<> representing the asynchronous operation. It returns true if the grid has any batch changes, such as adding new records, edited records, and deleted records; otherwise, returns false.

Remarks

This method will only work if the edit Mode is set to Batch.

Examples

<button id="UpdateData" @onclick="UpdateData">UpdateData</button>
<SfGrid @ref="grid" DataSource="@Orders">
 <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings>
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task UpdateData()
   {
        bool isDirty = await grid.IsDirtyAsync(); // if the grid has any batch changes, it returns true; otherwise, false.
        if(isDirty)
        {
            // You can customized code here.
        }
   }
}

OnAfterRenderAsync(Boolean)

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender

Returns

Type
System.Threading.Tasks.Task

Overrides

SfDataBoundComponent.OnAfterRenderAsync(Boolean)

OnHybridInitialized()

Declaration

protected Task OnHybridInitialized()

Returns

Type
System.Threading.Tasks.Task

OnHybridParametersSet()

Declaration

protected Task OnHybridParametersSet()

Returns

Type
System.Threading.Tasks.Task

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

Overrides

SfDataBoundComponent.OnInitializedAsync()

OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Overridable Method for INotifyCollectionChanged event handler to track the changes.

Declaration

protected override void OnObservableChange(string propertyName, object sender, bool isCollectionChanged = false, NotifyCollectionChangedEventArgs e = null)

Parameters

Type	Name	Description
System.String	propertyName	Observable property name.
System.Object	sender	Observable model object.
System.Boolean	isCollectionChanged	Sets true if the observable collection changed.
System.Collections.Specialized.NotifyCollectionChangedEventArgs	e	Changed Event Args

Overrides

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task

Overrides

SfDataBoundComponent.OnParametersSetAsync()

OpenColumnChooserAsync(Nullable<Double>, Nullable<Double>)

Opens the column chooser pop up anywhere in the screen by given position(X and Y axis).

Declaration

public Task OpenColumnChooserAsync(Nullable<double> x = null, Nullable<double> y = null)

Parameters

Type	Name	Description
System.Nullable<System.Double>	x	Specifies the X axis position.
System.Nullable<System.Double>	y	Specifies the Y axis position.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

You can manually open the column chooser at any position of screen at any desired time if ShowColumnChooser property is set to true

Examples

<button id="OpenColumnChooser" @onclick="ColumnHandler">OpenColumnChooser</button>
<SfGrid @ref="grid" ShowColumnChooser="true" DataSource="@Orders">
      .................
</SfGrid>
@code{
     SfGrid<Order> grid;
     private async Task ColumnHandler()
     {
	await grid.OpenColumnChooserAsync(200,50); // pass desire X and Y value
     }

PreventRender(Boolean)

Prevents the grid render. This method will internally sets value to be returned from ShouldRender method.

Declaration

public void PreventRender(bool preventRender = true)

Parameters

Type	Name	Description
System.Boolean	preventRender	Default value is true. Toggles the ShouldRender method value.

PrintAsync()

Print all pages of the Grid and it hides the pager.

Declaration

public Task PrintAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

You can customize the print options by using the PrintMode property of the Grid component.

Examples

<button id="Print" @onclick="PrintHandler">Print</button>
<SfGrid @ref="grid" DataSource="@Orders">
............
</SfGrid>
@code{
     SfGrid<Order> grid;
     private async Task PrintHandler()
     {
	await grid.PrintAsync(); 
     }

Refresh(Boolean)

Refreshes the grid header and content. Passing the additional parameter as true ensures the component is reinitialized with dynamic changes.

Declaration

public Task Refresh(bool isModelRefresh = false)

Parameters

Type	Name	Description
System.Boolean	isModelRefresh	Defaults to false. When set to true, specifies whether to re-render the grid with updated model property changes.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous refresh operation.

Remarks

Calling the refresh method without passing the additional parameter refreshes the UI only. Setting isModelRefresh to true refreshes the grid with updated property changes and reinitializes it if the model has changed.

Examples

The following example demonstrates how to use the Refresh(Boolean) method to refresh a grid component in a Blazor application:

<button @onclick="Refresh">Refresh</button>
<SfGrid @ref="Grid" DataSource="@Orders">
    @if (renderColumns)
    {
        <GridColumns> <!-- Define grid columns 5 here --> </GridColumns>
        <GridAggregates> <!-- Define aggregates here --> </GridAggregates>
    }
    else
    {
        <GridColumns> <!-- Define grid columns 3 here --> </GridColumns>
    }
</SfGrid>

@code {
    private SfGrid<Order> Grid;
    private bool renderColumns = false;

    private async Task Refresh()
    {
        renderColumns = true;
        await Grid.Refresh(true); // Refresh the grid with dynamic columns
    }
}

RefreshColumnsAsync()

Refreshes the Grid with column changes.

Declaration

public Task RefreshColumnsAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous refresh operation.

Remarks

Refresh the Grid columns when column property values are updated externally. This method sets the ForceUpdate property to true and calls the Syncfusion.Blazor.Grids.SfGrid`1.CallStateHasChangedAsync method asynchronously.

Examples

<button id="RefreshColumns" @onclick="RefreshHandler">RefreshColumns</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task RefreshHandler()
   {
     await grid.RefreshColumnsAsync();
   }
}

RefreshHeaderAsync()

Refreshes the Grid header.

Declaration

public Task RefreshHeaderAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous refresh operation.

Remarks

This method should be called whenever the header of the component needs to be refreshed. This method sets the Syncfusion.Blazor.Grids.SfGrid`1.RefreshColumnHeader and ForceUpdate properties to true and calls the Syncfusion.Blazor.Grids.SfGrid`1.CallStateHasChangedAsync method asynchronously.

Examples

<button id="RefreshHeader" @onclick="RefreshHandler">RefreshHeader</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task RefreshHandler()
   {
     await grid.RefreshHeaderAsync();
   }
}

ReorderColumnAsync(String, String)

Changes the position of a column in the Grid by its field name.

Declaration

public Task ReorderColumnAsync(string fromFieldName, string toFieldName)

Parameters

Type	Name	Description
System.String	fromFieldName	The name of the column to be moved.
System.String	toFieldName	The destination of the column where the column should be moved.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

AllowReordering should be set to true in order to use this method.

Examples

<button id="ReorderColumns" @onclick="ReorderColumn">ReorderColumns</button>
<SfGrid @ref="grid" AllowReordering="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ReorderColumn()
   {
        await grid.ReorderColumnAsync("OrderID", "ShipCountry");
   }
}

ReorderColumnByIndexAsync(Int32, Int32)

Moves the Grid column positions in the UI from one column index to another based on field index.

Declaration

public Task ReorderColumnByIndexAsync(int fromIndex, int toIndex)

Parameters

Type	Name	Description
System.Int32	fromIndex	Specifies the current index of the column.
System.Int32	toIndex	Specifies the destination or drop column index.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

If you invoke ReorderColumnByIndexAsync(Int32, Int32) multiple times, then you won't get the same results every time. AllowReordering should be set to true in order to use this method.

Examples

<button id="ReorderColumnByIndex" @onclick="ReorderColumn">ReorderColumnByIndex</button>
<SfGrid @ref="grid" AllowReordering="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ReorderColumn()
   {
        await grid.ReorderColumnByIndexAsync(0,3);
   }
}

ReorderColumnByTargetIndexAsync(String, Int32)

Moves a column in the Grid UI from one position to another, based on its field name and destination index.

Declaration

public Task ReorderColumnByTargetIndexAsync(string fieldName, int toIndex)

Parameters

Type	Name	Description
System.String	fieldName	The name of the column to be moved, identified by its Field property.
System.Int32	toIndex	The destination or drop index of the column in the Grid UI.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

AllowReordering should be set to true in order to use this method. If you invoke ReorderColumnByTargetIndexAsync(String, Int32) method multiple times, then you will get the same results every time.

Examples

<button id="ReorderColumnByIndex" @onclick="ReorderColumn">ReorderColumnByIndex</button>
<SfGrid @ref="grid" AllowReordering="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ReorderColumn()
   {
        await grid.ReorderColumnByTargetIndexAsync("OrderID",3);
   }
}

ReorderColumnsAsync(List<String>, String)

Changes the Grid column positions based on column field names.

Declaration

public Task ReorderColumnsAsync(List<string> fromFieldNames, string toFieldName)

Parameters

Type	Name	Description
System.Collections.Generic.List<System.String>	fromFieldNames	The list of columns to be moved.
System.String	toFieldName	The destination of the column where the column should be moved.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

AllowReordering should be set to true in order to use this method.

Examples

<button id="ReorderColumns" @onclick="ReorderColumn">ReorderColumns</button>
<SfGrid @ref="grid" AllowReordering="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ReorderColumn()
   {
        await grid.ReorderColumnsAsync(new List<string> { "OrderID", "CustomerID" }, "ShipCountry");
   }
}

ReorderColumnsAsync(String[], String)

Changes the Grid column positions based on column field names.

Declaration

public Task ReorderColumnsAsync(string[] fromFieldNames, string toFieldName)

Parameters

Type	Name	Description
System.String[]	fromFieldNames	An array of strings that specifies the list of columns to be moved.
System.String	toFieldName	The destination of the column where the column should be moved.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

AllowReordering should be set to true in order to use this method.

Examples

<button id="ReorderColumns" @onclick="ReorderColumn">ReorderColumns</button>
<SfGrid @ref="grid" AllowReordering="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ReorderColumn()
   {
        string[] Columns={"OrderID", "CustomerID"};
        await grid.ReorderColumnsAsync(columns, "ShipCountry");
   }
}

ReorderRowAsync(Int32, Int32)

Changes the Grid row position with given indexes.

Declaration

public Task ReorderRowAsync(int fromIndex, int toIndex)

Parameters

Type	Name	Description
System.Int32	fromIndex	The current row index from which the row needs to be moved.
System.Int32	toIndex	The new row index to which the row needs to be moved.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Examples

<button id="ReorderRow" @onclick="ReorderRow">ReorderRow</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ReorderRow()
   {
        await grid.ReorderRowAsync(0,5);
   }
}

ResetPersistDataAsync()

Resets the state of the Grid.

Declaration

public Task ResetPersistDataAsync()

Returns

Type	Description
System.Threading.Tasks.Task	void.

Remarks

This method will clear the current state and refreshes the grid with original state given delcaratively. If EnablePersistence is used then this will clear the state which is stored in window.localStorage too.

SaveCellAsync()

Saves the cell that is currently being edited.

Declaration

public Task SaveCellAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method will only save the cell if the Mode is set as Batch and AllowEditing is set to true. This method does not save the value to the data source. Updated the value in Grid UI level only.

Examples

<button id="SaveCell" @onclick="CellHandler">SaveCell</button>
<SfGrid @ref="grid" DataSource="@Orders">
<GridEditSettings AllowEditing="true" Mode="EditMode.Batch"/>
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task CellHandler()
   {
        await grid.SaveCellAsync();
   }
}

ScrollIntoViewAsync(Int32, Int32, Int32)

Scroll to specific row or column into view based on the row and column indexes.

Declaration

public Task ScrollIntoViewAsync(int columnIndex = -1, int rowIndex = -1, int rowHeight = -1)

Parameters

Type	Name	Description
System.Int32	columnIndex	The index of the column to be scrolled.
System.Int32	rowIndex	The index of the row to be scrolled.
System.Int32	rowHeight	The height of the row that specfies the row offsetHeight and used to calculate the scroll offset values. This parameter is applicable only when row virtualization enabled.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous scroll operation.

Remarks

To scroll the grid content horizontally based on the specified column index, set EnableColumnVirtualization property in the Blazor Grid. To scroll the grid content vertically based on the specified row index, set EnableVirtualization property in the Blazor Grid.

Examples

<button id="ScrollIntoView" @onclick="Scroll">ScrollIntoView</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task Scroll()
   {
       await grid.ScrollIntoViewAsync(2,3);
   }
}

SearchAsync(String)

Searches the Grid records using the given search key.

Declaration

public Task SearchAsync(string searchString)

Parameters

Type	Name	Description
System.String	searchString	Specifies the search key to be used for searching.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous searching operation.

Remarks

Passing an empty search key or null will clear the searching.

Examples

<button id="Search" @onclick="Searching">Search</button>
<button id="ClearSearch" @onclick="ClearSearching">ClearSearch</button>
<SfGrid @ref="Grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> Grid;
   private async Task Searching()
   {
       await Grid.SearchAsync("ALFKI");
   }
   private async Task ClearSearching()
   {
       await Grid.SearchAsync(""); // pass empty string or null to clear the searching
   }
}

SelectCellAsync(ValueTuple<Int32, Int32>, Nullable<Boolean>)

Selects a cell by the given index.

Declaration

public Task SelectCellAsync(ValueTuple<int, int> cellIndex, Nullable<bool> isToggle = null)

Parameters

Type	Name	Description
System.ValueTuple<System.Int32, System.Int32>	cellIndex	The row and cell index of the cell to be selected. For example (0, 1).
System.Nullable<System.Boolean>	isToggle	Determines whether to toggle the selection of the cell or not. Default value is false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method will only select the cell if theMode is set as Cell and AllowSelection is set to true.

Examples

<button id="SelectCell" @onclick="CellHandler">SelectCell</button>
<SfGrid @ref="grid" AllowSelection="true" DataSource="@Orders">
<GridSelectionSettings Mode="SelectionMode.Cell">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task CellHandler()
   {
        await grid.SelectCellAsync((1,3)); // pass row and cell index
   }
}

SelectCellsAsync(ValueTuple<Int32, Int32>[])

Selects a collection of cells by row and column indexes.

Declaration

public Task SelectCellsAsync(ValueTuple<int, int>[] rowCellIndexes)

Parameters

Type	Name	Description
System.ValueTuple<System.Int32, System.Int32>[]	rowCellIndexes	An array of row and cell indexes that specifies the cells to be selected.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method will only select the cell if theMode is set as Cell and AllowSelection is set to true.

Examples

<button id="SelectCells" @onclick="CellHandler">SelectCells</button>
<SfGrid @ref="grid" AllowSelection="true" DataSource="@Orders">
<GridSelectionSettings Mode="SelectionMode.Cell">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task CellHandler()
   {
        var rowCellIndexes = new (int Row, int Cell)[]{(1, 3),(2, 2),(3, 1),(4, 2)};
        await grid.SelectCellsAsync(rowCellIndexes);
   }
}

SelectCellsByRangeAsync(ValueTuple<Int32, Int32>, Nullable<ValueTuple<Int32, Int32>>)

Selects a range of cells starting from the specified start index and ending at the specified end index.

Declaration

public Task SelectCellsByRangeAsync(ValueTuple<int, int> startIndex, Nullable<ValueTuple<int, int>> endIndex = null)

Parameters

Type	Name	Description
System.ValueTuple<System.Int32, System.Int32>	startIndex	Specifies the value tuple of start index.
System.Nullable<System.ValueTuple<System.Int32, System.Int32>>	endIndex	Specifies the value tuple of end row cell index.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method will only select the cell if the Mode is set as Cell and AllowSelection is set to true.

Examples

<button id="SelectCellsByRange" @onclick="CellHandler">SelectCellsByRange</button>
<SfGrid @ref="grid" AllowSelection="true" DataSource="@Orders">
<GridSelectionSettings Mode="SelectionMode.Cell">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task CellHandler()
   {
        await grid.SelectCellsByRangeAsync((0, 3), (3, 2));
   }
}

SelectRowAsync(Int32, Nullable<Boolean>)

Selects a row by given index.

Declaration

public Task SelectRowAsync(int index, Nullable<bool> isToggle = null)

Parameters

Type	Name	Description
System.Int32	index	Specifies the row index to select.
System.Nullable<System.Boolean>	isToggle	Determines whether to toggle the selection of the row or not.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method will only select the row if the AllowSelection is set to true.

Examples

<button id="SelectRow" @onclick="SelectionHandler">SelectRow</button>
<SfGrid @ref="grid" AllowSelection="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task SelectionHandler()
   {
        await grid.SelectRowAsync(5);
   }
}

SelectRowsAsync(Int32[])

Selects a collection of rows by their indexes.

Declaration

public Task SelectRowsAsync(int[] rowIndexes)

Parameters

Type	Name	Description
System.Int32[]	rowIndexes	An arrray of the row indexes to be selected.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method will only select the row if the AllowSelection is set to true.

Examples

<button id="SelectRows" @onclick="SelectionHandler">SelectRows</button>
<SfGrid @ref="grid" AllowSelection="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task SelectionHandler()
   {
        await grid.SelectRowsAsync(new int[] { 1, 2, 3 });
   }
}

SelectRowsByRangeAsync(Int32, Nullable<Int32>)

Selects a range of rows within the specified range.

Declaration

public Task SelectRowsByRangeAsync(int startIndex, Nullable<int> endIndex = null)

Parameters

Type	Name	Description
System.Int32	startIndex	The starting index of the row to be selected.
System.Nullable<System.Int32>	endIndex	The ending index of the row to be selected.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method selects a range of rows between startIndex and endIndex within a specified range. This method will only select the row if the AllowSelection is set to true.

Examples

<button id="SelectRowsByRange" @onclick="SelectionHandler">SelectRowsByRange</button>
<SfGrid @ref="grid" AllowSelection="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task SelectionHandler()
   {
        await grid.SelectRowsByRangeAsync(3,7);
   }
}

SetCellValueAsync(Object, String, Object)

Updates the value of a particular cell based on the given primary key value.

Declaration

public Task SetCellValueAsync(object key, string fieldName, object value)

Parameters

Type	Name	Description
System.Object	key	The primary key value of the row.
System.String	fieldName	The name of the column, identified by its Field property.
System.Object	value	The new value for the cell.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method updates the value of the cell in the row with the specified primary key and column value. The primary key column should be using IsPrimaryKey property.

Examples

<button id="SetCellValue" @onclick="DataHandler">SetCellValue</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task DataHandler()
   {
        await grid.SetCellValueAsync(1005,"CustomerID","ANTON");
   }
}

SetPersistDataAsync(String)

Load the previously saved state of the Grid.

Declaration

public Task SetPersistDataAsync(string properties)

Parameters

Type	Name	Description
System.String	properties	Contains the saved properties as string value.

Returns

Type	Description
System.Threading.Tasks.Task	Task.

Remarks

This method is primarly used to load and refresh the grid with already saved state. The state can be served from any source such as window.localStorage, DB etc.

SetRowDataAsync(Object, TValue)

Updates and refresh the particular row values based on the given primary key value.

Declaration

public Task SetRowDataAsync(object primaryKeyValue, TValue rowData)

Parameters

Type	Name	Description
System.Object	primaryKeyValue	The primary key value of the row to be updated.
TValue	rowData	The new data to be used to update the row.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

A primary key column must be specified using the IsPrimaryKey property.

Examples

<button id="SetRowData" @onclick="DataHandler">SetRowData</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task DataHandler()
   {
        var rowData = new Order() { OrderID = 1006, CustomerID = "ALFKI", OrderDate = new DateTime(1995, 03, 25), Freight = 25.7 * 2 };
        await grid.SetRowDataAsync(1006,rowData);
   }
}

SetRowDataAsync(Object, TValue, Boolean)

Updates and refresh the particular row values based on the given primary key value.

Declaration

public Task SetRowDataAsync(object primaryKeyValue, TValue rowData, bool preventDataUpdate)

Parameters

Type	Name	Description
System.Object	primaryKeyValue	The primary key value of the row to be updated.
TValue	rowData	The new data to be used to update the row.
System.Boolean	preventDataUpdate	Determines whether to update the data source or only refresh the UI.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

A primary key column must be specified using the IsPrimaryKey property.

Examples

<button id="SetRowData" @onclick="DataHandler">SetRowData</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task DataHandler()
   {
        var rowData = new Order() { OrderID = 1006, CustomerID = "ALFKI", OrderDate = new DateTime(1995, 03, 25), Freight = 25.7 * 2 };
        await grid.SetRowDataAsync(1006,rowData,true);
   }
}

ShouldRender()

Declaration

protected override bool ShouldRender()

Returns

Type
System.Boolean

ShowColumnAsync(String, String)

Show a column in the grid by its Field or HeaderText property.

Declaration

public Task ShowColumnAsync(string columnName, string showBy = "HeaderText")

Parameters

Type	Name	Description
System.String	columnName	The name of the column to be shown in the grid.
System.String	showBy	Specifies whether the column name is shown by its Field or HeaderText. Default value is HeaderText.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation of showing specified column in the grid.

Remarks

You can dynamically show hidden column in the grid.

Examples

<button id="ShowColumn" @onclick="ColumnHandler">ShowColumn</button>
<button id="ShowColumnByField" @onclick="ColumnFieldHandler">ShowColumnByField</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ColumnHandler()
   {
        await grid.ShowColumnAsync("Ship Country");
   }
   private async Task ColumnFieldHandler()
   {
        await grid.ShowColumnAsync("ShipCountry","Field");   //pass second param as "Field" to show using field name.
   }
}

ShowColumnsAsync(String[], String)

Show one or more columns in the grid by their Field or HeaderText.

Declaration

public Task ShowColumnsAsync(string[] columnNames, string showBy = "HeaderText")

Parameters

Type	Name	Description
System.String[]	columnNames	The list of name of the columns to be shown in the grid.
System.String	showBy	Specifies whether the column name is shown by its Field or HeaderText. Default value is HeaderText.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation of showing the specified columns in the grid.

Remarks

You can dynamically show hidden columns in the grid.

Examples

<button id="ShowColumns" @onclick="ColumnHandler">ShowColumns</button>
<button id="ShowColumnsByField" @onclick="ColumnFieldHandler">ShowColumnsByField</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ColumnHandler()
   {
        var columns = new List<string>() { "Freight", "Ship Country" };
        await grid.ShowColumnsAsync(columns.ToArray());
   }
   private async Task ColumnFieldHandler()
   {
        var columns = new List<string>() { "Freight", "ShipCountry" };
        await grid.ShowColumnsAsync(columns.ToArray(),"Field");   //pass second param as "Field" to show using field name.
   }
}

ShowSpinnerAsync()

Shows a spinner on the grid.

Declaration

public Task ShowSpinnerAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

By default, the grid shows the spinner for all its actions. You can use ShowSpinnerAsync() method to show the spinner at your desired time.

Examples

<button id="ShowSpinner" @onclick="ShowSpinner">ShowSpinner</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task ShowSpinner()
   {
        await grid.ShowSpinnerAsync();
   }
}

SortColumnAsync(String, SortDirection, Nullable<Boolean>)

Sorts a column with the given options.

Declaration

public Task SortColumnAsync(string columnName, SortDirection direction, Nullable<bool> isMultiSort = null)

Parameters

Type	Name	Description
System.String	columnName	The field name of the column to sort.
SortDirection	direction	The direction of the sort which is Ascending to sort in ascending order, or Descending to sort in descending order.
System.Nullable<System.Boolean>	isMultiSort	Specifies whether it is a multi-sorting operation.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation of sorting the column.

Remarks

This method will only sort the column if the AllowSorting is set to true.

Examples

<button id="SortColumn" @onclick="SortHandler">SortColumn</button>
<SfGrid @ref="grid" AllowSorting="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task SortHandler()
   {
        await grid.SortColumnAsync("CustomerID", SortDirection.Descending);
   }
}

SortColumnsAsync(List<SortColumn>)

Sorts a list of columns with the given options.

Declaration

public Task SortColumnsAsync(List<SortColumn> columns)

Parameters

Type	Name	Description
System.Collections.Generic.List<SortColumn>	columns	A list of the columns to be sorted.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task representing the asynchronous operation of sorting the column.

Remarks

This method will only sort the column if the AllowSorting is set to true.

Examples

<button id="SortColumns" @onclick="SortHandler">SortColumns</button>
<SfGrid @ref="grid" AllowSorting="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   public List<SortColumn> sortColumns { get; set; } = new List<SortColumn>();
   private async Task SortHandler()
   {
        sortColumns.Add(new() { Field = nameof(Order.Freight), Direction = SortDirection.Descending });
        sortColumns.Add(new() { Field = nameof(Order.ShipCountry), Direction = SortDirection.Ascending});
        await grid.SortColumnsAsync(sortColumns);
   }
}

SortColumnsAsync(List<SortColumn>, Boolean)

Clears the previous sorted columns and sorts a list of columns with the given options.

Declaration

public Task SortColumnsAsync(List<SortColumn> columns, bool clearPreviousSort)

Parameters

Type	Name	Description
System.Collections.Generic.List<SortColumn>	columns	A list of the columns to be sorted.
System.Boolean	clearPreviousSort	A boolean value that specifies whether to clear the previous sort.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task representing the asynchronous operation of sorting the columns.

Remarks

This method will only sort the columns if the AllowSorting is set to true.

Examples

<button id="SortColumns" @onclick="SortHandler">SortColumns</button>
<SfGrid @ref="grid" AllowSorting="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   public List<SortColumn> sortColumns { get; set; } = new List<SortColumn>();
   private async Task SortHandler()
   {
        sortColumns.Add(new() { Field = nameof(Order.Freight), Direction = SortDirection.Descending });
        sortColumns.Add(new() { Field = nameof(Order.ShipCountry), Direction = SortDirection.Ascending});
        await grid.SortColumnsAsync(sortColumns,true);
   }
}

StartEditAsync()

Starts editing of the currently selected row in the grid.

Declaration

public Task StartEditAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method can only be invoked if the AllowEditing is set to true and the Mode is not set to Batch. At least one row must be selected before invoking this method. If no rows are selected, an alert message is displayed.

Examples

<button id="BeginEdit" @onclick="EditHandler">BeginEdit</button>
<SfGrid @ref="grid" DataSource="@Orders">
<GridEditSettings AllowEditing="true"/>
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task EditHandler()
   {
        await grid.StartEditAsync();  
   }
}

UngroupColumnAsync(String)

Ungroups a previously grouped column by column name.

Declaration

public Task UngroupColumnAsync(string columnName)

Parameters

Type	Name	Description
System.String	columnName	The name of the column to ungroup.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous ungrouping operation.

Remarks

If the specified columnName is not currently grouped, this method will not do anything.

Examples

<button id="UngroupColumn" @onclick="UnGrouping">UngroupColumn</button>
<SfGrid @ref="grid" AllowGrouping="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task UnGrouping()
   {
        await grid.UngroupColumnAsync("ShipCountry");  
   }
}

UpdateBatchRowAsync(TValue)

Updates the edited fields in batch mode while editing.

Declaration

public Task UpdateBatchRowAsync(TValue Data)

Parameters

Type	Name	Description
TValue	Data	The data to be updated in the batch mode.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous update operation.

Remarks

This method updates the cell if the Mode is set to Batch.

Examples

<button id="UpdateBatchRow" @onclick="DataHandler">UpdateBatchRow</button>
<SfGrid @ref="grid" DataSource="@Orders">
<GridEditSettings AllowAdding="true" AllowEditing="true" Mode="EditMode.Batch"></GridEditSettings>
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task DataHandler()
   {
        var BatchEdit = await this.grid.GetBatchChangesAsync();
        List<Order> ChangedRecord = BatchEdit.ChangedRecords.ToList();
        ChangedRecord[0].Freight = 100;
        await grid.UpdateBatchRowAsync(ChangedRecord[0]);
   }
}

UpdateCellAsync(Int32, String, Object)

Updates the specified cell with the given value without changing it into edited state.

Declaration

public Task UpdateCellAsync(int rowIndex, string field, object value)

Parameters

Type	Name	Description
System.Int32	rowIndex	The index of the row containing the cell to update.
System.String	field	The name of the column containing the cell to update.
System.Object	value	The new value for the cell.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Taskrepresenting the cell updation operation.

Remarks

This method will only update the cell if the Mode is set as Batch

Examples

<button id="UpdateCell" @onclick="CellHandler">UpdateCell</button>
<SfGrid @ref="grid" DataSource="@Orders">
<GridEditSettings  Mode="EditMode.Batch"></GridEditSettings>
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task CellHandler()
   {
        await grid.UpdateCellAsync(1, "Freight", 25.6);  
   }
}

UpdateChildProperties(String, Object)

Declaration

public void UpdateChildProperties(string key, object value)

Parameters

Type	Name	Description
System.String	key
System.Object	value

UpdateExternalMessageAsync(String)

Defines the text of external message.

Declaration

public Task UpdateExternalMessageAsync(string message)

Parameters

Type	Name	Description
System.String	message	Specifies the externam message.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

UpdatePageSizeAsync(Int32)

Used to update the page size of the Grid to change the number of rows that can be rendered on a current view port.

Declaration

public Task UpdatePageSizeAsync(int pageSize)

Parameters

Type	Name	Description
System.Int32	pageSize	The number of items to be shown on a page.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

Remarks

By changing the page size, the Grid Pager component dynamically updates the total number of pages according to the given page size and updates the UI.

Examples

<button @onclick="HandleButtonClick">UpdatePageSize</button>
<SfGrid @ref="grid" AllowPaging="true" DataSource="@Orders">
 ........
</SfGrid>
@code{
    SfGrid<Order> grid;
   private async Task HandleButtonClick()
   {
     await grid.UpdatePageSizeAsync(4);// pass the page size here.    
   }
}

UpdatePageSizeAsync(Int32, Int32)

Updates the PageSize dynamically with the given height and refreshes the virtualization enabled grid based on the updated page size.

Declaration

public Task UpdatePageSizeAsync(int height, int rowHeight = 0)

Parameters

Type	Name	Description
System.Int32	height	The height of the parent or grid container.
System.Int32	rowHeight	The height of the grid row used to calculate the page size.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous upadte pagsize operation.

Remarks

The EnableVirtualization must be set to true to refresh the grid content based on the given height.

Examples

<button id="UpdatePageSize" @onclick="UpdatePageSize">UpdatePageSize</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task UpdatePageSize()
   {
       await grid.UpdatePageSizeAsync(600,30);
   }
}

UpdateRowAsync(Int32, TValue)

Updates the specified row by given values without changing into an edited state.

Declaration

public Task UpdateRowAsync(int index, TValue data)

Parameters

Type	Name	Description
System.Int32	index	The index of the row to be updated.
TValue	data	The updated data for the specified row.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous updation operation.

Remarks

The given updated data will replace the target record completely. Property value comparison will not be performed to see changed values.

Examples

<button id="UpdateRow" @onclick="RowHandler">UpdateRow</button>
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code{
   SfGrid<Order> grid;
   private async Task RowHandler()
   {
        var data = new Order() { OrderID=1007, CustomerID = "BOLID", OrderDate = new DateTime(1995, 05, 15), Freight = 25.7 * 2 };
        await grid.UpdateRowAsync(6, data);  
   }
}

See Also

SfDataManager