Class GridColumn

Configures grid columm.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfDataBoundComponent
GridColumn
GridForeignColumn<TValue>
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Grids
Assembly: Syncfusion.Blazor.dll
Syntax
public class GridColumn : SfDataBoundComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable, IGridColumn

Constructors

GridColumn()

Declaration
public GridColumn()

Properties

AllowAdding

If AllowAdding set to false, then it disables add operation of a particular column. By default all columns are editable.

Declaration
[Parameter]
[JsonPropertyName("allowAdding")]
public bool AllowAdding { get; set; }
Property Value
Type
bool

AllowEditing

If AllowEditing set to false, then it disables editing of a particular column. By default all columns are editable.

Declaration
[Parameter]
[JsonPropertyName("allowEditing")]
public bool AllowEditing { get; set; }
Property Value
Type
bool

AllowFiltering

If AllowFiltering set to false, then it disables filtering option and filter bar element of a particular column. By default all columns are filterable.

Declaration
[Parameter]
[JsonPropertyName("allowFiltering")]
public bool AllowFiltering { get; set; }
Property Value
Type
bool

AllowGrouping

If AllowGrouping set to false, then it disables grouping of a particular column. By default all columns are groupable.

Declaration
[Parameter]
[JsonPropertyName("allowGrouping")]
public bool AllowGrouping { get; set; }
Property Value
Type
bool

AllowReordering

If AllowReordering set to false, then it disables reorder of a particular column. By default all columns can be reorder.

Declaration
[Parameter]
[JsonPropertyName("allowReordering")]
public bool AllowReordering { get; set; }
Property Value
Type
bool

AllowResizing

If AllowResizing set to false, it disables resize option of a particular column.

Declaration
[Parameter]
[JsonPropertyName("allowResizing")]
public bool AllowResizing { get; set; }
Property Value
Type
bool

AllowSearching

If AllowSearching set to false, then it disables searching of a particular column. By default all columns are searchable.

Declaration
[Parameter]
[JsonPropertyName("allowSearching")]
public bool AllowSearching { get; set; }
Property Value
Type
bool

AllowSorting

If AllowSorting set to false, then it disables sorting option of a particular column. By default all columns are sortable.

Declaration
[Parameter]
[JsonPropertyName("allowSorting")]
public bool AllowSorting { get; set; }
Property Value
Type
bool

AutoFit

If AutoFit set to true, then the particular column content width will be adjusted based on its content in the initial rendering itself. Setting this property as true is equivalent to calling AutoFitColumns method in the DataBound event.

Declaration
[Parameter]
[JsonPropertyName("autoFit")]
public bool AutoFit { get; set; }
Property Value
Type
bool

ClipMode

Defines the cell content's overflow mode. The available modes are.

  • ClipTruncates the cell content when it overflows its area.
  • EllipsisDisplays ellipsis when the cell content overflows its area.
  • EllipsisWithTooltipDisplays ellipsis when the cell content overflows its area also it will display tooltip while hover on ellipsis applied cell.
Declaration
[Parameter]
[JsonPropertyName("clipMode")]
[JsonConverter(typeof(JsonStringEnumConverter))]
public ClipMode ClipMode { get; set; }
Property Value
Type
ClipMode

ColumnData

Provides the data for the grid columns.

Declaration
[JsonIgnore]
public object ColumnData { get; set; }
Property Value
Type
object

Columns

Used to render multiple header rows(stacked headers) on the Grid header.

Declaration
[Parameter]
[JsonPropertyName("columns")]
public List<GridColumn> Columns { get; set; }
Property Value
Type
List<GridColumn>

Commands

Commands provides an option to display command buttons in every cell. Use GridCommandColumn component to declare command columns.

Declaration
[Parameter]
[JsonPropertyName("commands")]
public List<GridCommandColumn> Commands { get; set; }
Property Value
Type
List<GridCommandColumn>

