alexa
menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Search Results for

    Show / Hide Table of Contents

    Class TreeGridColumn

    Configures Tree Grid column.

    Inheritance
    object
    ComponentBase
    OwningComponentBase
    SfOwningComponentBase
    SfBaseComponent
    SfDataBoundComponent
    TreeGridColumn
    Implements
    IComponent
    IHandleEvent
    IHandleAfterRender
    IDisposable
    Inherited Members
    ComponentBase.Assets
    ComponentBase.AssignedRenderMode
    ComponentBase.DispatchExceptionAsync(Exception)
    ComponentBase.InvokeAsync(Action)
    ComponentBase.InvokeAsync(Func<Task>)
    ComponentBase.OnAfterRender(bool)
    ComponentBase.OnInitialized()
    ComponentBase.OnParametersSet()
    ComponentBase.RendererInfo
    ComponentBase.SetParametersAsync(ParameterView)
    ComponentBase.ShouldRender()
    ComponentBase.StateHasChanged()
    object.Equals(object)
    object.Equals(object, object)
    object.GetHashCode()
    object.GetType()
    object.MemberwiseClone()
    object.ReferenceEquals(object, object)
    object.ToString()
    OwningComponentBase.IsDisposed
    OwningComponentBase.ScopedServices
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(bool)
    SfBaseComponent.GetEffectivePlatform()
    SfBaseComponent.GetMainComponentPlatform()
    SfBaseComponent.IsMainLicenseComponent()
    SfBaseComponent.LicenseContext
    SfBaseComponent.OnObservableChange(string, object, bool, NotifyCollectionChangedEventArgs)
    SfBaseComponent.ValidateLicense()
    SfDataBoundComponent.DataManager
    SfDataBoundComponent.MainParent
    SfDataBoundComponent.OnAfterRenderAsync(bool)
    SfDataBoundComponent.SetDataManager<T>(object)
    Namespace: Syncfusion.Blazor.TreeGrid
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class TreeGridColumn : SfDataBoundComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

    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
    [Parameter]
    [JsonPropertyName("allowAdding")]
    public bool AllowAdding { get; set; }
    Property Value
    Type Description
    bool

    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
    [Parameter]
    [JsonPropertyName("allowEditing")]
    public bool AllowEditing { get; set; }
    Property Value
    Type Description
    bool

    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
    [Parameter]
    [JsonPropertyName("allowFiltering")]
    public bool AllowFiltering { get; set; }
    Property Value
    Type Description
    bool

    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
    [Parameter]
    [JsonPropertyName("allowReordering")]
    public bool AllowReordering { get; set; }
    Property Value
    Type Description
    bool

    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
    [Parameter]
    [JsonPropertyName("allowResizing")]
    public bool AllowResizing { get; set; }
    Property Value
    Type Description
    bool

    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
    [Parameter]
    [JsonPropertyName("allowSorting")]
    public bool AllowSorting { get; set; }
    Property Value
    Type Description
    bool

    true if sorting is allowed; otherwise, false. The default value is true.

    ClipMode

    Defines the cell content's overflow mode.

    Declaration
    [Parameter]
    [JsonPropertyName("clipMode")]
    [JsonConverter(typeof(JsonStringEnumConverter))]
    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
    [Parameter]
    [JsonPropertyName("columns")]
    public List<TreeGridColumn> Columns { get; set; }
    Property Value
    Type Description
    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
    [Parameter]
    [JsonPropertyName("commands")]
    public List<TreeGridCommandColumn> Commands { get; set; }
    Property Value
    Type Description
    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
    [Parameter]
    [JsonPropertyName("customAttributes")]
    public IDictionary<string, object> CustomAttributes { get; set; }
    Property Value
    Type Description
    IDictionary<string, 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
    [Parameter]
    [JsonPropertyName("defaultValue")]
    public object DefaultValue { get; set; }
    Property Value
    Type Description
    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
    [Parameter]
    [JsonPropertyName("disableHtmlEncode")]
    public bool DisableHtmlEncode { get; set; }
    Property Value
    Type Description
    bool

    true if HTML encoding is disabled; otherwise, false. The default value is true.

    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 Description
    bool

    true if checkboxes are displayed instead of boolean values; otherwise, false. The default value is false.

    EditTemplate

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

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

    The edit template as a render fragment of object.

    EditType

    Gets or sets the type of component for editing.

    Declaration
    [Parameter]
    [JsonPropertyName("editType")]
    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.

    EditorSettings

    Defines the object to customize default cell editors.

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

    An instance of IEditorSettings. The following types can be used to customize default editors.
    NumericEditCellParams - Customizes the default numerictextbox editor.
    DropDownEditCellParams - Customizes the default dropdown editor.
    DateEditCellParams - Customizes the default datepicker editor.
    BooleanEditCellParams - Customizes the default checkbox editor. ///

    Field

    Defines the field name of column which is mapped with mapping name of DataSource.

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

    The field name as a string.

    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 Description
    RenderFragment<object>

    The template as a render fragment of 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
    [Parameter]
    [JsonPropertyName("filterSettings")]
    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
    [Parameter]
    [JsonPropertyName("filterTemplate")]
    [JsonIgnore]
    public RenderFragment<object> FilterTemplate { get; set; }
    Property Value
    Type Description
    RenderFragment<object>

    The filter template as a render fragment of object.

    Format

    It is used to change display value with the given format and does not affect the original data.

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

    The format as a 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
    [Parameter]
    [JsonPropertyName("formatter")]
    public object Formatter { get; set; }
    Property Value
    Type
    object

    Freeze

    Gets or sets a value that indicates which side column needs to freeze.

    Declaration
    [Parameter]
    [JsonPropertyName("freeze")]
    [JsonConverter(typeof(JsonStringEnumConverter))]
    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
    [Parameter]
    [JsonPropertyName("headerTemplate")]
    [JsonIgnore]
    public RenderFragment<object> HeaderTemplate { get; set; }
    Property Value
    Type Description
    RenderFragment<object>

    The header template as a render fragment of object.

    HeaderText

    Defines the header text of column which is used to display in column header.

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

    The header text as a string.

    HeaderTextAlign

    Gets or sets the alignment of the column header text.

    Declaration
    [Parameter]
    [JsonPropertyName("headerTextAlign")]
    [JsonConverter(typeof(JsonStringEnumConverter))]
    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
    [Parameter]
    [JsonPropertyName("hideAtMedia")]
    public string HideAtMedia { get; set; }
    Property Value
    Type Description
    string

    The media query as a string.

    Index

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

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

    The unique identifier as an 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 Description
    bool

    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
    [Parameter]
    [JsonPropertyName("isIdentity")]
    public bool IsIdentity { get; set; }
    Property Value
    Type Description
    bool

    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
    [Parameter]
    [JsonPropertyName("isPrimaryKey")]
    public bool IsPrimaryKey { get; set; }
    Property Value
    Type Description
    bool

    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
    [Parameter]
    [JsonPropertyName("lockColumn")]
    public bool LockColumn { get; set; }
    Property Value
    Type Description
    bool

    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
    [Parameter]
    [JsonPropertyName("maxWidth")]
    public string MaxWidth { get; set; }
    Property Value
    Type Description
    string

    The maximum width as a string.

    MinWidth

    Defines the minimum width of the column in pixels or percentage, and restricts resizing to this value.

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

    The minimum width as a string.

    ShowCheckbox

    If ShowCheckbox is set to true, then the checkboxes will be displayed in particular column.

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

    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
    [Parameter]
    [JsonPropertyName("showColumnMenu")]
    public bool ShowColumnMenu { get; set; }
    Property Value
    Type Description
    bool

    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
    [Parameter]
    [JsonPropertyName("showInColumnChooser")]
    public bool ShowInColumnChooser { get; set; }
    Property Value
    Type Description
    bool

    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
    [Parameter]
    [JsonPropertyName("template")]
    [JsonIgnore]
    public RenderFragment<object> Template { get; set; }
    Property Value
    Type Description
    RenderFragment<object>

    The template as a render fragment of object.

    TextAlign

    Gets or sets the alignment of the column's text content.

    Declaration
    [Parameter]
    [JsonPropertyName("textAlign")]
    [JsonConverter(typeof(JsonStringEnumConverter))]
    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
    [Parameter]
    [JsonPropertyName("type")]
    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
    [Parameter]
    [JsonPropertyName("uid")]
    public string Uid { get; set; }
    Property Value
    Type Description
    string

    The UID as a string.

    ValidationRules

    Defines rules to validate data before creating and updating.

    Declaration
    [Parameter]
    [JsonPropertyName("validationRules")]
    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
    [Parameter]
    [JsonPropertyName("visible")]
    public bool Visible { get; set; }
    Property Value
    Type Description
    bool

    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
    [Parameter]
    [JsonPropertyName("width")]
    public string Width { get; set; }
    Property Value
    Type Description
    string

    The width as a string.

    Methods

    BuildRenderTree(RenderTreeBuilder)

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

    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
    Task

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

    Overrides
    SfDataBoundComponent.OnInitializedAsync()

    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
    Task

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

    Overrides
    SfDataBoundComponent.OnParametersSetAsync()

    Implements

    IComponent
    IHandleEvent
    IHandleAfterRender
    IDisposable
    In this article
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved