Class SfDropDownTree<TValue, TItem>

The Dropdown Tree component allows to select required values in input from hierarchical tree structure of data.

Inheritance
System.Object
SfBaseComponent
SfDropDownTree<TValue, TItem>
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Navigations
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfDropDownTree<TValue, TItem> : SfBaseComponent, IDropDownTree
Type Parameters
Name Description
TValue

Specifies the value type.
TItem

Specifies the type of SfDropDownTree<TValue, TItem>.
Examples

In the following code example, a basic Dropdown Tree component is initialized with simple tree list items.

@using Syncfusion.Blazor.DropDowns
<SfDropDownTree TItem="TreeItem" TValue="string">
   <DropDownTreeField  TItem="TreeItem" DataSource="TreeDataSource" Id="NodeId" Text="NodeText" Expanded="Expanded" Child="@("Child")"></DropDownTreeField>
</SfDropDownTree>

@code {
    List<TreeItem> TreeDataSource = new List<TreeItem>();
    protected async override Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        TreeDataSource.Add(new TreeItem
        {
            NodeId = "01",
            NodeText = "Local Disk (C:)",
            Expanded = true,
            Child = new List<TreeItem>()
            {
                new TreeItem { NodeId = "01-01", NodeText = "Program Files",
                Child = new List<TreeItem>()
                {
                    new TreeItem { NodeId = "01-01-01", NodeText = "Windows NT" },
                    new TreeItem { NodeId = "01-01-02", NodeText = "Windows Mail" },
                },
            },
        },
        });
        }
         public class TreeItem
         {
            public string NodeId { get; set; }
            public string NodeText { get; set; }
            public string Icon { get; set; }
            public bool Expanded { get; set; }
            public bool Selected { get; set; }
            public List<TreeItem> Child { get; set; }
          }
    }

Constructors

SfDropDownTree()

Declaration
public SfDropDownTree()

Properties

ActionFailureTemplate

Gets or sets the template used to render the content of the popup list in the SfDropDownTree<TValue, TItem> component when the data fetch request from the remote server fails.

Declaration
public RenderFragment ActionFailureTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

The template content. The default value in null.
Remarks

You can specify a custom message to be displayed to users when the data fetch request fails.

Examples

In the following code example, used the ActionFailureTemplate to customize the failure content.

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data

<SfDropDownTree TValue="string" TItem="TreeData" ID="default1" Width="580px" PopupWidth="580px" Placeholder="Select Folder" Text="Nancy">
    <ChildContent>
        <DropDownTreeField TItem="TreeData" Query="@employeeQuery" Id="EmployeeID" Text="FirstName" HasChildren="EmployeeID">
            <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svcs" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor" CrossDomain="true"></SfDataManager>
        </DropDownTreeField>
        <DropDownTreeField TItem="TreeData" Level="1" Query="@orderQuery" Id="OrderID" Text="ShipName" ParentID="EmployeeID">
            <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svcs" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor" CrossDomain="true"></SfDataManager>
        </DropDownTreeField>
    </ChildContent>
    <ActionFailureTemplate>
        <div>action failure</div>
    </ActionFailureTemplate>
</SfDropDownTree>

@code {
// Specify the column value of the employee table.
public static List<string> EmployeeDetails = new List<string>() { "EmployeeID", "FirstName", "Title" };

// Specify the query value of the DropDownTree component.
Query employeeQuery = new Query().From("Employees").Select(EmployeeDetails).Take(5);

// Specify the column value of the order table.
public static List<string> OrderDetails = new List<string>() { "OrderID", "EmployeeID", "ShipName" };

// Specify the query value of the DropDownTree component.
Query orderQuery = new Query().From("Orders").Select(OrderDetails).Take(5);

class TreeData
{
    public int? EmployeeID { get; set; }
    public int OrderID { get; set; }
    public string ShipName { get; set; }
    public string FirstName { get; set; }
}
}

AllowFiltering

Gets or sets a value indicating whether the filtering option is enabled in the SfDropDownTree<TValue, TItem> component.