CustomAttributes

The CSS styles and attributes of the content cells of a particular column can be customized.

Declaration
[Parameter]
[JsonPropertyName("customAttributes")]
public IDictionary<string, object> CustomAttributes { get; set; }
Property Value
Type
IDictionary<string, object>

DefaultValue

Defines default values for the component when adding a new record to the Grid.

Declaration
[Parameter]
[JsonPropertyName("defaultValue")]
public object DefaultValue { get; set; }
Property Value
Type
object
Remarks

If no default value is provided then the default value of the model property type will be used as initial value.

DisableHtmlEncode

If DisableHtmlEncode is set to false, it disables the encodes the HTML of the header and content cells.

Declaration
[Parameter]
[JsonPropertyName("disableHtmlEncode")]
public bool DisableHtmlEncode { get; set; }
Property Value
Type
bool

DisplayAsCheckBox

If DisplayAsCheckBox is set to true, it displays the column value as a check box instead of Boolean value.

Declaration
[Parameter]
[JsonPropertyName("displayAsCheckBox")]
public bool DisplayAsCheckBox { get; set; }
Property Value
Type
bool

EditTemplate

Defines the cell edit template that used as editor for a particular column.

Declaration
[Parameter]
[JsonIgnore]
[JsonPropertyName("editTemplate")]
public RenderFragment<object> EditTemplate { get; set; }
Property Value
Type
RenderFragment<object>
Remarks

The parameters passed to the templates can be accessed using implicit parameter named context. The context is of type TValue.

EditType

Gets or sets the type of editor component to be rendered in the edit form.

Declaration
[Parameter]
[JsonPropertyName("editType")]
public EditType EditType { get; set; }
Property Value
Type Description
EditType

One of the EditType enumeration that specifies the editor component to be rendered in the edit form. If 

EditType
is not provided then the EditType will inferred from the property type of the TValue. If TValue is ExpandoObject/ DynamicObject, then the EditType will inferred from the first data row. If 
EditType
is not mentioned then the below components will rendered for the corresponding mentioned column types. For String type column, SfTextBox will rendered in the edit form. For Date and DateTime type columns, SfDatePicker<TValue> will rendered in the edit form. For DateOnly type column, SfDatePicker<TValue> will rendered in the edit form. For TimeOnly type column, SfTimePicker<TValue> will rendered in the edit form. For Boolean type column, SfCheckBox<TChecked> will rendered in the edit form. For Number type column, SfNumericTextBox<TValue> will rendered in the edit form.
Remarks

The 

EditType
property can be set to one of the following values: DefaultEdit: SfTextBox will rendered in the edit form DropDownEdit: SfDropDownList<TValue, TItem> will rendered in the edit form. BooleanEdit: SfCheckBox<TChecked> will rendered in the edit form. DatePickerEdit: SfDatePicker<TValue> will rendered in the edit form. DateTimePickerEdit: SfDateTimePicker<TValue> will rendered in the edit form. NumericEdit: SfNumericTextBox<TValue> will rendered in the edit form. TimePickerEdit: SfTimePicker<TValue> will rendered in the edit form.
Examples
<SfGrid DataSource="@Orders">
 <GridColumns>
<GridColumn Field=@nameof(Order.Freight) EditType="EditType.NumericEdit" ></GridColumn>
 </GridColumns>
</SfGrid>

EditorSettings

Defines the object to customize default cell editors. The following types can be used to customize default editors.

Declaration
[Parameter]
[JsonPropertyName("editorSettings")]
[JsonIgnore]
public IEditorSettings EditorSettings { get; set; }
Property Value
Type
IEditorSettings

EnableGroupByFormat

If EnableGroupByFormat set to true, then it groups the particular column by formatted values. By default columns are group by format.

Declaration
[Parameter]
[JsonPropertyName("enableGroupByFormat")]
public bool EnableGroupByFormat { get; set; }
Property Value
Type
bool

