Class TreeGridColumn
Configures Tree Grid column.
Inherited Members
Namespace: Syncfusion.Blazor.TreeGrid
Assembly: Syncfusion.Blazor.dll
Syntax
public class TreeGridColumn : SfDataBoundComponent, ISfCircularComponent
Constructors
TreeGridColumn()
Initializes a new instance of the TreeGridColumn class.
Declaration
public TreeGridColumn()
Properties
AllowAdding
If AllowAdding set to false, then it disables add operation of a particular column. By default all columns are editable.
Declaration
public bool AllowAdding { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if adding is allowed; otherwise, false. The default value is true. |
AllowEditing
If AllowEditing set to false, then it disables editing of a particular column. By default all columns are editable.
Declaration
public bool AllowEditing { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if editing is allowed; otherwise, false. The default value is true. |
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
public bool AllowFiltering { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if filtering is allowed; otherwise, false. The default value is true. |
AllowReordering
If AllowReordering set to false, then it disables reorder of a particular column. By default all columns can be reorder.
Declaration
public bool AllowReordering { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if reordering is allowed; otherwise, false. The default value is true. |
AllowResizing
If AllowResizing set to false, it disables resize option of a particular column.
Declaration
public bool AllowResizing { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if resizing is allowed; otherwise, false. The default value is true. |
AllowSorting
If AllowSorting set to false, then it disables sorting option of a particular column. By default all columns are sortable.
Declaration
public bool AllowSorting { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if sorting is allowed; otherwise, false. The default value is true. |
ClipMode
Defines the cell content's overflow mode.
Declaration
public ClipMode ClipMode { get; set; }
Property Value
Type | Description |
---|---|
ClipMode | One of the ClipMode enumeration that specifies how the content is clipped. The default value is ClipMode.Ellipsis. |
Columns
Used to render multiple header rows (stacked headers) on TreeGrid header.
Declaration
public List<TreeGridColumn> Columns { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<TreeGridColumn> | A list of TreeGridColumn instances. |
Remarks
Stacked headers allow grouping columns under a common header. This feature enables better organization of columns where multiple columns can be grouped to reflect a hierarchy of information. It is useful to represent complex data structures.
Examples
<SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId">
<TreeGridColumns>
<TreeGridColumn HeaderText="Task Details" Columns="@new List<TreeGridColumn> {
new sTreeGridColumn { Field = "TaskName", HeaderText = "Task Name" },
new TreeGridColumn { Field = "StartDate", HeaderText = "Start Date", Format = "yyyy-MM-dd" }
}">
</TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
Commands
Commands provides an option to display command buttons in every cell.
Declaration
public List<TreeGridCommandColumn> Commands { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<TreeGridCommandColumn> | A list of TreeGridCommandColumn instances. |
Examples
<SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId">
<TreeGridColumns>
<TreeGridColumn HeaderText="Manage Records" Width="150" Commands="@new List<TreeGridCommandColumn> {
new TreeGridCommandColumn { Type = CommandButtonType.Edit, ButtonOption = new CommandButtonOptions { IconCss = "e-icons e-edit", CssClass = "e-flat" } },
new TreeGridCommandColumn { Type = CommandButtonType.Delete, ButtonOption = new CommandButtonOptions { IconCss = "e-icons e-delete", CssClass = "e-flat" } },
new TreeGridCommandColumn { Type = CommandButtonType.Save, ButtonOption = new CommandButtonOptions { IconCss = "e-icons e-save", CssClass = "e-flat" } },
new TreeGridCommandColumn { Type = CommandButtonType.Cancel, ButtonOption = new CommandButtonOptions { IconCss = "e-icons e-cancel-icon", CssClass = "e-flat" } }
}">
</TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
CustomAttributes
The CSS styles and attributes of the content cells of a particular column can be customized.
Declaration
public IDictionary<string, object> CustomAttributes { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.IDictionary<System.String, System.Object> | A dictionary of custom CSS styles and attributes. |
Examples
<SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId">
<TreeGridColumns>
<TreeGridColumn Field="@nameof(Order.OrderDate)" CustomAttributes="@new Dictionary<string, object> { { "class", "e-attr" } }" Width="130">
</TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
DefaultValue
Defines default values for the component when adding a new record to the TreeGrid.
Declaration
public object DefaultValue { get; set; }
Property Value
Type | Description |
---|---|
System.Object | The default value for new records. |
DisableHtmlEncode
Gets or sets a value indicating whether HTML encoding is disabled for the header and content cells. When enabled, the string values are not encoded to HTML, allowing raw HTML content to be rendered in the header and content cells.
Declaration
public bool DisableHtmlEncode { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
DisplayAsCheckBox
If DisplayAsCheckBox is set to true, it displays the column value as a check box instead of Boolean value.
Declaration
public bool DisplayAsCheckBox { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if checkboxes are displayed instead of boolean values; otherwise, false. The default value is false. |
EditorSettings
Defines the object to customize default cell editors.
Declaration
public IEditorSettings EditorSettings { get; set; }
Property Value
Type | Description |
---|---|
IEditorSettings | An instance of IEditorSettings.
The following types can be used to customize default
editors. |
EditTemplate
Defines the cell edit template that is used as editor for a particular column.
Declaration
public RenderFragment<object> EditTemplate { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.RenderFragment<System.Object> | The edit template as a render fragment of System.Object. |
EditType
Gets or sets the type of component for editing.
Declaration
public EditType EditType { get; set; }
Property Value
Type | Description |
---|---|
EditType | One of the EditType enumeration that specifies the edit type used for this column. The default type is Syncfusion.Blazor.Grids.EditType.DefaultEdit which renders input textbox. |
Field
Defines the field name of column which is mapped with mapping name of DataSource.
Declaration
public string Field { get; set; }
Property Value
Type | Description |
---|---|
System.String | The field name as a System.String. |
FilterItemTemplate
Defines the Checkbox Item template that renders customized element/value in each checkbox of the Filter column.
Declaration
public RenderFragment<object> FilterItemTemplate { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.RenderFragment<System.Object> | The template as a render fragment of System.Object. |
Remarks
The parameters passed to the templates can be accessed using implicit parameter named context
.
The context is of type FilterItemTemplateContext.
FilterSettings
Defines the filter options to customize filtering for the particular column.
Declaration
public FilterSettings FilterSettings { get; set; }
Property Value
Type | Description |
---|---|
FilterSettings | An instance of FilterSettings. |
FilterTemplate
Defines the filter template/UI that is used as filter for a particular column.
Declaration
public RenderFragment<object> FilterTemplate { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.RenderFragment<System.Object> | The filter template as a render fragment of System.Object. |
Format
It is used to change display value with the given format and does not affect the original data.
Declaration
public string Format { get; set; }
Property Value
Type | Description |
---|---|
System.String | The format as a System.String. |
Examples
<SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId">
<TreeGridColumns>
<TreeGridColumn Field="@nameof(OrderData.Freight)" HeaderText="Freight" Format="C2" Width="130">
</TreeGridColumn>
<TreeGridColumn Field="@nameof(OrderData.OrderDate)" HeaderText="Order Date" Format="d" Type="ColumnType.Date" Width="130">
</TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
Formatter
Defines the method which is used to achieve custom formatting from an external function. This function triggers before rendering of each cell.
Declaration
public object Formatter { get; set; }
Property Value
Type |
---|
System.Object |
Freeze
Gets or sets a value that indicates which side column needs to freeze.
Declaration
public FreezeDirection Freeze { get; set; }
Property Value
Type | Description |
---|---|
FreezeDirection | One of the FreezeDirection enumeration that specifies in which direction the columns is frozen. The default mode is Syncfusion.Blazor.Grids.FreezeDirection.Left. |
Remarks
Columns can be frozen both at left and right side of tree grid content.Columns in the center part of tree grid content are scrollable.
Examples
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" >
<TreeGridColumns>
<TreeGridColumn Field="TaskId" HeaderText="Task ID"
Freeze="FreezeDirection.Left" IsFrozen="true" Width="80"
TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="TaskName" Freeze="FreezeDirection.Right" IsFrozen="true"
HeaderText="Task Name" Width="160"></TreeGridColumn>
...
</TreeGridColumns>
</SfTreeGrid>
HeaderTemplate
Defines the header template as string or HTML element ID which is used to add customized element in the column header.
Declaration
public RenderFragment<object> HeaderTemplate { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.RenderFragment<System.Object> | The header template as a render fragment of System.Object. |
HeaderText
Defines the header text of column which is used to display in column header.
Declaration
public string HeaderText { get; set; }
Property Value
Type | Description |
---|---|
System.String | The header text as a System.String. |
HeaderTextAlign
Gets or sets the alignment of the column header text.
Declaration
public TextAlign HeaderTextAlign { get; set; }
Property Value
Type | Description |
---|---|
TextAlign | One of the TextAlign enumeration that specifies the alignment of the column header text. |
HideAtMedia
Column visibility can change based on Media Queries
.
Declaration
public string HideAtMedia { get; set; }
Property Value
Type | Description |
---|---|
System.String | The media query as a System.String. |
Index
Gets the unique identifier value of the column. It is used to get the column object.
Declaration
public int Index { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 | The unique identifier as an System.Int32. |
IsFrozen
You can use this property to freeze selected columns in grid.
Declaration
public bool IsFrozen { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the column is frozen; otherwise, false. The default value is false. |
IsIdentity
If IsIdentity is set to true, then this column is considered as identity column.
Declaration
public bool IsIdentity { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the column is an identity column; otherwise, false. The default value is false. |
IsPrimaryKey
If IsPrimaryKey is set to true, considers this column as the primary key constraint.
Declaration
public bool IsPrimaryKey { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the column is a primary key; otherwise, false. The default value is false. |
LockColumn
If LockColumn is set to true, then it disables Reordering of a particular column. The locked column will be moved to first position.
Declaration
public bool LockColumn { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the column is locked; otherwise, false. The default value is false. |
MaxWidth
Defines the maximum width of the column in pixels or percentage, which will restrict resizing beyond this pixels or percentage.
Declaration
public string MaxWidth { get; set; }
Property Value
Type | Description |
---|---|
System.String | The maximum width as a System.String. |
MinWidth
Defines the minimum width of the column in pixels or percentage, and restricts resizing to this value.
Declaration
public string MinWidth { get; set; }
Property Value
Type | Description |
---|---|
System.String | The minimum width as a System.String. |
ShowCheckbox
If ShowCheckbox is set to true, then the checkboxes will be displayed in particular column.
Declaration
public bool ShowCheckbox { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if checkboxes are displayed; otherwise, false. The default value is false. |
ShowColumnMenu
If ShowColumnMenu is set to false, then it disable the column menu of a particular column. By default column menu will show for all columns.
Declaration
public bool ShowColumnMenu { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the column menu is shown; otherwise, false. The default value is true. |
ShowInColumnChooser
If ShowInColumnChooser is set to false, then hides the particular column in column chooser. By default all columns are displayed in column Chooser.
Declaration
public bool ShowInColumnChooser { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the column is shown in the column chooser; otherwise, false. The default value is true. |
Template
Defines the column template that renders customized element in each cell of the column.
Declaration
public RenderFragment<object> Template { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.RenderFragment<System.Object> | The template as a render fragment of System.Object. |
TextAlign
Gets or sets the alignment of the column's text content.
Declaration
public TextAlign TextAlign { get; set; }
Property Value
Type | Description |
---|---|
TextAlign | One of the TextAlign enumeration that specifies the alignment of text in both the header and content cells. The default alignment is Syncfusion.Blazor.Grids.TextAlign.Left. |
Type
Gets or sets the data type of the column.
Declaration
public ColumnType Type { get; set; }
Property Value
Type | Description |
---|---|
ColumnType | One of the ColumnType enumeration that specifies the data type of the column. |
Uid
Gets the unique identifier value of the column. It is used to get the object.
Declaration
public string Uid { get; set; }
Property Value
Type | Description |
---|---|
System.String | The UID as a System.String. |
ValidationRules
Defines rules to validate data before creating and updating.
Declaration
public ValidationRules ValidationRules { get; set; }
Property Value
Type | Description |
---|---|
ValidationRules | An instance of ValidationRules. |
Examples
<SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId">
<TreeGridColumns>
<TreeGridColumn Field="Quantity" HeaderText="Quantity" ValidationRules="@(new Syncfusion.Blazor.Grids.ValidationRules { Number = true, Min = 0 })">
</TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
Visible
If Visible is set to false, hides the particular column. By default, columns are displayed.
Declaration
public bool Visible { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the column is visible; otherwise, false. The default value is true. |
Width
Defines the width of the column in pixels or percentage.
Declaration
public string Width { get; set; }
Property Value
Type | Description |
---|---|
System.String | The width as a System.String. |
Methods
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type | Name | Description |
---|---|---|
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder | __builder |
OnInitializedAsync()
Method invoked when the component is ready to start, having received its initial parameters from its parent in the render tree. Override this method if you will perform an asynchronous operation and want the component to refresh when that operation is completed.
Declaration
protected override Task OnInitializedAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing any asynchronous operation. |
Overrides
OnParametersSetAsync()
Method invoked when the component has received parameters from its parent in the render tree, and the incoming values have been assigned to properties.
Declaration
protected override Task OnParametersSetAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing any asynchronous operation. |