Declaration
public bool AllowFiltering { get; set; }
Property Value
Type Description
System.Boolean

Set to true to enable the filtering functionality; otherwise, set to 'false'.
Remarks

Filter action is performed when the user types in the search box, and the matched items are collected through the 'Filtering' event. If searching character does not match, NoRecordsTemplate property value will be shown.

AllowMultiSelection

Gets or sets a value that indicates whether multi-selection of nodes is enabled in the SfDropDownTree<TValue, TItem> component.

Declaration
public bool AllowMultiSelection { get; set; }
Property Value
Type Description
System.Boolean

Set to true if multi-selection is enabled; otherwise, false.
Remarks

When multi-selection is enabled, users can select multiple nodes in the SfDropDownTree<TValue, TItem> component by holding down the CTRL key and clicking on the nodes they want to select. Consecutive nodes can be selected by holding down the SHIFT key and clicking on the initial and final nodes of the range to be selected. The ShowCheckBox property can also be used to enable checkbox support for node selection.

AutoUpdateCheckState

Gets or sets a value that determines whether the checked state of parent nodes in the SfDropDownTree<TValue, TItem> component is automatically updated based on the checked state of their child nodes.

Declaration
public bool AutoUpdateCheckState { get; set; }
Property Value
Type Description
System.Boolean

true if automatic update of parent node checked states is enabled; otherwise, false.
Remarks

When the AutoUpdateCheckState property is set to true, the checked state of parent nodes in the SfDropDownTree<TValue, TItem> component will be automatically updated based on the checked state of their child nodes. This is useful for maintaining the consistency of the SfDropDownTree<TValue, TItem> checkbox hierarchy and ensuring that parent nodes are checked only if all their child nodes are also checked. This property only works when the ShowCheckBox property is set to true.

Created

Gets or sets an event callback that will be invoked when the component is created.