Field

Defines the field name of column which is mapped with mapping name of DataSource. The bounded columns can be sort, filter and group etc., If the Field name contains “dot”, then it is considered as complex binding.

Declaration
[Parameter]
[JsonPropertyName("field")]
public string Field { get; set; }
Property Value
Type
string

FilterEditorSettings

Defines a configuration option used to customize the default filter component rendered in the filter menu dialog and the Excel-like filter dialog of the Grid. The following filter parameter types can be assigned:

Declaration
[Parameter]
[JsonPropertyName("filterEditorSettings")]
[JsonIgnore]
public IFilterSettings FilterEditorSettings { get; set; }
Property Value
Type
IFilterSettings

FilterItemTemplate

Defines the Checkbox Item template that renders customized element/value in each checkbox of the Filter column.

Declaration
[Parameter]
[JsonPropertyName("filterItemTemplate")]
[JsonIgnore]
public RenderFragment<object> FilterItemTemplate { get; set; }
Property Value
Type
RenderFragment<object>
Remarks

The parameters passed to the templates can be accessed using implicit parameter named context. The context is of type FilterItemTemplateContext.

FilterTemplate

Defines the filter template that used as filter UI for a particular column in FilterBar and Menu.

Declaration
[Parameter]
[JsonIgnore]
[JsonPropertyName("filterTemplate")]
public RenderFragment<object> FilterTemplate { get; set; }
Property Value
Type
RenderFragment<object>
Remarks

The parameters passed to the templates can be accessed using implicit parameter named context. The context is of type PredicateModel.

FixedColumn

Gets or sets a value indicating whether the column should be fixed at the beginning of the Grid. A fixed column cannot be moved through reordering or grouping actions.

Declaration
[Parameter]
[JsonPropertyName("fixedColumn")]
public bool FixedColumn { get; set; }
Property Value
Type Description
bool

true if the column is fixed; otherwise, false. The default value is false.
Remarks

When set to true, the column remains fixed at the start of the grid, in the order specified by the GridColumn collection. Fixed columns are unaffected by reordering or grouping actions, and multiple columns can be fixed, appearing in the order they are defined in the collection. The fixed column feature is not compatible with the frozen column feature.

ForeignKeyField

Defines the mapping column name of the foreign data source. If it is not defined then the Field will be considered as mapping column name.

Declaration
[Parameter]
[JsonPropertyName("foreignKeyField")]
public string ForeignKeyField { get; set; }
Property Value
Type
string

ForeignKeyValue

Defines the display column name from the foreign data source which will be obtained from comparing local and foreign data.

Declaration
[Parameter]
[JsonPropertyName("foreignKeyValue")]
public string ForeignKeyValue { get; set; }
Property Value
Type
string

Format

It is used to change display value with the given format and does not affect the original data. Gets the format from the user which can be standard or custom formats.

Declaration
[Parameter]
[JsonPropertyName("format")]
public string Format { get; set; }
Property Value
Type
string

Freeze

Defines which side the column need to freeze.

Declaration
[Parameter]
[JsonPropertyName("freeze")]
[JsonConverter(typeof(JsonStringEnumConverter))]
public FreezeDirection Freeze { get; set; }
Property Value
Type
FreezeDirection

HeaderTemplate

Defines the column template which is used to add customized element in the column header.

Declaration
[Parameter]
[JsonIgnore]
[JsonPropertyName("headerTemplate")]
public RenderFragment<object> HeaderTemplate { get; set; }
Property Value
Type
RenderFragment<object>
Remarks

The parameters passed to the templates can be accessed using implicit parameter named context. The context is of type GridColumn.

HeaderText

Defines the header text of column which is used to display in column header. If HeaderText is not defined, then field name value will be assigned to header text.

Declaration
[Parameter]
[JsonPropertyName("headerText")]
public string HeaderText { get; set; }
Property Value
Type
string

