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

IDropDownTree

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

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.

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

SfBaseComponent.OnAfterRenderAsync(Boolean)

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

SfBaseComponent.OnInitializedAsync()

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

IDropDownTree