Declaration
public EventCallback<object> Created { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

An event callback function.

CssClass

Gets or sets a CSS class string to customize the appearance of the SfDropDownTree<TValue, TItem> component.

Declaration
public string CssClass { get; set; }
Property Value
Type Description
System.String

Accepts a CSS class string separated by space to customize the appearance. The default value is String.Empty.
Remarks

Multiple CSS classes can be added for the component using this property to customize its styles.

DelimiterChar

Sets the value separator character in the input element when the AllowMultiSelection or ShowCheckBox support is enabled in the SfDropDownTree<TValue, TItem> component.

Declaration
public string DelimiterChar { get; set; }
Property Value
Type Description
System.String

Accepts the string value. The default value is ,.
Remarks

The delimiter character is applicable only for default and delimiter visibility modes.

Destroyed

Gets or sets the event callback that will be invoked when the component is destroyed.

Declaration
public EventCallback<object> Destroyed { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

An event callback function.

Disabled

Enables or disables the SfDropDownTree<TValue, TItem> component.

Declaration
public bool Disabled { get; set; }
Property Value
Type Description
System.Boolean

Set to true, Allow the user to interact with the component. Otherwise, false. The default value is false.

EnablePersistence

Gets or sets whether to persist the state of the SfDropDownTree<TValue, TItem> component between page reloads.

Declaration
public bool EnablePersistence { get; set; }
Property Value
Type Description
System.Boolean

Set to true, if the component's state persistence is enabled. The default value is false.
Remarks

The following properties will be stored in browser local storage to persist the state of the component when the page reloads:

  1. ValueThe value of nodes that are selected in the Dropdown Tree component.
  2. TextThe text of nodes that are selected in the Dropdown Tree component.

ExpandOn

Gets or sets the value that indicates the action on which the node expands or collapses in the popup of the SfDropDownTree<TValue, TItem> component.

Declaration
public ExpandAction ExpandOn { get; set; }
Property Value
Type Description
ExpandAction

The default value is ExpandAction.DoubleClick.
Remarks

The available actions are:

  • ExpandAction.Click: The expand/collapse operation happens when you single-click on the node in desktop.
  • ExpandAction.DblClick: The expand/collapse operation happens when you double-click on the node in desktop.
  • ExpandAction.None: The expand/collapse operation will not happen. In mobile devices, the node expand/collapse action happens on single tap always.
Examples
code example

FilterBarPlaceholder

Gets or sets the text that is displayed when the filter textbox has no text and removes the focus.

Declaration
public string FilterBarPlaceholder { get; set; }
Property Value
Type Description
System.String

The text that is displayed when the filter text box has no search text. The default value is String.Empty.
Remarks

This property value is updated only when the AllowFiltering is enabled.

Filtering

Gets or sets an event callback that will be invoked when user types a text in search box.

Declaration
public EventCallback<DdtFilteringEventArgs> Filtering { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DdtFilteringEventArgs>

An event callback function.

FilterType

Gets or sets a value that indicates the filter type,the component needs to be considered on search action.

Declaration
public FilterType FilterType { get; set; }
Property Value
Type Description
FilterType

One of the FilterType enumeration. The default value is StartsWith
Remarks

If the FilterType is StartsWith, the filtering will be performed using starts with operator. If the FilterType is EndsWith, the filtering will be performed using ends with operator. If the FilterType is Contains, the filtering will be performed using contains operator.

FloatLabelType

Gets or sets the floating label behavior of the input that the placeholder text floats above the input based on the following values.

Possible values are:

  • NeverThe label will never float in the input when the placeholder is available.
  • AlwaysThe floating label will always float above the input.
  • AutoThe floating label will float above the input after focusing or entering a value in the input.
Declaration
public FloatLabelType FloatLabelType { get; set; }
Property Value
Type Description
FloatLabelType

The default value is Never.

FooterTemplate

Gets or sets the template that renders a customized footer content at the bottom of the pop-up list.

Declaration
public RenderFragment FooterTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

The template content. The default value in null.
Examples

In the following code example, used the FooterTemplate to customize the footer content.

@using Syncfusion.Blazor.Navigations

<SfDropDownTree TValue="string" TItem="TreeData">
    <ChildContent>
        <DropDownTreeField TItem="TreeData" DataSource="@TreeDataSource" Id="Id" ParentID="Pid" Text="Name" HasChildren="HasChild" Expanded="Expanded" Selected="IsSelected"></DropDownTreeField>
    </ChildContent>
    <FooterTemplate>
        <div> Total collection @TreeDataSource.Count</div>
    </FooterTemplate>
</SfDropDownTree>

@code {
    List<TreeData> TreeDataSource = new List<TreeData>();
    protected override void OnInitialized()
    {
        base.OnInitialized();
        TreeDataSource.Add(new TreeData
            {
                Id = "1",
                Name = "Discover Music",
                HasChild = true,
                Expanded = true
            });
        TreeDataSource.Add(new TreeData
            {
                Id = "2",
                Pid = "1",
                Name = "Hot Singles",
            });
        TreeDataSource.Add(new TreeData
            {
                Id = "3",
                Pid = "1",
                Name = "Rising Artists"
            });
        TreeDataSource.Add(new TreeData
            {
                Id = "4",
                Pid = "1",
                Name = "Live Music"
            });
    }

    class TreeData
    {
        public string Id { get; set; }
        public string Pid { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public bool IsSelected { get; set; }
        public string Name { get; set; }
    }
}

HeaderTemplate

Gets or sets the template that renders a customized header content at the top of the pop-up list.

Declaration
public RenderFragment HeaderTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

The template content. The default value in null.
Examples

In the following code example, used the HeaderTemplate to customize the header content.

@using Syncfusion.Blazor.Navigations

<SfDropDownTree TValue="string" TItem="TreeData">
    <ChildContent>
        <DropDownTreeField TItem="TreeData" DataSource="@TreeDataSource" Id="Id" ParentID="Pid" Text="Name" HasChildren="HasChild" Expanded="Expanded" Selected="IsSelected"></DropDownTreeField>
    </ChildContent>
    <HeaderTemplate>
        <div> Music Categories</div>
    </HeaderTemplate>
</SfDropDownTree>

@code {
    List<TreeData> TreeDataSource = new List<TreeData>();
    protected override void OnInitialized()
    {
        base.OnInitialized();
        TreeDataSource.Add(new TreeData
            {
                Id = "1",
                Name = "Discover Music",
                HasChild = true,
                Expanded = true
            });
        TreeDataSource.Add(new TreeData
            {
                Id = "2",
                Pid = "1",
                Name = "Hot Singles",
            });
        TreeDataSource.Add(new TreeData
            {
                Id = "3",
                Pid = "1",
                Name = "Rising Artists"
            });
        TreeDataSource.Add(new TreeData
            {
                Id = "4",
                Pid = "1",
                Name = "Live Music"
            });
    }

    class TreeData
    {
        public string Id { get; set; }
        public string Pid { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public bool IsSelected { get; set; }
        public string Name { get; set; }
    }
}

HtmlAttributes

Gets or sets a a value that indicates the collection of additional attributes that will be applied to the SfDropDownTree<TValue, TItem> container element.

Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type Description
System.Collections.Generic.Dictionary<System.String, System.Object>

The value as dictionary collection.The default value is null
Remarks

Additional attributes can be added by specifying as inline attributes or by specifying @attributes directive.

Examples
@using Syncfusion.Blazor.Navigations

<SfDropDownTree TItem="EmployeeData" TValue="string" Width="100%" CssClass="custom" Placeholder="Select an employee" PopupHeight="250px" HtmlAttributes="@htmlAttribute">
    <DropDownTreeField TItem="EmployeeData" DataSource="Data" Id="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>
</SfDropDownTree>

@code {
    Dictionary<string, object> htmlAttribute = new Dictionary<string, object>()
    {
        {"name", "employees" },
        {"style", "background-color: yellow; text-align: right" },
        {"title", "Syncfusion DropDownTree" }
    };

    public class EmployeeData
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Job { get; set; }
        public string image { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public string Status { get; set; }
        public string PId { get; set; }
    }

    List<EmployeeData> Data = new List<EmployeeData>
    {
        new EmployeeData() {Id="1", Name = "Steven Buchanan",  Job = "General Manager", image= "10",HasChild=true,Expanded=true,Status="busy" },
        new EmployeeData() {Id="2",PId="1", Name = "Laura Callahan",  Job = "Product Manager", image= "2",HasChild=true,Status="online" },
    };
}

ID

Gets or sets the ID attribute for the SfDropDownTree<TValue, TItem> element.

Declaration
public string ID { get; set; }
Property Value
Type Description
System.String

A string value representing the ID of the Dropdown Tree element.

IgnoreAccent

Gets or sets whether diacritic characters or accents are ignored when filtering.

Declaration
public bool IgnoreAccent { get; set; }
Property Value
Type Description
System.Boolean

Set to true, ignores the diacritic characters or accents when filtering. The default value is false.

IgnoreCase

Gets or sets whether case-sensitivity is enabled or disabled when searching for suggestions.

Declaration
public bool IgnoreCase { get; set; }
Property Value
Type Description
System.Boolean

Set to false, consider the case-sensitive on performing the search to find suggestions. The default value is true.

ItemTemplate

Gets or sets the template design and assign it to each tree list item present in the popup.

Declaration
public RenderFragment<TItem> ItemTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<TItem>

The template content. The default value is null.
Examples

In the following code example, the Dropdown Tree list items are customized with employee information such as name and job using the ItemTemplate property.

@using Syncfusion.Blazor.Navigations

<SfDropDownTree TItem="EmployeeData" TValue="string" Width="100%" CssClass="custom" Placeholder="Select an employee" PopupHeight="250px">
    <ChildContent>
        <DropDownTreeField TItem="EmployeeData" DataSource="Data" Id="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>
    </ChildContent>
    <ItemTemplate>
        <div>
            <div>
                <span>@((context as EmployeeData).Name) - </span>
                <span>@((context as EmployeeData).Job)</span>
            </div>
        </div>
    </ItemTemplate>
</SfDropDownTree>

@code {
    List<EmployeeData> TreeDataSource = new List<EmployeeData>();

    public class EmployeeData
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Job { get; set; }
        public string image { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public string Status { get; set; }
        public string PId { get; set; }
    }

    List<EmployeeData> Data = new List<EmployeeData>
    {
        new EmployeeData() {Id="1", Name = "Steven Buchanan",  Job = "General Manager", image= "10",HasChild=true,Expanded=true,Status="busy" },
        new EmployeeData() {Id="2",PId="1", Name = "Laura Callahan",  Job = "Product Manager", image= "2",HasChild=true,Status="online" },
        new EmployeeData() {Id="3",PId="2", Name = "Andrew Fuller",  Job = "Team Lead", image= "7",HasChild=true,Status="away" },
        new EmployeeData() {Id="4",PId="3", Name = "Anne",  Job = "Developer", image= "1",Status="busy" },
        new EmployeeData() {Id="5",PId="1", Name = "Nancy",  Job = "Product Manager", image= "4",HasChild=true,Status="away" },
        new EmployeeData() {Id="6",PId="5", Name = "Michael",  Job = "Team Lead", image= "9",HasChild=true,Status="online" },
        new EmployeeData() {Id="7",PId="6", Name = "Robert King",  Job = "Developer", image= "8",Status="online" }
    };
}

LoadOnDemand

Gets or sets a value that determines whether child nodes will be rendered while expanding and collapsing a parent node inside the popup, instead of loading all tree nodes initially in the SfDropDownTree<TValue, TItem> component.

Declaration
public bool LoadOnDemand { get; set; }
Property Value
Type Description
System.Boolean

Set to true to load child nodes dynamically on expanding a parent node; otherwise, set to false. The default value is false.
Remarks

By default, LoadOnDemand is disabled, so child nodes are rendered during initial rendering. Enabling this property as true can improve the performance of the SfDropDownTree<TValue, TItem> component on initial load, as it loads only parent nodes initially.

Mode

Gets or sets the possible values for visualizing selected items in the SfDropDownTree<TValue, TItem> component when AllowMultiSelection or ShowCheckBox is enabled. Possible values are:

  • BoxSelected items will be visualized in chip format.
  • DelimiterSelected items will be visualized in the text content.
  • Default When focused, the component will act in the box mode. When blurred, the component will act in the delimiter mode.
Declaration
public DdtVisualMode Mode { get; set; }
Property Value
Type Description
DdtVisualMode

Specifies the mode that determines the visibility and interactivity of the component.

NoRecordsTemplate

Gets or sets the template design and assigns it to popup list of component, when no data is available on the component.

Declaration
public RenderFragment NoRecordsTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

The template content. The default value is null.
Examples

In the following sample, popup list content displays the notification of no data available.

@using Syncfusion.Blazor.Navigations

<SfDropDownTree TItem="EmployeeData" TValue="string" Width="100%" CssClass="custom" Placeholder="Select an employee" PopupHeight="250px">
    <ChildContent>
        <DropDownTreeField TItem="EmployeeData" DataSource="Data" Id="Id" Text="Name"></DropDownTreeField>
    </ChildContent>
    <NoRecordsTemplate>
        <span> NO DATA AVAILABLE</span>
    </NoRecordsTemplate>
</SfDropDownTree>

@code {

    public class EmployeeData
    {
        public string Id { get; set; }
        public string Name { get; set; }
    }

    List<EmployeeData> Data = new List<EmployeeData> { };
}

OnActionFailure

Gets or sets an event callback that is raised while any Dropdown Tree action failed to fetch the desired results.

Declaration
public EventCallback<object> OnActionFailure { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>

An event callback function.
Remarks

You can capture this failure and throw error message for users in required cases.

OnPopupClose

Gets or sets an event callback that will be invoked when the Dropdown Tree popup is closed after animation.

Declaration
public EventCallback<PopupEventArgs> OnPopupClose { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<PopupEventArgs>

An event callback function.

OnPopupOpen

Gets or sets an event callback that will be invoked when the Dropdown Tree popup is opened after animation.

Declaration
public EventCallback<PopupEventArgs> OnPopupOpen { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<PopupEventArgs>

An event callback function.

Placeholder

Gets or sets the placeholder value that describes the expected value of the Dropdown Tree component.

Declaration
public string Placeholder { get; set; }
Property Value
Type Description
System.String

Accepts a string. The default value is Null.

PopupHeight

Gets or sets the height of the popup list. By default, it renders based on its list item.

Declaration
public string PopupHeight { get; set; }
Property Value
Type Description
System.String

Accepts the string value. The default value is 300px.

PopupWidth

Gets or sets the width of the popup list and percentage values is calculated based on input width.

Declaration
public string PopupWidth { get; set; }
Property Value
Type Description
System.String

Accepts the string value. The default value is 100%.

SelectedItemTemplate

Gets or sets the template that will be added to the input instead of the selected item text in the SfDropDownTree<TValue, TItem> component when the AllowMultiSelection or ShowCheckBox support is enabled.

Declaration
public RenderFragment<SelectedItemTemplate<TValue>> SelectedItemTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<SelectedItemTemplate<TValue>>

The template content. The default value is null.
Remarks

This property is used to customize the display text of the selected items in the SfDropDownTree<TValue, TItem>. When setting this property, the mode must be set to custom in the Dropdown Tree.

ShowCheckBox

Gets or sets a value that indicates whether to show checkboxes in each node of the SfDropDownTree<TValue, TItem> component popup.

Declaration
public bool ShowCheckBox { get; set; }
Property Value
Type Description
System.Boolean

Set to true to show checkboxes on each tree view node in the popup; otherwise, 'false'. The default value is false.
Remarks

The ShowCheckBox property is used to show or hide the checkboxes in tree nodes of popup list. The checkboxes have tri-state behavior, such as checked, unchecked, and indeterminate. The check/uncheck action can be performed either through checkbox click or pressing the space key. The checkboxes are displayed next to the expand/collapse icon of the nodes.

ShowClearButton

Gets or sets a boolean value that indicates whether the clear button is displayed in the SfDropDownTree<TValue, TItem> input.

Declaration
public bool ShowClearButton { get; set; }
Property Value
Type Description
System.Boolean

Set to true, if the clear button should be shown. Otherwise, false.
Remarks

Enabling this option adds a clear button to the input, allowing users to clear multiple selected values at once.

ShowSelectAll

Gets or sets a value that determines whether to show or hide the selectAll option on the component.

Declaration
public bool ShowSelectAll { get; set; }
Property Value
Type Description
System.Boolean

Set to true, if the select all option should be shown. Otherwise, false.
Remarks

Enabling this option allows users to select all items in the popup through a single checkbox action.

SortOrder

Gets or sets a value indicating how the items are sorted in ascending or descending order, or not sorted at all.

Declaration
public SortOrder SortOrder { get; set; }
Property Value
Type Description
SortOrder

Available sort order types include:

  • NoneThe items are not sorted.
  • AscendingThe items are sorted in ascending order.
  • DescendingThe items are sorted in descending order.

Text

Gets or sets the display text of the selected item, which corresponds to the data text field in the component.

Declaration
public string Text { get; set; }
Property Value
Type Description
System.String

The default value is Null.
Remarks

This property stores the selected text value(s) that are displayed in the input of the Dropdown Tree.

TextWrap

Gets or sets whether to wrap the selected items into multiple lines when the selected item's text content exceeds the input width limit.

Declaration
public bool TextWrap { get; set; }
Property Value
Type Description
System.Boolean

true, if the selected items into multiple lines. Otherwise, false.

Value

Gets the value of the selected item in the Dropdown Tree component. This will be used with a two-way binding.

Declaration
public List<TValue> Value { get; set; }
Property Value
Type Description
System.Collections.Generic.List<TValue>

The value of the selected item in the Dropdown Tree component. The default is null.
Remarks

Use the Value property to specify or determine the value displayed in the SfDropDownTree<TValue, TItem> component.

ValueChanged

Gets or sets a callback that triggers when the value changed in the SfDropDownTree<TValue, TItem> component.

Declaration
public EventCallback<List<TValue>> ValueChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<System.Collections.Generic.List<TValue>>

An event callback function.

ValueChanging

Gets or sets an event callback that will be invoked when the Value property changed.

Declaration
public EventCallback<DdtChangeEventArgs<TValue>> ValueChanging { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<DdtChangeEventArgs<TValue>>

An event callback function.
Remarks

This event triggers when an item in a popup is selected or when the model value is changed by user.

ValueTemplate

Gets or sets the template to customize the display of selected values in the SfDropDownTree<TValue, TItem> component based on application requirements.

Declaration
public RenderFragment<TItem> ValueTemplate { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<TItem>

The template content. The default value is null.
Remarks

This property allows customization of the selected values displayed in the SfDropDownTree<TValue, TItem> component, enabling features such as displaying the value field, icons, or other elements along with the selected text.

Width

Gets or sets the width of the SfDropDownTree<TValue, TItem> component.

Declaration
public string Width { get; set; }
Property Value
Type Description
System.String

The preferred width of the drop down tree can be in pixels or percentage value. The default value is 100%.

ZIndex

Gets or sets the z-index value of the component popup element.

Declaration
public double ZIndex { get; set; }
Property Value
Type Description
System.Double

The ZIndex value for the popup element.The default value is 1000.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

ClearAsync()

Clear out the selected values from the SfDropDownTree<TValue, TItem> component and set the Value property as null.

Declaration
public Task ClearAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that represents any asynchronous action.

GetTreeViewData(String)

Gets the updated data source of Dropdown Tree after performing some operation like node selecting/unselecting, node expanding/collapsing, node checking/unchecking. When the ID of tree node is passed as arguments for this method then it will return the updated data source of the corresponding node otherwise, it will return the entire updated data source of the Dropdown Tree.

Declaration
public List<TItem> GetTreeViewData(string nodeID = null)
Parameters
Type Name Description
System.String nodeID

Specifies ID of TreeView node.
Returns
Type Description
System.Collections.Generic.List<TItem>

"Return Data".

HidePopupAsync()

Close the DropDownTree popup that displays the list of tree items.

Declaration
public Task HidePopupAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that represents any asynchronous action.

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
System.Boolean firstRender

Set to true for the first time component rendering; otherwise gets false.
Returns
Type Description
System.Threading.Tasks.Task

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

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
System.Threading.Tasks.Task

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

OnParametersSetAsync()

Declaration
protected override Task OnParametersSetAsync()
Returns
Type
System.Threading.Tasks.Task

RefreshAsync()

This method is used to apply the pending changes and render the Dropdown Tree component again.

Declaration
public Task RefreshAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task representing the asynchronous action.

SelectAllAsync(Boolean)

Selects or deselects the entire collection of items of the SfDropDownTree<TValue, TItem> based on the state parameter.

Declaration
public Task SelectAllAsync(bool state = true)
Parameters
Type Name Description
System.Boolean state

Set true or false to select or unselect the entire list items.
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that represents the asynchronous operation of selecting all the items.

ShouldRender()

Declaration
protected override bool ShouldRender()
Returns
Type
System.Boolean

ShowPopupAsync()

Opens the DropDownTree popup that displays the list of tree items.

Declaration
public Task ShowPopupAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task that represents any asynchronous action.

UpdateChildProperties(Object)

This method updates the child properties of Dropdown Tree.

Declaration
public Task UpdateChildProperties(object details)
Parameters
Type Name Description
System.Object details

Specifies the property value parameter.
Returns
Type
System.Threading.Tasks.Task

Implements