HeaderTextAlign

Define the alignment of column header which is used to align the text of column header.

Declaration
[Parameter]
[JsonPropertyName("headerTextAlign")]
[JsonConverter(typeof(JsonStringEnumConverter))]
public TextAlign HeaderTextAlign { get; set; }
Property Value
Type
TextAlign

HideAtMedia

Column visibility can change based on its Media Queries. HideAtMedia accepts only valid Media Queries.

Declaration
[Parameter]
[JsonPropertyName("hideAtMedia")]
public string HideAtMedia { get; set; }
Property Value
Type
string

Index

Gets the unique identifier value of the column. It is used to get the object.

Declaration
[Parameter]
[JsonPropertyName("index")]
public int Index { get; set; }
Property Value
Type
int

IsFrozen

You can use this property to freeze selected columns in grid.

Declaration
[Parameter]
[JsonPropertyName("isFrozen")]
public bool IsFrozen { get; set; }
Property Value
Type
bool

IsIdentity

If IsIdentity is set to true, then this column is considered as identity column. This column will be in disabled state in add form.

Declaration
[Parameter]
[JsonPropertyName("isIdentity")]
public bool IsIdentity { get; set; }
Property Value
Type
bool

IsPrimaryKey

If IsPrimaryKey is set to true, considers this column as the primary key constraint.

Declaration
[Parameter]
[JsonPropertyName("isPrimaryKey")]
public bool IsPrimaryKey { get; set; }
Property Value
Type
bool

MaxWidth

Defines the maximum width of the column in pixel or percentage, which will restrict resizing beyond this pixel or percentage.

Declaration
[Parameter]
[JsonPropertyName("maxWidth")]
public string MaxWidth { get; set; }
Property Value
Type
string

MinWidth

Defines the minimum width of the column in pixels or percentage.

Declaration
[Parameter]
[JsonPropertyName("minWidth")]
public string MinWidth { get; set; }
Property Value
Type
string

ShowColumnMenu

If ShowColumnMenu set to false, then it disable the column menu of a particular column. By default column menu will show for all columns.

Declaration
[Parameter]
[JsonPropertyName("showColumnMenu")]
public bool ShowColumnMenu { get; set; }
Property Value
Type
bool

ShowInColumnChooser

If ShowInColumnChooser set to false, then hides the particular column in column chooser. By default all columns are displayed in column chooser.

Declaration
[Parameter]
[JsonPropertyName("showInColumnChooser")]
public bool ShowInColumnChooser { get; set; }
Property Value
Type
bool

SortComparer

Gets or sets the custom sort comparer function to implement own sort logic for a particular column. For foreign key column with local data source a sort comparer will be assigned by default to sort it by text(ForeignKeyValue) instead of the underlying field value.

Declaration
[Parameter]
[JsonPropertyName("sortComparer")]
[JsonIgnore]
public IComparer<object> SortComparer { get; set; }
Property Value
Type
IComparer<object>
Remarks

Custom sort comparer cannot be used with remote data and Entity framework data source.

Template

Defines the column template that renders customized element in each cell of the column.

Declaration
[Parameter]
[JsonPropertyName("template")]
[JsonIgnore]
public RenderFragment<object> Template { get; set; }
Property Value
Type
RenderFragment<object>
Remarks

The parameters passed to the templates can be accessed using implicit parameter named context. The context is of type TValue.

TextAlign

Defines the alignment of the column in both header and content cells.

Declaration
[Parameter]
[JsonPropertyName("textAlign")]
[JsonConverter(typeof(JsonStringEnumConverter))]
public TextAlign TextAlign { get; set; }
Property Value
Type
TextAlign

Type

Gets or sets the column type of the GridColumn. It determines how the data in the column will be displayed based on the specified type.

Declaration
[Parameter]
[JsonPropertyName("type")]
public ColumnType Type { get; set; }
Property Value
Type Description
ColumnType

