Class SfTreeGrid<TValue>
SfTreeGrid is a feature-rich Blazor component used to visualize self-referential or hierarchical data effectively in a tabular format.
Inherited Members
Namespace: Syncfusion.Blazor.TreeGrid
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfTreeGrid<TValue> : SfDataBoundComponent, ITreeGrid, ISfCircularComponent
Type Parameters
Name | Description |
---|---|
TValue | A type which provides schema for the treegrid component. |
Constructors
SfTreeGrid()
Declaration
public SfTreeGrid()
Properties
Aggregates
Gets or sets an instance of System.Collections.Generic.List<> controlling the rendering of aggregate rows.
Declaration
public List<TreeGridAggregate> Aggregates { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<TreeGridAggregate> | A list of TreeGridAggregate. |
Remarks
TreeGridAggregate provides various properties to customize aggregate operations.
Examples
<SfTreeGrid DataSource="@TreeGridData" AllowSorting="true" AllowFiltering="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })">
<TreeGridAggregates>
<TreeGridAggregate ShowChildSummary="false">
<TreeGridAggregateColumns>
<TreeGridAggregateColumn Field="Duration" Type="Syncfusion.Blazor.Grids.AggregateType.Sum" Format="C2"></TreeGridAggregateColumn>
</TreeGridAggregateColumns>
</TreeGridAggregate>
</TreeGridAggregates>
</SfTreeGrid>
AllowExcelExport
Gets or sets whether to allow exporting the tree grid data to Excel and CSV.
Declaration
public bool AllowExcelExport { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
Exporting can be customized using ExcelExportProperties in the method ExportToExcelAsync(ExcelExportProperties, Nullable<Boolean>, Object, Nullable<Boolean>).
AllowFiltering
Gets or sets whether to allow filtering of tree grid data in columns.
Declaration
public bool AllowFiltering { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
You can cancel or customize the filtering action through OnActionBegin event handler.
AllowFreezeLineMoving
Gets or sets whether to allow the user to move the frozen line by dragging and dropping it between columns. Frozen columns are updated corresponding to frozen line position.
Declaration
public bool AllowFreezeLineMoving { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if allowed to adjust freeze line; otherwise, false. By default, the property value is false. |
Remarks
Enable FreezeLineMoving property that helps to increase/decrease the frozen columns by drag-and-drop the freeze bar between columns.
Examples
<SfTreeGrid AllowFreezeLineMoving=true FrozenColumns="2" Height="500" Width="500">
..
</SfTreeGrid>
AllowMultiSorting
Gets or sets whether to allow sorting multiple tree grid columns.
Declaration
public bool AllowMultiSorting { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
To sort multiple columns, hold CTRL key and click the column header. To clear sorting for a column, hold SHIFT key and click the column header.
AllowPaging
Gets or sets whether to render the pager at the bottom of the tree grid.
Declaration
public bool AllowPaging { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
You can cancel or customize paging action through the OnActionBegin event handler.
AllowPdfExport
Gets or sets whether to allow exporting tree grid data to PDF.
Declaration
public bool AllowPdfExport { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
Exporting can be customized using PdfExportProperties in the method ExportToPdfAsync(PdfExportProperties, Nullable<Boolean>, Object, Nullable<Boolean>).
AllowReordering
Gets or sets whether to allow reordering of tree grid columns by dragging and dropping.
Declaration
public bool AllowReordering { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
You can cancel or customize the reordering action through OnActionBegin event handler.
AllowResizing
Gets or sets whether to allow resizing of tree grid columns.
Declaration
public bool AllowResizing { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
You can prevent resizing of a specific column by setting AllowResizing.
AllowRowDragAndDrop
Gets or sets whether to allow row reordering in tree grid.
Declaration
public bool AllowRowDragAndDrop { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true If need to allow row drag and drop in tree grid; otherwise, false.The default value is false. |
Remarks
You can cancel or customize the row reorder action through OnRowDragStart event handler.
AllowSelection
Gets or sets whether to allow the user to select tree grid rows.
Declaration
public bool AllowSelection { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
Multi-selection can be performed by holding the CTRL key and clicking the desired rows/cells. To select a range of rows/cells, hold the SHIFT key and click the rows/cells.
AllowSorting
Gets or sets whether to allow sorting of tree grid columns.
Declaration
public bool AllowSorting { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
You can cancel or customize the sorting action through OnActionBegin event handler.
AllowTextWrap
Gets or sets whether to allow text wrapping in tree grid cells.
Declaration
public bool AllowTextWrap { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
AutoCheckHierarchy
Gets or sets whether the tree column checkboxes should be checked hierarchically.
Declaration
public bool AutoCheckHierarchy { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
ShowCheckbox should be enabled.
ChildMapping
Gets or sets the mapping property path for child records in the data source.
Declaration
public string ChildMapping { get; set; }
Property Value
Type | Description |
---|---|
System.String | The field or column name in the data source that holds the nested collection for child records. The default value is |
Remarks
Applicable for hierarchy-type data binding in the tree grid.
ClipMode
Gets or sets how to display the text content in the tree grid cell when it overflows.
Declaration
public ClipMode ClipMode { get; set; }
Property Value
Type | Description |
---|---|
ClipMode | One of the ClipMode enumeration values. Default is ClipMode.Ellipsis. |
Remarks
The available modes are:
- Clip: Truncates the cell content when it overflows its area.
- Ellipsis: Displays ellipsis when the cell content overflows its area.
- EllipsisWithTooltip: Displays ellipsis when the cell content overflows its area and also displays a tooltip on mouse hover.
ColumnChooserSettings
Gets or sets an instance of TreeGridColumnChooserSettings which configures the column chooser for hiding and showing columns dynamically.
Declaration
public TreeGridColumnChooserSettings ColumnChooserSettings { get; set; }
Property Value
Type | Description |
---|---|
TreeGridColumnChooserSettings | An instance of TreeGridColumnChooserSettings. |
Remarks
TreeGridColumnChooserSettings class provides various properties to customize the column chooser.
Examples
<SfTreeGrid DataSource="@TreeGridData" TreeColumnIndex="1" Toolbar="@(new List<string>() { "Search" })">
<TreeGridColumnChooserSettings ignoreAccent="true" operator="startsWith"></TreeGridColumnChooserSettings>
</SfTreeGrid>
ColumnMenuItems
Gets or sets both built-in and custom column menu items. Built-in items are provided as a list of objects, and custom column menu items are provided as a List instance of 'Syncfusion.Blazor.Grids.ColumnMenuItemModel'.
Declaration
public object ColumnMenuItems { get; set; }
Property Value
Type | Description |
---|---|
System.Object | The available built-in items include:
|
Remarks
Actions for custom column menu items can be handled through the 'Syncfusion.Blazor.TreeGrid.TreeGridEvents.ColumnMenuItemClicked' event.
Examples
<SfTreeGrid DataSource="@TreeGridData" ColumnMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending" })" >
</SfTreeGrid>
ColumnQueryMode
Gets or sets how to query the column values of the data source.
Declaration
public ColumnQueryModeType ColumnQueryMode { get; set; }
Property Value
Type | Description |
---|---|
ColumnQueryModeType | One of the ColumnQueryModeType enumeration values that specifies how the data source fields are retrieved. The default mode is Syncfusion.Blazor.Grids.ColumnQueryModeType.All. |
Remarks
The types are:
- All: Retrieves the whole data source with all columns.
- Schema: Retrieves data only for the defined TreeGridColumns from the data source.
- ExcludeHidden: Retrieves data only for Visible property enabled columns from the data source.
Columns
Gets or sets a collection of TreeGridColumn which controls the rendering of columns displayed in the tree grid content.
Declaration
public List<TreeGridColumn> Columns { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.List<TreeGridColumn> | A list instance of TreeGridColumn. |
Remarks
TreeGridColumn class provides various properties to customize tree grid columns.
Examples
<SfTreeGrid DataSource="@TreeGridData">
<TreeGridColumns>
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="50"></TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
ContextMenuItems
Gets or sets both built-in and custom context menu items. Built-in items are provided as a list of objects, and custom context menu items are provided as a List instance of 'Syncfusion.Blazor.Grids.ContextMenuItemModel'.
Declaration
public object ContextMenuItems { get; set; }
Property Value
Type | Description |
---|---|
System.Object | The available built-in items include:
|
Remarks
Actions for custom context menu items can be handled through the 'Syncfusion.Blazor.TreeGrid.TreeGridEvents.ContextMenuItemClicked' event.
Examples
<SfTreeGrid DataSource="@TreeGridData" ContextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending", "Edit", "Delete", "Save", "Cancel" })">
</SfTreeGrid>
CopyHierarchyMode
Gets or sets how selected data in the tree grid rows is copied.
Declaration
public CopyHierarchyType CopyHierarchyMode { get; set; }
Property Value
Type | Description |
---|---|
CopyHierarchyType | One of the CopyHierarchyType enumeration values that specifies how the data is copied to the clipboard. The default mode is Syncfusion.Blazor.Grids.CopyHierarchyType.Parent. |
Remarks
The available options are:
- Parent: Copy the selected data with the parent record.
- Child: Copy the selected data with the child record.
- Both: Copy the selected data with both the parent and child record.
- None: Copy only the selected record.
DataSource
Gets or sets the data source for rendering the tree grid rows. The data source value can be of any type that implements IEnumerable.
Declaration
public IEnumerable<TValue> DataSource { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.IEnumerable<TValue> | IEnumerable, List, ExpandoObjectCollection, DynamicObject collection, or Observable collection. |
Remarks
To consume data from a remote service or a custom adaptor, the SfDataManager component should be used.
Examples
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData">
</SfTreeGrid>
DataSourceChanged
An event that is raised when the datasource changes.
Declaration
public EventCallback<IEnumerable<TValue>> DataSourceChanged { get; set; }
Property Value
Type |
---|
Microsoft.AspNetCore.Components.EventCallback<System.Collections.Generic.IEnumerable<TValue>> |
Remarks
This event handler receives a object which provides the details of the datasource changed.
Examples
<SfTreeGrid>
<TreeGridEvents DataSourceChanged="DataSourceChanged" TValue="BusinessObject"></TreeGridEvents>
</SfTreeGrid>
@code {
public void DataSourceChanged(IEnumerable<BusinessObject> args)
{
}
}
EditSettings
Gets or sets an instance of TreeGridEditSettings configuring the editing behavior of the tree grid.
Declaration
public TreeGridEditSettings EditSettings { get; set; }
Property Value
Type | Description |
---|---|
TreeGridEditSettings | An instance of TreeGridEditSettings. |
Remarks
TreeGridEditSettings class provides various properties to customize editing operations.
Examples
<SfTreeGrid IdMapping="TaskId" AllowFiltering="true" ParentIdMapping="ParentId" DataSource="@TreeGridData" TreeColumnIndex="1">
<TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch" NewRowPosition="RowPosition.Below">
</TreeGridEditSettings>
</SfTreeGrid>
EnableAdaptiveUI
Gets or sets whether to enabled adaptive UI which makes tree grid adaptive to small screens. The Filtering and various actions in tree grid opens the UI for user in a pop-up occupying the entire screen.
Declaration
public bool EnableAdaptiveUI { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true If adaptive UI is enabled to display pop-up, for filtering and various features, which occupies the entire screen. The default value is false. |
Remarks
If adaptive UI is enabled to display pop-up, for filtering and various features, which occupies the entire screen. The default value is false.
EnableAltRow
Gets or sets whether to render alternate tree grid row elements with a CSS class.
Declaration
public bool EnableAltRow { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
EnableAutoFill
Gets or sets whether to automatically fill a series of cells by dragging a cell's right-hand corner, similar to Excel.
Declaration
public bool EnableAutoFill { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
The value of the selected cell is filled into other cells.
EnableCollapseAll
Gets or sets whether to load all the rows in a collapsed state.
Declaration
public bool EnableCollapseAll { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
Use Syncfusion.Blazor.TreeGrid.SfTreeGrid.CollapseAllAsync for dynamic collapsing.
EnableColumnVirtualization
Gets or sets whether to enable virtual loading of column cells.
Declaration
public bool EnableColumnVirtualization { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if need to enable column virtualization; otherwise, false. The default value is false. |
Remarks
Loads large dataset of columns with better performance. Initially, renders only the columns that are in current viewport and load subsequent columns on horizontal scrolling.
EnableHover
Gets or sets whether to enable hover effect on tree grid rows while mouse over it.
Declaration
public bool EnableHover { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
When hovering a row, the background color of the row element changes.
EnablePersistence
Gets or sets whether to persist the tree grid's current state during a browser reload.
Declaration
public bool EnablePersistence { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
EnableRtl
Gets or sets whether to render the Tree Grid component in right-to-left direction.
Declaration
public bool EnableRtl { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
EnableVirtualization
Gets or sets whether to enable virtual loading of rows.
Declaration
public bool EnableVirtualization { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if virtualization should be enabled; otherwise, false. The default value is false. |
Remarks
If 'EnableVirtualization' is set to true, the tree grid will render only the rows visible within the viewport and load subsequent rows on vertical scrolling. This helps to improve the performance of loading large datasets in the tree grid.
EnableVirtualMaskRow
Gets or sets whether to display shimmer effect during scrolling action in virtual scrolling feature enabled tree grid. If disabled, spinner pop-up is display while virtual scrolling.
Declaration
public bool EnableVirtualMaskRow { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true If need to enable shimmer effect; otherwise, false. The default value is false. |
ExpandStateMapping
Gets or sets the mapping field in the data object of the data source that denotes the expand status of a parent row.
Declaration
public string ExpandStateMapping { get; set; }
Property Value
Type | Description |
---|---|
System.String | The field name mapping the expand state of a parent row. |
Remarks
It renders a parent row in expanded or collapsed state based on this mapping property value in the data source.
FilterSettings
Gets or sets an instance of TreeGridFilterSettings configuring filtering behavior.
Declaration
public TreeGridFilterSettings FilterSettings { get; set; }
Property Value
Type | Description |
---|---|
TreeGridFilterSettings | An instance of TreeGridFilterSettings. |
Remarks
TreeGridFilterSettings class provides various properties to customize filtering operations.
Examples
<SfTreeGrid IdMapping="TaskId" AllowFiltering="true" FrozenColumns="2" ParentIdMapping="ParentId" DataSource="@TreeGridData" TreeColumnIndex="1">
<TreeGridFilterSettings>
<TreeGridFilterColumns>
<TreeGridFilterColumn Field="TaskName" MatchCase="false" Operator="Syncfusion.Blazor.Operator.StartsWith" Predicate="and" Value="@Name"></TreeGridFilterColumn>
</TreeGridFilterColumns>
</TreeGridFilterSettings>
</SfTreeGrid>
FrozenColumns
Gets or sets the number of frozen columns remains fixed on the left side of the tree grid.
Declaration
public int FrozenColumns { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 | The number of non-scrolling columns. The default value is 0. |
FrozenRows
Gets or sets the number of frozen rows that remain fixed at the top of the tree grid.
Declaration
public int FrozenRows { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 | The number of non-scrolling rows. The default value is 0. |
GridLines
Gets or sets how to show borders of rows and cells in the Tree Grid.
Declaration
public GridLine GridLines { get; set; }
Property Value
Type | Description |
---|---|
GridLine | One of the GridLine enumeration values specifying how to render border lines.
The default value is |
Remarks
The available grid lines are:
- Both: Displays both the horizontal and vertical grid lines.
- None: No grid lines are displayed.
- Horizontal: Displays the horizontal grid lines only.
- Vertical: Displays grid lines based on the theme.
HasChildMapping
Gets or sets whether a record is a parent or not for on-demand data loading in remote data binding.
Declaration
public string HasChildMapping { get; set; }
Property Value
Type | Description |
---|---|
System.String | Field name in the data object of the data source which maps whether the current record has child records. The default value is |
Height
Gets or sets the height of the tree grid component container.
Declaration
public string Height { get; set; }
Property Value
Type | Description |
---|---|
System.String | Pixel, percentage, or auto value. For example, "500px". The default value is "auto". |
IdMapping
Gets or sets the name of the field in the data object of the data source that contains the unique id of that row.
Declaration
public string IdMapping { get; set; }
Property Value
Type | Description |
---|---|
System.String | The field name in the data object of the data source. |
Remarks
It is only applicable for self-referential type data binding in the tree grid.
KeySettings
Gets or sets an instance of TreeGridKeySettings to configure the hot keys of tree grid.
Declaration
public TreeGridKeySettings KeySettings { get; set; }
Property Value
Type | Description |
---|---|
TreeGridKeySettings | An instance of TreeGridKeySettings |
Remarks
TreeGridKeySettings class provides various properties to customize the hot keys.
Examples
<SfTreeGrid DataSource="TreeData" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })">
<TreeGridKeySettings MoveDownCell="Shift" ></TreeGridKeySettings>
</SfTreeGrid>
LoadChildOnDemand
Gets or sets whether to load child records on demand in remote data binding. When enabled, parent records are rendered in a collapsed state at initial rendering.
Declaration
public bool LoadChildOnDemand { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Remarks
Loading child records on demand can improve the performance of data-bound controls with a large number of records. Child records are only loaded when they are requested, rather than loading all child records at once. This property is not applicable for local data binding.
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 |
Remarks
Adjusting this property can enhance scrolling performance and optimize rendering, especially for large datasets in a virtualized tree 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.
PageSettings
Gets or sets an instance of TreeGridPageSettings configuring paging behavior in the tree grid.
Declaration
public TreeGridPageSettings PageSettings { get; set; }
Property Value
Type | Description |
---|---|
TreeGridPageSettings | An instance of TreeGridPageSettings. |
Remarks
TreeGridPageSettings class provides various properties to customize paging operations.
Examples
<SfTreeGrid DataSource="@TreeGridData" AllowPaging="true">
<TreeGridPageSettings PageSize="2" PageCount="10"></TreeGridPageSettings>
</SfTreeGrid>
ParentIdMapping
Gets or sets the name of the field in the data source that contains the unique ID of the parent record.
Declaration
public string ParentIdMapping { get; set; }
Property Value
Type | Description |
---|---|
System.String | The field name in the data source object which maps to the parent record. The default value is |
Remarks
It is applicable for self-referential type data binding in the tree grid.
PrintMode
Gets or sets the print mode for the tree grid.
Declaration
public PrintMode PrintMode { get; set; }
Property Value
Type | Description |
---|---|
PrintMode | One of the PrintMode enumeration values determining the print scope. By default, it is set to print all pages. |
Remarks
Allows you to determine which pages of the tree grid should be printed. You can choose to print all pages or just the currently displayed page.
Query
Gets or sets an instance of Query to process data based on the provided query.
Declaration
public Query Query { get; set; }
Property Value
Type | Description |
---|---|
Query | An instance of Query. |
Remarks
Query class offers various options for executing data operations in the tree grid.
RowDropSettings
Gets or sets an instance of TreeGridRowDropSettings which configures the row drop behavior of the tree grid.
Declaration
public TreeGridRowDropSettings RowDropSettings { get; set; }
Property Value
Type | Description |
---|---|
TreeGridRowDropSettings | An instance of TreeGridRowDropSettings. |
Remarks
TreeGridRowDropSettings class provides various properties to customize row drop operations.
Examples
<SfTreeGrid DataSource="@TreeGridData" AllowRowDragAndDrop="true" AllowSelection="true" AllowPaging="true" TreeColumnIndex="1">
<TreeGridRowDropSettings TargetID="Grid"></TreeGridRowDropSettings>
</SfTreeGrid>
RowHeight
Gets or sets the height value for the tree grid rows.
Declaration
public double RowHeight { get; set; }
Property Value
Type | Description |
---|---|
System.Double | Row height pixel value in integer. The default value is 36. |
SearchSettings
Gets or sets an instance of TreeGridSearchSettings which configures the searching behavior of the tree grid.
Declaration
public TreeGridSearchSettings SearchSettings { get; set; }
Property Value
Type | Description |
---|---|
TreeGridSearchSettings | An instance of TreeGridSearchSettings |
Remarks
TreeGridSearchSettings class provides various properties to customize searching operations.
Examples
<SfTreeGrid DataSource="@TreeGridData" TreeColumnIndex="1" Toolbar="@(new List<string>() { "Search" })">
<TreeGridSearchSettings Key="Child Task 1"></TreeGridSearchSettings>
</SfTreeGrid>
SelectedRowIndex
Gets or sets the selected row index in the tree grid.
Declaration
public int SelectedRowIndex { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 | Row index of the selected row, for example 3. The default value is -1. |
Remarks
Allows you to select a row at initial rendering.
SelectionSettings
Gets or sets an instance of TreeGridSelectionSettings which configures the selection behavior of tree grid rows and cells.
Declaration
public TreeGridSelectionSettings SelectionSettings { get; set; }
Property Value
Type | Description |
---|---|
TreeGridSelectionSettings | An instance of TreeGridSelectionSettings |
Remarks
TreeGridSelectionSettings class provides various properties to customize the row and cell selection.
Examples
<SfTreeGrid DataSource="@TreeGridData" AllowSelection="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })">
<TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></TreeGridSelectionSettings>
</SfTreeGrid>
ShowColumnChooser
Gets or sets whether to render column chooser in the Tree Grid.
Declaration
public bool ShowColumnChooser { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the column chooser should be enabled; otherwise, false. The default value is false. |
Remarks
It allows you to dynamically show or hide columns.
ShowColumnMenu
Gets or sets whether to render the column menu option in each column with default items.
Declaration
public bool ShowColumnMenu { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if need to enable column menu; otherwise, false.The default value is false. |
Remarks
If 'ShowColumnMenu' set to true, then it will enable all the build in column menu items. You can customize the column menu items using ColumnMenuItems.
SortSettings
Gets or sets an instance of TreeGridSortSettings which configures the sorting behavior of tree grid columns.
Declaration
public TreeGridSortSettings SortSettings { get; set; }
Property Value
Type | Description |
---|---|
TreeGridSortSettings | An instance of TreeGridSortSettings |
Remarks
TreeGridSortSettings class provides various properties to sort the data in tree grid columns.
Examples
<SfTreeGrid DataSource="@TreeGridData" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })">
<TreeGridSortSettings>
<TreeGridSortColumns>
<TreeGridSortColumn Field="TaskName" Direction="Syncfusion.Blazor.Grids.SortDirection.Descending"></TreeGridSortColumn>
</TreeGridSortColumns>
</TreeGridSortSettings>
</SfTreeGrid>
TextWrapSettings
Gets or sets an instance of TreeGridTextWrapSettings which configures the wrapping behavior in tree grid cells.
Declaration
public TreeGridTextWrapSettings TextWrapSettings { get; set; }
Property Value
Type | Description |
---|---|
TreeGridTextWrapSettings | An instance of TreeGridTextWrapSettings |
Remarks
TreeGridTextWrapSettings class provides various properties to wrap the content in the tree grid cells.
Examples
<SfTreeGrid DataSource="TreeData" AllowTextWrap="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })">
<TreeGridTextWrapSettings WrapMode="WrapMode.Content"></TreeGridTextWrapSettings>
</SfTreeGrid>
Toolbar
Gets or sets both built-in and custom toolbar items. Built-in items are provided as instance List of string and custom toolbar items are provided as List instance of 'Syncfusion.Blazor.Navigations.ItemModel'.
Declaration
public object Toolbar { get; set; }
Property Value
Type | Description |
---|---|
System.Object | The available built-in toolbar items are as follows: Add: Adds a new record. Edit: Edits the selected task. Update: Saves the edited task. Delete: Deletes the selected task. Cancel: Cancels the edit state. Search: Searches tasks by the given key. ExpandAll: Expands all the records of tree grid. CollapseAll: Collapses all the records of tree grid. Indent: Adds as a child to the previous record. Outdent: Removes as a child from the previous parent record. ExcelExport: Exports tree grid data in Excel format. CsvExport: Exports tree grid data in CSV format. |
Remarks
Both built-in and custom toolbar items can be added to toolbar.
Examples
<SfTreeGrid DataSource="TreeData" TreeColumnIndex="1" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })">
</SfTreeGrid>
TreeColumnIndex
Gets or sets a column index that is used to expand or collapse its child rows.
Declaration
public int TreeColumnIndex { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 | Column index in integer. The default value is 0. |
UnmatchedAttributes
Gets or sets custom attributes to the tree grid component root element.
Declaration
public IDictionary<string, object> UnmatchedAttributes { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.IDictionary<System.String, System.Object> | An instance of System.Collections.Generic.IDictionary<, > containing custom HTML attributes. |
Remarks
Any HTML attributes can be added to the root element of the tree grid.
Width
Gets or sets the width of the tree grid component container.
Declaration
public string Width { get; set; }
Property Value
Type | Description |
---|---|
System.String | Pixel or percentage or auto values. The default value is "auto". |
Methods
AddRecordAsync()
Renders a new row with input fields in the TreeGrid, allowing the user to fill and save a new record.
Declaration
public Task AddRecordAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
Remarks
To use this method, ensure AllowAdding is set to true.
Examples
<button id="AddRecord" @onclick="AddItem">AddItem</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task AddItem()
{
await TreeGrid.AddRecordAsync();
}
}
AddRecordAsync(TValue, Nullable<Int32>, Nullable<RowPosition>)
Inserts a new record into the tree grid at a specified row index and position.
Declaration
public Task AddRecordAsync(TValue data, Nullable<int> index = null, Nullable<RowPosition> position = null)
Parameters
Type | Name | Description |
---|---|---|
TValue | data | The record to be added. |
System.Nullable<System.Int32> | index | The row index at which the new record is to be inserted. If not specified, defaults to the first row. |
System.Nullable<RowPosition> | position | Specifies whether the new record should be added Above, Below, or as a Child of the row at the given index. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
Remarks
To use this method, AllowAdding must be set to true.
Examples
<button @onclick="AddItem">Add Record</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
...
</SfTreeGrid>
@code {
SfTreeGrid<BusinessObject> TreeGrid;
private async Task AddItem()
{
var newRecord = new BusinessObject() { TaskId = 21, TaskName = "Test Add", StartDate = new DateTime(2017, 10, 23), Duration = 10, Progress = 70, Priority = "Critical" };
await TreeGrid.AddRecordAsync(newRecord, 1, RowPosition.Below); // Add the record below index 1.
}
}
AutoFitColumnsAsync(String[])
Updates the column width to fit its content automatically, ensuring that the width is sufficient to display the content without wrapping or hiding.
Declaration
public Task AutoFitColumnsAsync(string[] fieldNames)
Parameters
Type | Name | Description |
---|---|---|
System.String[] | fieldNames | The collection of column field names to be autofitted. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
Remarks
This method can be utilized within the DataBound event to autofit columns during the initial render.
Examples
<button id="AutoFitColumns" @onclick="FitColumnshHandler">FitColumns</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task FitColumnshHandler()
{
await TreeGrid.AutoFitColumnsAsync(new List<string>() { "TaskName" , "Duration"}.ToArray()); // Specify the field names of columns to autofit
}
}
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type | Name | Description |
---|---|---|
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder | __builder |
ClearFilteringAsync()
Clears the filter from all columns in the tree grid.
Declaration
public Task ClearFilteringAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
Remarks
Clears the filtered rows of the tree grid.
Examples
<button id="ClearFiltering" @onclick="ClearFilterHandler">ClearFiltering</button>
<SfTreeGrid @ref="TreeGrid" AllowFiltering="true" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ClearFilterHandler()
{
await TreeGrid.ClearFilteringAsync();
}
}
ClearFilteringAsync(List<String>)
Clears the filter from the specified columns in the tree grid.
Declaration
public Task ClearFilteringAsync(List<string> fields)
Parameters
Type | Name | Description |
---|---|---|
System.Collections.Generic.List<System.String> | fields | A list of field names from which filtering is to be cleared. If no field is specified, clears filtering from all columns. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
Remarks
When a field name is not defined, it clears filtering from all the columns.
Examples
<button id="ClearFiltering" @onclick="ClearFilterHandler">ClearFiltering</button>
<SfTreeGrid @ref="TreeGrid" AllowFiltering="true" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ClearFilterHandler()
{
await TreeGrid.ClearFilteringAsync(new List<string>() { "TaskName" });
}
}
ClearSelectionAsync()
Deselects the current selected rows and cells.
Declaration
public Task ClearSelectionAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
Currently selected rows and cells in the tree grid are cleared.
Examples
<button id="ClearSelection" @onclick="ClearSelectionHandler">ClearSelection</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ClearSelectionHandler()
{
await TreeGrid.ClearSelectionAsync();
}
}
ClearSortingAsync()
Clears sorting from all the columns of the tree grid.
Declaration
public Task ClearSortingAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Examples
<button id="ClearSorting" @onclick="ClearSortingHandler">ClearSorting</button>
<SfTreeGrid @ref="TreeGrid" AllowSorting="true" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ClearSortingHandler()
{
await TreeGrid.ClearSortingAsync();
}
}
CloseEditAsync()
Cancels the active edit state in the tree grid.
Declaration
public Task CloseEditAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
Closes the add or edit form without saving changes.
Examples
<button id="CloseEdit" @onclick="CloseEditHandler">CloseEdit</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridEditSettings AllowEditing="true" />
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task CloseEditHandler()
{
await TreeGrid.CloseEditAsync();
}
}
CollapseAllAsync()
Collapses all the parent rows.
Declaration
public Task CollapseAllAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Examples
<button id="CollapseAll" @onclick="CollapseHandler">CollapseAll</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task CollapseHandler()
{
await TreeGrid.CollapseAllAsync();
}
}
CollapseAtLevelAsync(Int32)
Collapses the records along with their child records, at a specific hierarchical level.
Declaration
public Task CollapseAtLevelAsync(int level)
Parameters
Type | Name | Description |
---|---|---|
System.Int32 | level | The level of the record until which the rows are to be collapsed. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
The root parent level is 0.
Examples
<button id="CollapseAtLevel" @onclick="CollapseHandler">CollapseAll</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task CollapseHandler()
{
await TreeGrid.CollapseAtLevelAsync(1);
}
}
CollapseByKeyAsync(Object)
Collapses a row based on the primary key value of the record.
Declaration
public Task CollapseByKeyAsync(object key)
Parameters
Type | Name | Description |
---|---|---|
System.Object | key | The primary key value of the record to be collapsed. |
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="collapseKey" @onclick="CollapseHandler">CollapseKey</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<HierarchyData> TreeGrid;
private async Task CollapseHandler()
{
await TreeGrid.CollapseByKeyAsync(12); /// pass primary key value here
}
}
CollapseRowAsync(TValue)
Collapses the row based on the record given as a parameter.
Declaration
public Task CollapseRowAsync(TValue record)
Parameters
Type | Name | Description |
---|---|---|
TValue | record | The record to be collapsed. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Examples
<button id="CollapseRow" @onclick="CollapseHandler">CollapseRow</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task CollapseHandler()
{
await TreeGrid.CollapseRowAsync(TreeGrid.GetCurrentViewRecords()[0]); // pass your desired record here to collapse the same.
}
}
CopyAsync(Nullable<Boolean>)
Copies the selected rows or cells data into clipboard.
Declaration
public Task CopyAsync(Nullable<bool> withHeader = null)
Parameters
Type | Name | Description |
---|---|---|
System.Nullable<System.Boolean> | withHeader | Indicates whether to copy the record values along with header names. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
Remarks
The behavior of copying the record can be modified using CopyHierarchyType enumeration property.
Examples
<button id="Copy" @onclick="CopyHandler">Copy</button>
<SfTreeGrid @ref="TreeGrid" AllowSorting="true" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task CopyHandler()
{
await TreeGrid.CopyAsync(true);
}
}
DeleteRecordAsync()
Deletes a record with the given options. If fieldName
and data
are not provided, the grid will delete the selected record.
AllowDeleting should be set to true
.
Declaration
public Task DeleteRecordAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
Examples
<button id="DeleteRecord" @onclick="DeleteHandler">DeleteRecord</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridEditSettings AllowDeleting="true" />
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task DeleteHandler()
{
await TreeGrid.DeleteRecordAsync(); // deletes the selected record
}
}
DeleteRecordAsync(String, TValue)
Deletes a record from the tree grid.
AllowDeleting should be set to true
.
Declaration
public Task DeleteRecordAsync(string fieldName, TValue data)
Parameters
Type | Name | Description |
---|---|---|
System.String | fieldName | The field name of the primary key column. |
TValue | data | The record to be deleted. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
Remarks
If parameters are not provided, the selected record will be deleted.
Examples
<button id="DeleteRecord" @onclick="DeleteHandler">DeleteRecord</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridEditSettings AllowDeleting="true" />
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task DeleteHandler()
{
await TreeGrid.DeleteRecordAsync("TaskId", TreeGrid.GetCurrentViewRecords()[0]);
}
}
EditCellAsync(Int32, String)
Edits a specific cell using the row index and field name.
Declaration
public Task EditCellAsync(int rowIndex, string field)
Parameters
Type | Name | Description |
---|---|---|
System.Int32 | rowIndex | The index of the row to be edited. |
System.String | field | The column name of the cell to be edited. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
Remarks
AllowEditing should be set to true
.
Examples
<button id="EditCell" @onclick="EditCell">EditHandler</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridEditSettings AllowEditing="true" />
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task EditHandler()
{
await TreeGrid.EditCellAsync(1, "TaskName"); // Pass rowIndex and fieldname.
}
}
EnableToolbarItemsAsync(List<String>, Boolean)
Enables or disables the specified toolbar items.
Declaration
public Task EnableToolbarItemsAsync(List<string> items, bool isEnable)
Parameters
Type | Name | Description |
---|---|---|
System.Collections.Generic.List<System.String> | items | Collection of toolbar item names to be toggled. |
System.Boolean | isEnable | Indicates whether the specified toolbar items should be enabled or disabled. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
Examples
<button id="EnableToolbarItems" @onclick="ToolbarHandler">EnableToolbarItems</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
<TreeGridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" />
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ToolbarHandler()
{
await TreeGrid.EnableToolbarItemsAsync(new List<string>() { "Add" , "Edit"}, false); // Disables 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 | System.Threading.Tasks.Task. |
Remarks
To close the edit state without saving changes, you can use CloseEditAsync() method.
Examples
<button id="EndEdit" @onclick="EditHandler">EndEdit</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData" >
<TreeGridEditSettings AllowEditing="true" />
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task EditHandler()
{
await TreeGrid.EndEditAsync();
}
}
ExpandAllAsync()
Expands all the parent rows of the Tree Grid asynchronously.
Declaration
public Task ExpandAllAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Examples
<button id="ExpandAll" @onclick="ExpandHandler">ExpandAll</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ExpandHandler()
{
await TreeGrid.ExpandAllAsync();
}
ExpandAtLevelAsync(Int32)
Expands the records along with their parents at a specific hierarchical level asynchronously.
Declaration
public Task ExpandAtLevelAsync(int level)
Parameters
Type | Name | Description |
---|---|---|
System.Int32 | level | The hierarchical level until which the rows are to be expanded. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
The root parent level is considered as 0.
Examples
<button id="ExpandAtLevel" @onclick="ExpandHandler">ExpandAtLevel</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ExpandHandler()
{
await TreeGrid.ExpandAtLevelAsync(1); // pass the desired level here.
}
ExpandByKeyAsync(Object)
Expands a row based on the primary key value of the corresponding record asynchronously.
Declaration
public Task ExpandByKeyAsync(object key)
Parameters
Type | Name | Description |
---|---|---|
System.Object | key | The primary key value of the record to be expanded. |
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
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<button id="expandKey" @onclick="ExpandHandler">ExpandKey</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<HierarchyData> TreeGrid;
private async Task ExpandHandler()
{
await TreeGrid.ExpandByKeyAsync(12); /// pass primary key value here.
}
}
ExpandRowAsync(TValue)
Expands the row based on the record given as a parameter asynchronously.
Declaration
public Task ExpandRowAsync(TValue record)
Parameters
Type | Name | Description |
---|---|---|
TValue | record | The record to be expanded. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Examples
<button id="ExpandRow" @onclick="ExpandHandler">ExpandRow</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ExpandHandler()
{
await TreeGrid.ExpandRowAsync(TreeGrid.GetCurrentViewRecords()[0]); // pass your desired record here to expand the same.
}
}
ExportToCsvAsync(ExcelExportProperties, Nullable<Boolean>, Object, Nullable<Boolean>)
Exports the Tree Grid data to CSV file.
Declaration
public Task ExportToCsvAsync(ExcelExportProperties excelExportProperties = null, Nullable<bool> isMultipleExport = null, object workbook = null, Nullable<bool> isBlob = null)
Parameters
Type | Name | Description |
---|---|---|
ExcelExportProperties | excelExportProperties | Options for customizing the exporting document during export. |
System.Nullable<System.Boolean> | isMultipleExport | Indicates whether multiple tree grids are exported to the same file. |
System.Object | workbook | The workbook instance used for export. |
System.Nullable<System.Boolean> | isBlob | If set to |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
Remarks
When the parameters are not provided, the tree grid data is exported without any customization. Ensure that AllowExcelExport is enabled.
Examples
<button id="ExportToCsv" @onclick="ExportHandler">ExportToCsv</button>
<SfTreeGrid @ref="TreeGrid" AllowExcelExport="true" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ExportHandler()
{
Syncfusion.Blazor.Grids.ExcelExportProperties ExportProperties = new Syncfusion.Blazor.Grids.ExcelExportProperties();
ExportProperties.ExportType = Syncfusion.Blazor.Grids.ExportType.CurrentPage; // Here we change the ExportType from AllPages to CurrentPage, similar changes can be made to other properties.
await TreeGrid.ExportToCsvAsync(ExportProperties);
}
}
ExportToExcelAsync()
Exports the tree grid data to an Excel file.
Declaration
public Task ExportToExcelAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
Remarks
Ensure that AllowExcelExport is enabled.
Examples
<button id="ExportToExcel" @onclick="ExportHandler">ExportToExcel</button>
<SfTreeGrid @ref="TreeGrid" AllowExcelExport="true" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ExportHandler()
{
await TreeGrid.ExportToExcelAsync();
}
}
ExportToExcelAsync(ExcelExportProperties, Nullable<Boolean>, Object, Nullable<Boolean>)
Exports the tree grid data to an Excel file.
Declaration
public Task ExportToExcelAsync(ExcelExportProperties excelExportProperties = null, Nullable<bool> isMultipleExport = null, object workbook = null, Nullable<bool> isBlob = null)
Parameters
Type | Name | Description |
---|---|---|
ExcelExportProperties | excelExportProperties | Options for customizing the Excel document during export. |
System.Nullable<System.Boolean> | isMultipleExport | Indicates whether multiple tree grids are exported to the same file. |
System.Object | workbook | The workbook instance used for export. |
System.Nullable<System.Boolean> | isBlob | If set to |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
Remarks
When the parameters are not provided, the tree grid data is exported without any customization. Ensure that AllowExcelExport is enabled.
Examples
<button id="ExportToExcel" @onclick="ExportHandler">ExportToExcel</button>
<SfTreeGrid @ref="TreeGrid" AllowExcelExport="true" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ExportHandler()
{
Syncfusion.Blazor.Grids.ExcelExportProperties ExportProperties = new Syncfusion.Blazor.Grids.ExcelExportProperties();
ExportProperties.ExportType = Syncfusion.Blazor.Grids.ExportType.CurrentPage; // Here we change the ExportType from AllPages to CurrentPage, similar changes can be made to other properties.
await TreeGrid.ExportToExcelAsync(ExportProperties);
}
}
ExportToExcelAsync(TreeGridExcelExportProperties, Nullable<Boolean>, Object, Nullable<Boolean>)
Exports the Tree Grid data to an Excel file asynchronously.
Declaration
public Task ExportToExcelAsync(TreeGridExcelExportProperties excelExportProperties = null, Nullable<bool> isMultipleExport = null, object workbook = null, Nullable<bool> isBlob = null)
Parameters
Type | Name | Description |
---|---|---|
TreeGridExcelExportProperties | excelExportProperties | The properties of the exported Excel document. |
System.Nullable<System.Boolean> | isMultipleExport | Determines whether multiple Tree Grids are exported to the same file. |
System.Object | workbook | The workbook instance to which the data is exported. |
System.Nullable<System.Boolean> | isBlob | If set to |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
If the parameters are not provided, the Tree Grid data is exported without any customization. The property AllowExcelExport should be enabled.
Examples
<button id="ExportToExcel" @onclick="ExportHandler">ExportToExcel</button>
<SfTreeGrid @ref="TreeGrid" AllowExcelExport="true" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ExportHandler()
{
Syncfusion.Blazor.TreeGrid.TreeGridExcelExportProperties ExportProperties = new Syncfusion.Blazor.TreeGrid.TreeGridExcelExportProperties();
ExportProperties.IsCollapsedStatePersist = true; // IsCollapsedStatePersist is set to true, to persist the collapsed state in the exported document.
await TreeGrid.ExportToExcelAsync(ExportProperties);
}
ExportToPdfAsync()
Exports the tree grid data to a PDF file using default export settings.
Declaration
public Task ExportToPdfAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous export operation. |
Remarks
Ensure that AllowPdfExport is enabled.
Examples
<button id="ExportToPdf" @onclick="ExportHandler">ExportToPdf</button>
<SfTreeGrid @ref="TreeGrid" AllowPdfExport="true" DataSource="@TreeData">
........
</SfTreeGrid>
@code {
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ExportHandler()
{
await TreeGrid.ExportToPdfAsync();
}
}
ExportToPdfAsync(PdfExportProperties, Nullable<Boolean>, Object, Nullable<Boolean>)
Exports the tree grid data to a PDF file.
Declaration
public Task ExportToPdfAsync(PdfExportProperties pdfExportProperties = null, Nullable<bool> isMultipleExport = null, object pdfDoc = null, Nullable<bool> isBlob = null)
Parameters
Type | Name | Description |
---|---|---|
PdfExportProperties | pdfExportProperties | Options for customizing the PDF document during export. |
System.Nullable<System.Boolean> | isMultipleExport | Indicates whether multiple tree grid exports are merged into the same file. |
System.Object | pdfDoc | A PDF document instance for the export operation. |
System.Nullable<System.Boolean> | isBlob | Determines if the export should be as a blob instead of writing the response. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous export operation. |
Remarks
If parameters are not provided, the tree grid data is exported without any customization. Ensure that AllowPdfExport is enabled.
Examples
<button id="ExportToPdf" @onclick="ExportHandler">ExportToPdf</button>
<SfTreeGrid @ref="TreeGrid" AllowPdfExport="true" DataSource="@TreeData">
........
</SfTreeGrid>
@code {
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ExportHandler()
{
Syncfusion.Blazor.Grids.PdfExportProperties ExportProperties = new Syncfusion.Blazor.Grids.PdfExportProperties();
ExportProperties.ExportType = Syncfusion.Blazor.Grids.ExportType.CurrentPage; // Example of changing ExportType.
await TreeGrid.ExportToPdfAsync(ExportProperties);
}
}
ExportToPdfAsync(TreeGridPdfExportProperties, Nullable<Boolean>, Object, Nullable<Boolean>)
Exports the tree grid data to a PDF file.
Declaration
public Task ExportToPdfAsync(TreeGridPdfExportProperties pdfExportProperties = null, Nullable<bool> isMultipleExport = null, object pdfDoc = null, Nullable<bool> isBlob = null)
Parameters
Type | Name | Description |
---|---|---|
TreeGridPdfExportProperties | pdfExportProperties | Options for customizing the PDF document during export. |
System.Nullable<System.Boolean> | isMultipleExport | Indicates whether multiple tree grids should be exported into the same file. |
System.Object | pdfDoc | A PDF document instance for the export operation. |
System.Nullable<System.Boolean> | isBlob | Determines if the export should be a blob instead of writing the response. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous export operation. |
Remarks
If parameters are not provided, the tree grid data is exported without any customization. Ensure that AllowPdfExport is enabled.
Examples
<button id="ExportToPdf" @onclick="ExportHandler">ExportToPdf</button>
<SfTreeGrid @ref="TreeGrid" AllowPdfExport="true" DataSource="@TreeData">
........
</SfTreeGrid>
@code {
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ExportHandler()
{
Syncfusion.Blazor.TreeGrid.TreeGridPdfExportProperties ExportProperties = new Syncfusion.Blazor.TreeGrid.TreeGridPdfExportProperties();
ExportProperties.IsCollapsedStatePersist = true; // Set to true to persist the collapsed state in the exported document.
await TreeGrid.ExportToPdfAsync(ExportProperties);
}
}
FilterByColumnAsync(String, String, Object, String, Nullable<Boolean>, Nullable<Boolean>, String, String)
Filters the Tree Grid rows based on column details asynchronously.
Declaration
public Task FilterByColumnAsync(string fieldName, string filterOperator, object filterValue, string predicate = null, Nullable<bool> matchCase = null, Nullable<bool> ignoreAccent = null, string actualFilterValue = null, string actualOperator = null)
Parameters
Type | Name | Description |
---|---|---|
System.String | fieldName | The field name by which the data is to be filtered. |
System.String | filterOperator | The Operator as a string. |
System.Object | filterValue | The value used for filtering. |
System.String | predicate | The predicate or condition such as AND/OR used when filtering multiple values. |
System.Nullable<System.Boolean> | matchCase | Determines whether the filtering is case-sensitive. |
System.Nullable<System.Boolean> | ignoreAccent | Determines whether to ignore accents during filtering. |
System.String | actualFilterValue | The actual value used for filtering. |
System.String | actualOperator | The actual operator used for filtering. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
The property AllowFiltering
should be set to true.
Examples
<button id="FilterByColumn" @onclick="FilterHandler">FilterByColumn</button>
<SfTreeGrid @ref="TreeGrid" AllowFiltering="true" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task FilterHandler()
{
await TreeGrid.FilterByColumnAsync("TaskName", "equal", "Child task 1");
}
}
FocusAsync()
Focuses the Tree Grid element in UI.
Declaration
public Task FocusAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
Helps in doing keyboard interactions by focusing the tree grid element.
Examples
<button id="Focus" @onclick="FocusHandler">Focus</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task FocusHandler()
{
await TreeGrid.FocusAsync();
}
}
GetBatchChangesAsync()
Returns the added, edited, and deleted data before a bulk save to the data source in the batch edit mode of the Tree Grid asynchronously.
Declaration
public Task<BatchChanges<TValue>> GetBatchChangesAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<BatchChanges<TValue>> | A System.Threading.Tasks.Task<> representing the asynchronous operation, containing the BatchChanges<T>. |
Remarks
This method helps to obtain the modified data in batch editing.
Examples
<button id="GetBatchChanges" @onclick="BatchHandler">GetBatchChanges</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Batch" />
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task BatchHandler()
{
var data = await TreeGrid.GetBatchChangesAsync();
}
}
GetCheckedRecordsAsync()
Returns the records of the checked checkbox column in the UI asynchronously.
Declaration
public Task<List<TValue>> GetCheckedRecordsAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.Collections.Generic.List<TValue>> | A System.Threading.Tasks.Task<> representing the asynchronous operation, containing a list of |
Remarks
This method helps to obtain the checked records from the data source.
Examples
<button id="GetCheckedRecords" @onclick="CheckedRecordsHandler">GetCheckedRecords</button>
<SfTreeGrid @ref="TreeGrid" AutoCheckHierarchy="true" DataSource="@TreeData">
<TreeGridColumns>
.................
<TreeGridColumn Field="TaskName" ShowCheckbox="true" HeaderText="Task Name" Width="160"></TreeGridColumn>
.............
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task CheckedRecordsHandler()
{
var data = await TreeGrid.GetCheckedRecordsAsync();
}
}
GetCheckedRowIndexes()
Returns the row indexes of checked checkbox column.
Declaration
public Task<List<int>> GetCheckedRowIndexes()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.Collections.Generic.List<System.Int32>> | System.Threading.Tasks.Task. |
Remarks
Helps to obtain checked records from data source.
Examples
<button id="GetCheckedRowIndexes" @onclick="GetDataHandler">GetCheckedRowIndexes</button>
<SfTreeGrid @ref="TreeGrid" AutoCheckHierarchy="true" DataSource="@TreeData">
<TreeGridColumns>
.................
<TreeGridColumn Field="TaskName" ShowCheckbox="true" HeaderText="Task Name" Width="160"></TreeGridColumn>
.............
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetDataHandler()
{
var data = await TreeGrid.GetCheckedRowIndexes();
}
GetColumnByFieldAsync(String)
Returns a TreeGridColumn object from the provided column name.
Declaration
public Task<TreeGridColumn> GetColumnByFieldAsync(string field)
Parameters
Type | Name | Description |
---|---|---|
System.String | field | The field name of the column. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<TreeGridColumn> | System.Threading.Tasks.Task. |
Remarks
Helps to read other column informations from the column name.
Examples
<button id="GetColumnByField" @onclick="GetColumnHandler">GetColumnByField</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridColumns>
.................
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
.............
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetColumnHandler()
{
var column = await TreeGrid.GetColumnByFieldAsync("TaskName"); // pass field name here.
}
GetColumnByUidAsync(String)
Returns a TreeGridColumn object from the provided column's unique id value.
Declaration
public Task<TreeGridColumn> GetColumnByUidAsync(string uid)
Parameters
Type | Name | Description |
---|---|---|
System.String | uid | The unique id value of the column to retrieve. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<TreeGridColumn> | A System.Threading.Tasks.Task<> representing the asynchronous operation, with a TreeGridColumn as the result. |
Remarks
Helps to read other column information from the column name.
Examples
<button id="GetColumnByUid" @onclick="GetColumnHandler">GetColumnByUid</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridColumns>
...
<TreeGridColumn Field="TaskName" Uid="task_name" HeaderText="Task Name" Width="160"></TreeGridColumn>
...
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetColumnHandler()
{
var column = await TreeGrid.GetColumnByUidAsync("task_name"); // pass uid value here.
}
}
GetColumnFieldNamesAsync()
Returns the collection of column names from the tree 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, with a System.Collections.Generic.List<> as the result. |
Examples
<button id="GetColumnFieldNames" @onclick="GetColumnHandler">GetColumnFieldNames</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridColumns>
...
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetColumnHandler()
{
var columns = await TreeGrid.GetColumnFieldNamesAsync();
}
}
GetColumnIndexByFieldAsync(String)
Returns the index of a particular column from the tree grid column collections.
Declaration
public Task<int> GetColumnIndexByFieldAsync(string field)
Parameters
Type | Name | Description |
---|---|---|
System.String | field | The field name of the column. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.Int32> | A System.Threading.Tasks.Task<> representing the asynchronous operation, with an System.Int32 as the result. |
Examples
<button id="GetColumnIndexByField" @onclick="GetColumnHandler">GetColumnIndexByField</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridColumns>
...
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
...
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetColumnHandler()
{
var columnIndex = await TreeGrid.GetColumnIndexByFieldAsync("TaskName"); // pass field name here.
}
}
GetColumnIndexByUidAsync(String)
Returns the index of a particular column from the tree grid columns collection.
Declaration
public Task<int> GetColumnIndexByUidAsync(string uid)
Parameters
Type | Name | Description |
---|---|---|
System.String | uid | The unique id value of the column. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.Int32> | A System.Threading.Tasks.Task<> representing the asynchronous operation, with an System.Int32 as the result. |
Examples
<button id="GetColumnIndexByUid" @onclick="GetColumnHandler">GetColumnIndexByUid</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridColumns>
...
<TreeGridColumn Field="TaskName" Uid="task_name" HeaderText="Task Name" Width="160"></TreeGridColumn>
...
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetColumnHandler()
{
var columnIndex = await TreeGrid.GetColumnIndexByUidAsync("task_name"); // pass uid value here.
}
}
GetColumnsAsync()
Returns the columns collection of the tree grid.
Declaration
public Task<List<TreeGridColumn>> GetColumnsAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.Collections.Generic.List<TreeGridColumn>> | A System.Threading.Tasks.Task<> representing the asynchronous operation, with a System.Collections.Generic.List<> as the result. |
Examples
<button id="GetColumns" @onclick="GetColumnHandler">GetColumns</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridColumns>
...
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetColumnHandler()
{
var columns = await TreeGrid.GetColumnsAsync();
}
}
GetCurrentViewRecords()
Gets the data objects of the data source that are in the current view or page of the tree grid.
Declaration
public List<TValue> GetCurrentViewRecords()
Returns
Type | Description |
---|---|
System.Collections.Generic.List<TValue> | A System.Collections.Generic.List<> representing the data objects in the current view or page. |
Remarks
Returns current page records when paging or virtual scrolling is enabled. Otherwise, returns all records of the data source.
Examples
<button id="GetCurrentViewRecords" @onclick="GetDataHandler">GetCurrentViewRecords</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridColumns>
...
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private void GetDataHandler()
{
var records = TreeGrid.GetCurrentViewRecords();
}
}
GetFilteredRecordsAsync()
Returns all the filtered records from the tree grid. It returns an array of data objects for a local data source and a promise object if the tree grid has remote data binding.
Declaration
public Task<object> GetFilteredRecordsAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.Object> | A System.Threading.Tasks.Task<> representing the asynchronous operation, with an System.Object that contains the filtered records. |
Remarks
Helps to obtain the filtered data when filtering is applied in the tree grid.
Examples
<button id="GetFilteredRecords" @onclick="FilterHandler">GetFilteredRecords</button>
<SfTreeGrid @ref="TreeGrid" DataSource="TreeData" AllowFiltering="true">
...
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task FilterHandler()
{
var data = await TreeGrid.GetFilteredRecordsAsync();
}
}
GetPersistDataAsync()
Returns the serialized tree grid properties to be maintained in the persisted state.
Declaration
public Task<string> GetPersistDataAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.String> | System.Threading.Tasks.Task. |
Remarks
Users can use this method to later restore the tree grid state through SetPersistDataAsync(String) method.
Examples
<button id="GetPersistence" @onclick="GetPersistence">Get Persistence</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
public string treegridstate;
private async Task GetPersistence()
{
treegridstate = await TreeGrid.GetPersistDataAsync();
}
}
GetPrimaryKeyFieldNamesAsync()
Returns the names of the primary key columns in the tree 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, with a System.Collections.Generic.List<> containing the primary key column names. |
Examples
<button id="GetPrimaryKeyFieldNames" @onclick="GetDataHandler">GetPrimaryKeyFieldNames</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridColumns>
...
<TreeGridColumn Field="TaskId" HeaderText="Task ID" IsPrimaryKey="true" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
...
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetDataHandler()
{
var primaryKeyFieldName = await TreeGrid.GetPrimaryKeyFieldNamesAsync();
}
}
GetRowIndexByPrimaryKeyAsync(Object)
Returns the row element index from the primary key value of the corresponding data object in the data source.
Declaration
public Task<int> GetRowIndexByPrimaryKeyAsync(object value)
Parameters
Type | Name | Description |
---|---|---|
System.Object | value | Primary key value of a data object. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.Int32> | A System.Threading.Tasks.Task<> that represents the asynchronous operation. The task result contains the index of the row associated with the specified primary key value. |
Remarks
A primary key column must be specified using the IsPrimaryKey property.
Examples
<button id="GetRowIndexByPrimaryKey" @onclick="GetDataHandler">GetSelectedRowIndexes</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetDataHandler()
{
var rowIndex = await TreeGrid.GetRowIndexByPrimaryKeyAsync(1); // pass primary key value here.
}
}
GetRowModel(TValue)
Returns ITreeGridRowModel<TValue> that holds the information about level, expanded state, and other details of the record.
Declaration
public ITreeGridRowModel<TValue> GetRowModel(TValue records)
Parameters
Type | Name | Description |
---|---|---|
TValue | records | The record for which the hierarchy details are needed. |
Returns
Type | Description |
---|---|
ITreeGridRowModel<TValue> | Returns ITreeGridRowModel<TValue> which holds the hierarchy information of a record. |
Examples
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridEvents TValue="TaskData" RowSelected="RowSelect"></TreeGridEvents>
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
public void RowSelect(RowSelectEventArgs<TaskData> args)
{
var treeItem = TreeGrid.GetRowModel(args.Data);
}
}
GetSelectedRecordsAsync()
Returns 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, with a System.Collections.Generic.List<> containing the selected records. |
Examples
<button id="GetSelectedRecords" @onclick="GetDataHandler">GetSelectedRecords</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetDataHandler()
{
var selectedRecords = await TreeGrid.GetSelectedRecordsAsync();
}
}
GetSelectedRowCellIndexesAsync()
Returns the collection of selected row and cell indexes.
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<> that represents the asynchronous operation. The task result contains a list of value tuples where each tuple represents a row and cell index. |
Examples
<button id="GetSelectedRowCellIndexes" @onclick="GetDataHandler">GetSelectedRowCellIndexes</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetDataHandler()
{
var selectedRowCellIndexes = await TreeGrid.GetSelectedRowCellIndexesAsync();
}
}
GetSelectedRowIndexesAsync()
Returns 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<> that represents the asynchronous operation. The task result contains a list of integers where each integer represents a row index. |
Examples
<button id="GetSelectedRowIndexes" @onclick="GetDataHandler">GetSelectedRowIndexes</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetDataHandler()
{
var selectedRowIndexes = await TreeGrid.GetSelectedRowIndexesAsync();
}
}
GetTotalItemsCountAsync()
Returns the total number of records in the tree grid's data source.
Declaration
public Task<int> GetTotalItemsCountAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.Int32> | A System.Threading.Tasks.Task<> representing the asynchronous operation, with a result of the total count of records as an int. |
Remarks
The total record count is determined based on the PageSizeMode property.
If the PageSizeMode
is set to Root
, only the root parent records are counted. If it is set to All
, all nested child records are included in the count.
Examples
<button id="GetTotalItemsCount" @onclick="GetTotalItems"> GetTotalItemsCount</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridColumns>
.................
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
.............
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetTotalItems()
{
var totalRecordCount = await TreeGrid.GetTotalItemsCountAsync ();
}
GetUidByColumnFieldAsync(String)
Returns the unique id value of a tree grid column.
Declaration
public Task<string> GetUidByColumnFieldAsync(string field)
Parameters
Type | Name | Description |
---|---|---|
System.String | field | The field name of the column. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.String> | A System.Threading.Tasks.Task<> that represents the asynchronous operation. The task result contains the unique id associated with the specified column field. |
Examples
<button id="GetUidByColumnField" @onclick="GetDataHandler">GetUidByColumnField</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridColumns>
.................
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="160"></TreeGridColumn>
.............
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetDataHandler()
{
var uid = await TreeGrid.GetUidByColumnFieldAsync("TaskName"); // pass field name here.
}
}
GetVisibleColumnsAsync()
Returns the visible tree grid columns collection in the UI.
Declaration
public Task<List<TreeGridColumn>> GetVisibleColumnsAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task<System.Collections.Generic.List<TreeGridColumn>> | A System.Threading.Tasks.Task<> that represents the asynchronous operation. The task result contains a list of TreeGridColumn representing the visible columns. |
Examples
<button id="GetVisibleColumns" @onclick="GetColumnHandler">GetVisibleColumns</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
.................
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task GetColumnHandler()
{
var visibleColumns = await TreeGrid.GetVisibleColumnsAsync();
}
}
GoToPageAsync(Int32)
Navigates to the specified target page.
Declaration
public Task GoToPageAsync(int pageNo)
Parameters
Type | Name | Description |
---|---|---|
System.Int32 | pageNo | The page number you want to navigate to. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
AllowPaging should be enabled.
Examples
<button id="GoToPage" @onclick="PagingHandler">GoToPage</button>
<SfTreeGrid @ref="TreeGrid" AllowPaging="true" DataSource="@TreeData">
.................
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task PagingHandler()
{
await TreeGrid.GoToPageAsync(3); // pass desired page number here.
}
}
HideColumnAsync(String, String)
Hides a particular tree grid column.
Declaration
public Task HideColumnAsync(string key, string hideBy = "HeaderText")
Parameters
Type | Name | Description |
---|---|---|
System.String | key | The column name. |
System.String | hideBy | Whether the column name is based on Field or HeaderText property of the column. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
You can dynamically hide a column. Based on the parameter hideBy, you can hide the column using the field or headerText value.
Examples
<button id="HideColumn" @onclick="ColumnHandler">HideColumn</button>
<button id="HideColumnByField" @onclick="ColumnFieldHandler">HideColumnByField</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
.................
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ColumnHandler()
{
await TreeGrid.HideColumnAsync("Task Name"); // pass headerText
}
private async Task ColumnFieldHandler()
{
await TreeGrid.HideColumnAsync("TaskName", "Field"); // pass second param as "Field" to hide using field name.
}
}
HideColumnsAsync(String[], String)
Hides specified tree grid columns.
Declaration
public Task HideColumnsAsync(string[] keys, string hideBy = "HeaderText")
Parameters
Type | Name | Description |
---|---|---|
System.String[] | keys | The column names. |
System.String | hideBy | Decides whether the column names are based on Field or HeaderText property of the column. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
You can dynamically hide columns.
Examples
<button id="HideColumns" @onclick="ColumnHandler">HideColumns</button>
<button id="HideColumnsByField" @onclick="ColumnFieldHandler">HideColumnsByField</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
.................
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ColumnHandler()
{
var columns = new List<string>() {"Task Name", "Duration" };
await TreeGrid.HideColumnsAsync(columns.ToArray());
}
private async Task ColumnFieldHandler()
{
var columns = new List<string>() {"TaskName", "Duration" };
await TreeGrid.HideColumnsAsync(columns.ToArray(), "Field"); // pass second param as "Field" to hide using field name.
}
}
HideSpinnerAsync()
Hides the spinner of the tree grid whenever needed.
Declaration
public Task HideSpinnerAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
When the tree grid spinner is displayed manually, you can manually hide the spinner using this method.
Examples
<button id="HideSpinner" @onclick="SpinnerHandler">HideSpinner</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
.................
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task SpinnerHandler()
{
await TreeGrid.HideSpinnerAsync(); // Hides the spinner.
}
}
OnAfterRenderAsync(Boolean)
Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type | Name | Description |
---|---|---|
System.Boolean | firstRender |
Returns
Type |
---|
System.Threading.Tasks.Task |
Overrides
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
OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
Declaration
protected override void OnObservableChange(string propertyName, object sender, bool isCollectionChanged = false, NotifyCollectionChangedEventArgs e = null)
Parameters
Type | Name | Description |
---|---|---|
System.String | propertyName | |
System.Object | sender | |
System.Boolean | isCollectionChanged | |
System.Collections.Specialized.NotifyCollectionChangedEventArgs | e |
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. |
Overrides
OpenColumnChooserAsync(Nullable<Double>, Nullable<Double>)
Opens the column chooser pop-up on the screen at the specified 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 | The X position on the screen where the column chooser will open. |
System.Nullable<System.Double> | y | The Y position on the screen where the column chooser will open. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous operation. |
Remarks
You can manually open the column chooser at any screen position at any desired time.
Examples
<button id="OpenColumnChooser" @onclick="ColumnHandler">OpenColumnChooser</button>
<SfTreeGrid @ref="TreeGrid" ShowColumnChooser="true" Toolbar="@(new List<string>() { "ColumnChooser" })"
DataSource="@TreeData">
...............
</SfTreeGrid>
@code {
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ColumnHandler()
{
await TreeGrid.OpenColumnChooserAsync(200, 50); // Pass desired X and Y values.
}
}
PasteAsync(String, Int32, Int32)
Fills a selected cell at the specified row and column with the given value.
Declaration
public Task PasteAsync(string data, int rowIndex, int colIndex)
Parameters
Type | Name | Description |
---|---|---|
System.String | data | The value to be inserted into the cell. |
System.Int32 | rowIndex | The row index of the target cell. |
System.Int32 | colIndex | The column index of the target cell. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous operation. |
Examples
<button id="Paste" @onclick="DataHandler">Paste</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
.................
</SfTreeGrid>
@code {
SfTreeGrid<BusinessObject> TreeGrid;
private async Task DataHandler()
{
await TreeGrid.PasteAsync("test", 0, 4); // Pass value, rowIndex, and colIndex.
}
}
PreventRender(Boolean)
Prevents the Tree Grid component from re-rendering. This method internally sets the value to be returned from the ShouldRender method.
Declaration
public void PreventRender(bool preventRender = true)
Parameters
Type | Name | Description |
---|---|---|
System.Boolean | preventRender | Default value is true. Toggles the |
PrintAsync()
Prints the tree grid data directly from your browser.
Declaration
public Task PrintAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous print operation. |
Remarks
You can customize print options using the PrintMode.
Examples
<button id="Print" @onclick="PrintHandler">Print</button>
<SfTreeGrid @ref="TreeGrid" Toolbar="@(new List<string>() { "Print" })" DataSource="@TreeData">
.................
</SfTreeGrid>
@code {
SfTreeGrid<BusinessObject> TreeGrid;
private async Task PrintHandler()
{
await TreeGrid.PrintAsync();
}
}
RefreshAsync()
Refreshes the tree grid header and content.
Declaration
public Task RefreshAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous refresh operation. |
Remarks
You can use this method whenever a manual refresh is needed for the tree grid.
Examples
<button id="Refresh" @onclick="RefreshHandler">Refresh</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
.................
</SfTreeGrid>
@code {
SfTreeGrid<BusinessObject> TreeGrid;
private async Task RefreshHandler()
{
await TreeGrid.RefreshAsync(); // Refresh the tree grid.
}
}
RefreshColumnsAsync()
Refreshes the tree grid when column changes occur.
Declaration
public Task RefreshColumnsAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous refresh operation. |
Remarks
Use this method whenever the TreeGridColumn object is modified externally.
Examples
<button id="RefreshColumns" @onclick="RefreshHandler">RefreshColumns</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
.................
</SfTreeGrid>
@code {
SfTreeGrid<BusinessObject> TreeGrid;
private async Task RefreshHandler()
{
await TreeGrid.RefreshColumnsAsync(); // Refresh the tree grid columns.
}
}
RefreshHeaderAsync()
Refreshes the tree grid header.
Declaration
public Task RefreshHeaderAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous refresh operation. |
Remarks
Use this method whenever the TreeGridColumn object is modified externally, and you need to refresh only the header element of the tree grid.
Examples
<button id="RefreshHeader" @onclick="RefreshHandler">RefreshHeader</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
.................
</SfTreeGrid>
@code {
SfTreeGrid<BusinessObject> TreeGrid;
private async Task RefreshHandler()
{
await TreeGrid.RefreshHeaderAsync(); // Refresh the tree grid headers.
}
}
ReorderColumnsAsync(List<String>, String)
Moves the columns position in UI from one column index to another.
Declaration
public Task ReorderColumnsAsync(List<string> fromFName, string toFName)
Parameters
Type | Name | Description |
---|---|---|
System.Collections.Generic.List<System.String> | fromFName | The list of field names to be moved together. |
System.String | toFName | The field name of the destination column. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A task that represents the asynchronous operation. |
Remarks
AllowReordering should be enabled.
Examples
<button id="ReorderColumns" @onclick="ColumnHandler">ReorderColumns</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
.................
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ColumnHandler()
{
await TreeGrid.ReorderColumnsAsync(new List<string>(){"TaskName", "Duration"}, "Progress");
}
ReorderRowAsync(Int32, Int32, String)
Moves a row position in UI from one row index to another.
Declaration
public Task ReorderRowAsync(int fromIndex, int toIndex, string position = null)
Parameters
Type | Name | Description |
---|---|---|
System.Int32 | fromIndex | The row index from which the row needs to be moved. |
System.Int32 | toIndex | The row index to which the row needs to be moved. |
System.String | position | One of the string values of RowPosition that decides whether to move the row as above, below, or child to destination row index. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A task that represents the asynchronous operation. |
Remarks
AllowRowDragAndDrop should be enabled.
Examples
<button id="ReorderRow" @onclick="RowHandler">ReorderRow</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
.................
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task RowHandler()
{
await TreeGrid.ReorderRowAsync(6, 5, "Child");
}
ResetPersistDataAsync()
Resets the current state and refreshes the tree grid with the original state given declaratively.
Declaration
public Task ResetPersistDataAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
Applicable when State Persistence feature is enabled in the tree grid.
Examples
<button id="ClearPersistence" @onclick="ClearPersistence">Clear Persistence</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ClearPersistence()
{
await TreeGrid.ResetPersistDataAsync();
}
}
SaveCellAsync()
Saves the cell value that is currently edited.
Declaration
public Task SaveCellAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A task that represents the asynchronous operation. |
Remarks
Examples
<button id="SaveCell" @onclick="CellHandler">SaveCell</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridEditSettings AllowEditing="true" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Batch"/>
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task CellHandler()
{
await TreeGrid.SaveCellAsync();
}
}
ScrollIntoViewAsync(Int32, Int32, Int32)
Scroll to a 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 specifies the row |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous scroll operation. |
Remarks
To scroll the tree grid content horizontally based on the specified column index, set EnableColumnVirtualization property in the Blazor Tree Grid. To scroll the tree grid content vertically based on the specified row index, set EnableVirtualization property in the Blazor Tree Grid.
Examples
The following example demonstrates how to use the ScrollIntoViewAsync method to scroll to a specific row or column in a Blazor Tree Grid:
<button id="ScrollIntoView" @onclick="Scroll">ScrollIntoView</button>
<SfTreeGrid @ref="treegrid" DataSource="@Orders">
........
</SfTreeGrid>
@code{
SfTreeGrid<Order> treegrid;
private async Task Scroll()
{
await treegrid.ScrollIntoViewAsync(2, 3);
}
}
SearchAsync(String)
Searches the tree grid records using the given key.
Declaration
public Task SearchAsync(string searchString)
Parameters
Type | Name | Description |
---|---|---|
System.String | searchString | The search key. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous search operation. |
Remarks
Searches the given key and displays only the rows which match the key with any of its column values.
Examples
<button id="Search" @onclick="DataHandler">Search</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task DataHandler()
{
await TreeGrid.SearchAsync("Child task 1");
}
}
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 tuple of row and cell index. Example: (0, 1). |
System.Nullable<System.Boolean> | isToggle | Toggles the selection. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous selection operation. |
Remarks
AllowSelection should be enabled.
Examples
<button id="SelectCell" @onclick="CellHandler">SelectCell</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridSelectionSettings Type="SelectionType.Multiple" Mode="Syncfusion.Blazor.Grids.SelectionMode.Cell" ></TreeGridSelectionSettings>
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task CellHandler()
{
await TreeGrid.SelectCellAsync((1, 1)); // pass row and cell index
}
}
SelectCheckboxesAsync(Int32[])
Checks the column checkboxes using row indexes.
Declaration
public Task SelectCheckboxesAsync(int[] rowIndexes)
Parameters
Type | Name | Description |
---|---|---|
System.Int32[] | rowIndexes | The row indexes in which the checkbox to be checked. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
ShowCheckbox should be enabled.
Examples
<button id="SelectCheckboxes" @onclick="CheckboxHandler">SelectCheckboxes</button>
<SfTreeGrid @ref="TreeGrid" AutoCheckHierarchy="true" DataSource="@TreeData">
<TreeGridColumns>
.................
<TreeGridColumn Field="TaskName" ShowCheckbox="true" HeaderText="Task Name" Width="160"></TreeGridColumn>
.............
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task CellHandler()
{
var indexes = new List<int>(){5, 6};
await TreeGrid.SelectCheckboxesAsync(indexes.ToArray());
}
}
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 | The row index to be selected. |
System.Nullable<System.Boolean> | isToggle | Toggles the selection. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous selection operation. |
Remarks
AllowSelection should be enabled.
Examples
<button id="SelectRow" @onclick="RowHandler">SelectRow</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridColumns>
.............
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task RowHandler()
{
await TreeGrid.SelectRowAsync(2);
}
}
SelectRowsAsync(Int32[])
Selects a collection of rows by indexes.
Declaration
public Task SelectRowsAsync(int[] rowIndexes)
Parameters
Type | Name | Description |
---|---|---|
System.Int32[] | rowIndexes | The indexes of rows to be selected. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous selection operation. |
Remarks
AllowSelection should be enabled.
Examples
<button id="SelectRow" @onclick="RowHandler">SelectRow</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridColumns>
.............
</TreeGridColumns>
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task RowHandler()
{
var indexes = new List<int>(){2, 3};
await TreeGrid.SelectRowsAsync(indexes.ToArray());
}
}
SetCellValueAsync(Object, String, Object)
Updates the value of a specific cell based on the provided primary key value.
Declaration
public Task SetCellValueAsync(object key, string field, object value)
Parameters
Type | Name | Description |
---|---|---|
System.Object | key | The primary key of the record whose cell value needs to be updated. |
System.String | field | The name of the column or field where the value will be updated. |
System.Object | value | The new value to set in the cell. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
Ensure that Mode is set to Cell
or Batch
.
Also, a primary key should be assigned using IsPrimaryKey.
Examples
<button id="SetCellValue" @onclick="CellHandler">SetCellValue</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridEditSettings AllowEditing="true" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Cell"/>
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task CellHandler()
{
await TreeGrid.SetCellValueAsync(2, "TaskName", "test");
}
}
SetIndentRecordAsync(TValue)
Indent the selected or specified record based on its level.
Declaration
public Task SetIndentRecordAsync(TValue data)
Parameters
Type | Name | Description |
---|---|---|
TValue | data | Specify the record which needs to be indented. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
SetOutdentRecordAsync(TValue, Boolean)
Outdent the selected or specified record based on its level.
Declaration
public Task SetOutdentRecordAsync(TValue data, bool IsUpdateSiblingRows = false)
Parameters
Type | Name | Description |
---|---|---|
TValue | data | Specify the record which needs to be outdented. |
System.Boolean | IsUpdateSiblingRows | Optional boolean value, which specify whether to indent the sibling record as child to selected record. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | System.Threading.Tasks.Task. |
SetPersistDataAsync(String)
Loads an already saved state of the tree grid.
Declaration
public Task SetPersistDataAsync(string properties)
Parameters
Type | Name | Description |
---|---|---|
System.String | properties | Serialized tree grid properties to apply to the current state. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
Users can view the pre-stored state easily in the tree grid. The current state can be stored using SetPersistDataAsync(String) method.
Examples
<button id="SetPersistence" @onclick="SetPersistence">Set Persistence</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
public string treegridstate;
private async Task SetPersistence()
{
await TreeGrid.SetPersistDataAsync(treegridstate);
}
}
SetRowDataAsync(Object, TValue)
Updates the values in a particular row based on the specified primary key value.
Declaration
public Task SetRowDataAsync(object primaryKey, TValue rowData)
Parameters
Type | Name | Description |
---|---|---|
System.Object | primaryKey | The primary key value identifying the record object in the data source. |
TValue | rowData | The new data for the row being updated. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
Ensure that AllowEditing is enabled to allow row updates.
Examples
<button id="SetRowData" @onclick="DataHandler">SetRowData</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Row" />
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task DataHandler()
{
var data = new BusinessObject() { TaskId=2, TaskName = "Test Add", StartDate = new DateTime(2017, 10, 23), Duration = 10, Progress = 70, Priority = "Critical" };
await TreeGrid.SetRowDataAsync(2, data);
}
}
ShouldRender()
Declaration
protected override bool ShouldRender()
Returns
Type |
---|
System.Boolean |
ShowColumnAsync(String, String)
Shows a particular tree grid column.
Declaration
public Task ShowColumnAsync(string key, string showBy = "HeaderText")
Parameters
Type | Name | Description |
---|---|---|
System.String | key | The column name to show. |
System.String | showBy | Decides whether the column name is based on Field or HeaderText property of the column. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
You can dynamically show a hidden column.
Examples
<button id="ShowColumn" @onclick="ColumnHandler">ShowColumn</button>
<button id="ShowColumnByField" @onclick="ColumnFieldHandler">ShowColumnByField</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
.................
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ColumnHandler()
{
await TreeGrid.ShowColumnAsync("Task Name"); // pass headerText
}
private async Task ColumnFieldHandler()
{
await TreeGrid.ShowColumnAsync("TaskName", "Field"); // pass second param as "Field" to hide using field name.
}
}
ShowColumnsAsync(String[], String)
Shows specified tree grid columns.
Declaration
public Task ShowColumnsAsync(string[] keys, string showBy = "HeaderText")
Parameters
Type | Name | Description |
---|---|---|
System.String[] | keys | The column names to display. |
System.String | showBy | Indicates whether the column names are based on Field or HeaderText property of the column. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
You can dynamically show hidden columns.
Examples
<button id="ShowColumns" @onclick="ColumnHandler">ShowColumns</button>
<button id="ShowColumnsByField" @onclick="ColumnFieldHandler">ShowColumnsByField</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
.................
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task ColumnHandler()
{
var columns = new List<string>() {"Task Name", "Duration" };
await TreeGrid.ShowColumnsAsync(columns.ToArray());
}
private async Task ColumnFieldHandler()
{
var columns = new List<string>() {"TaskName", "Duration" };
await TreeGrid.ShowColumnsAsync(columns.ToArray(), "Field"); // pass second param as "Field" to hide using field name.
}
}
ShowSpinnerAsync()
Shows the spinner in tree grid whenever needed to indicate that a tree grid action is in processing.
Declaration
public Task ShowSpinnerAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Examples
<button id="ShowSpinner" @onclick="SpinnerHandler">ShowSpinner</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
.................
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task SpinnerHandler()
{
await TreeGrid.ShowSpinnerAsync(); // shows the spinner.
}
}
SortByColumnAsync(String, SortDirection, Nullable<Boolean>)
Sorts a column with the column details.
Declaration
public Task SortByColumnAsync(string columnName, SortDirection direction, Nullable<bool> isMultiSort = null)
Parameters
Type | Name | Description |
---|---|---|
System.String | columnName | The field name to be sorted. |
SortDirection | direction | One of the values of SortDirection. |
System.Nullable<System.Boolean> | isMultiSort | Decides whether to do multi-sorting. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
AllowSorting
should be true.
Examples
<button id="SortByColumn" @onclick="SortHandler">SortByColumn</button>
<SfTreeGrid @ref="TreeGrid" AllowSorting="true" DataSource="@TreeData">
.................
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task SortHandler()
{
await TreeGrid.SortByColumn("TaskName", SortDirection.Descending);
}
}
StartEditAsync()
Renders an edit form to edit the selected row.
Declaration
public Task StartEditAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
A row must be selected before calling this method.
Examples
<button id="StartEdit" @onclick="DataHandler">StartEdit</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridEditSettings AllowEditing="true" />
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task DataHandler()
{
await TreeGrid.StartEditAsync();
}
}
UpdateCellAsync(Int32, String, Object)
Updates the specified cell with given value.
Declaration
public Task UpdateCellAsync(int rowIndex, string field, object value)
Parameters
Type | Name | Description |
---|---|---|
System.Int32 | rowIndex | The row index of the desired cell. |
System.String | field | The column name of the desired cell. |
System.Object | value | The new value to be assigned to the cell. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
Mode should be Cell
or Batch
, and AllowEditing should be enabled.
Examples
<button id="UpdateCell" @onclick="DataHandler">UpdateCell</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridEditSettings AllowEditing="true" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Cell" />
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task DataHandler()
{
await TreeGrid.UpdateCellAsync(1, 'TaskName', 'test');
}
}
UpdateExternalMessageAsync(String)
Declaration
public Task UpdateExternalMessageAsync(string message)
Parameters
Type | Name | Description |
---|---|---|
System.String | message |
Returns
Type |
---|
System.Threading.Tasks.Task |
UpdateRowAsync(Int32, TValue)
Updates the specified row with given values.
Declaration
public Task UpdateRowAsync(int index, TValue data)
Parameters
Type | Name | Description |
---|---|---|
System.Int32 | index | The row index of the desired row to be updated. |
TValue | data | The new data to update the row with. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
AllowEditing must be enabled.
Examples
<button id="UpdateRow" @onclick="DataHandler">UpdateRow</button>
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData">
<TreeGridEditSettings AllowEditing="true" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Batch" />
........
</SfTreeGrid>
@code{
SfTreeGrid<BusinessObject> TreeGrid;
private async Task DataHandler()
{
var data = TreeGrid.GetCurrentViewRecords()[6];
data.TaskName = "test";
data.Duration = 80;
await TreeGrid.UpdateRowAsync(6, data);
}
}