One of the ColumnType enumerations that specify the column type. If the column type is not explicitly defined, the 

Type
will be inferred from the property type of TValue. If TValue is ExpandoObject or DynamicObject, the 
Type
will be inferred from the first row of the grid data.
Remarks

The 

Type
property can be set to one of the following values: String: The column will display the string values in the UI. For example “Alfki”, “UK”. Number: The column will display the numeric values such as int, int?, float, double, decimal etc. For example 2, 2.5, 3.33 Integer: Displays integer values from int struct. Example: 5, 123 Double: Displays double values from double struct. Example: 3.33, 45.567 Long: Displays long integer values from long struct. Example: 255486129307 Decimal: Displays decimal values from decimal struct. Example: 123.45M Boolean: The column will display the boolean values such as true or false. Date and DateTime: The column will display the datetime value from the DateTime and DateTimeOffset struct. DateOnly: The column will display the date value from DateOnly struct. For example 2/1/2023 TimeOnly: The column will display the time value from TimeOnly struct. For example 11:15 AM CheckBox: Display the checkbox for selection purpose. No data operation is assosiated with this column. This 
Type
property is mainly used for ExpandoObject and DynamicObject.
Examples
 <SfGrid DataSource="@Orders">
  <GridColumns>
 <GridColumn Field=@nameof(Order.OrderDate) Type="ColumnType.DateOnly"></GridColumn>
  </GridColumns>
 </SfGrid>
@code{
public class Order
{
     public DateOnly? OrderDate { get; set; }
}
}

Uid

Gets the unique identifier value of the column. It is used to get the object.

Declaration
[Parameter]
[JsonPropertyName("uid")]
public string Uid { get; set; }
Property Value
Type
string

ValidationRules

Defines rules to validate data before creating and updating. The validation rules can be set as instance of ValidationRules.

Declaration
[Parameter]
[JsonPropertyName("validationRules")]
public ValidationRules ValidationRules { get; set; }
Property Value
Type
ValidationRules

Visible

If Visible is set to false, hides the particular column. By default, all columns are displayed.

Declaration
[Parameter]
[JsonPropertyName("visible")]
public bool Visible { get; set; }
Property Value
Type
bool

Width

Defines the width of the column in pixels or percentage.

Declaration
[Parameter]
[JsonPropertyName("width")]
public string Width { get; set; }
Property Value
Type
string

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

GetData(DataManagerRequest)

Performs data operation in the foreign key column based on the given query and returns data.

Declaration
public virtual Task<object> GetData(DataManagerRequest dataManagerRequest)
Parameters
Type Name Description
DataManagerRequest dataManagerRequest

Query value to be used for data fetching.
Returns
Type Description
Task<object>

object.

GetForeignData()

Get Foreign Data.

Declaration
public virtual object GetForeignData()
Returns
Type
object

IsForeignColumn()

Returns true if the column is foreign key column.

Declaration
public virtual bool IsForeignColumn()
Returns
Type Description
bool

bool.

IsForeignKeyField()

Returns true if the Foreignkeyfield and Field property is not same is foreign key column.

Declaration
public virtual bool IsForeignKeyField()
Returns
Type Description
bool

bool.

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
Task

A System.Threading.Tasks.Task representing any asynchronous operation.
Overrides

OnParametersSetAsync()

Declaration
protected override Task OnParametersSetAsync()
Returns
Type
Task
Overrides

SetUid(string)

Set column uid.

Declaration
public void SetUid(string uid)
Parameters
Type Name Description
string uid

Value to be set in the Uid property.

SetVisibility(bool)

Set column visibility.

Declaration
public void SetVisibility(bool visibility)
Parameters
Type Name Description
bool visibility

Value to be set in the Visible property.

SetWidth(string)

Set column width.

Declaration
public void SetWidth(string width)
Parameters
Type Name Description
string width

Value to be set in the Width property.

Implements