Class SfDropDownButton

The DropDownButton component is used to toggle contextual overlays for displaying list of action items. It can contain a text, an icon, svg or both.

Inheritance

System.Object

SfBaseComponent

SfDropDownButton

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

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

Namespace: Syncfusion.Blazor.SplitButtons

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfDropDownButton : SfBaseComponent

Examples

In the below code example, a basic DropDownButton component initialized with DropDownMenuItems and DropDownMenuItem tag directives.

 
<SfDropDownButton> 
   <DropDownMenuItems> 
      <DropDownMenuItem Text="Dashboard"></DropDownMenuItem> 
      <DropDownMenuItem Text="Notifications"></DropDownMenuItem> 
      <DropDownMenuItem Text="User Settings"></DropDownMenuItem> 
      <DropDownMenuItem Text="Log Out"></DropDownMenuItem> 
   </DropDownMenuItems> 
</SfDropDownButton> 

Constructors

SfDropDownButton()

Declaration

public SfDropDownButton()

Properties

ChildContent

Gets or sets a value that indicates the child content for the dropdown button including HTML element. If the child content is not specified, Dropdown button is rendered using Content property.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	The template content. The default value is null.

Remarks

The child content which is specified within SfDropDownButton tag directive is either a string or HTML Element. The string content is also specified using Content property.

Content

Gets or sets a value that indicates the content of dropdown button.

Declaration

public string Content { get; set; }

Property Value

Type	Description
System.String	Accepts a string value. The default value is String.Empty.

Remarks

Set child content within SfDropDownButton tag directive, to render as HTML content.

CssClass

Gets or sets a value that indicates the CSS class string to customize the appearance of dropdown button.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	Accepts a CSS class string separated by space to customize the appearance of dropdown button. The default value is String.Empty.

Disabled

Gets or sets whether the dropdown button is disabled or not.

Declaration

public bool Disabled { get; set; }

Property Value

Type	Description
System.Boolean	true, if the dropdown button component is disabled. The default value is false.

EnableRtl

Gets or sets whether the right to left direction is enabled for dropdown button.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true, if the right to left direction is enabled for dropdown button. The default value is false.

HtmlAttributes

Gets or sets a collection of additional attributes such as id, title etc. that will applied to the dropdown button container element.

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type
System.Collections.Generic.Dictionary<System.String, System.Object>

Remarks

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

Examples

In the below code example, dropdown button width has been specified as style attribute in SfButton tag directive.

 
<SfDropDownButton style="width:200px"> 
   <DropDownMenuItems> 
      <DropDownMenuItem Text="Dashboard"></DropDownMenuItem> 
      <DropDownMenuItem Text="Notifications"></DropDownMenuItem> 
      <DropDownMenuItem Text="User Settings"></DropDownMenuItem> 
      <DropDownMenuItem Text="Log Out"></DropDownMenuItem> 
   </DropDownMenuItems> 
</SfDropDownButton> 

IconCss

Gets or sets a a value that indicates the CSS class string to include an icon or image for the dropdown button.

Declaration

public string IconCss { get; set; }

Property Value

Type	Description
System.String	Accepts a CSS class string separated by space to include an icon or image for the dropdown button. The default value is String.Empty.

IconPosition

Gets or sets a value that indicates how to display icons in the dropdown button.

Declaration

public SplitButtonIconPosition IconPosition { get; set; }

Property Value

Type	Description
SplitButtonIconPosition	One of the IconPosition enumeration. The default value is Left.

Remarks

If the IconPosition is Left, the icon will be placed left to the content of the dropdown button. If the IconPosition is Right, the icon will be placed right to the content of the dropdown button. If the IconPosition is Top, the icon will be placed above the content of the dropdown button. If the IconPosition is Bottom, the icon will be placed below the content of the dropdown button.

Items

Gets or sets a value that indicates the the action items with its properties which will be rendered in dropdown button popup.

Declaration

public List<DropDownMenuItem> Items { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<DropDownMenuItem>	Accepts a collection of DropDownMenuItem object. The default value is null.

Remarks

If the Items property is not specified, the dropdown button component is populated using DropDownMenuItems and DropDownMenuItem tag directives.

ItemTemplate

Gets or sets a template content for the DropDownMenuItem. The template content is defined as a child content of ItemTemplate tag directive

Declaration

public RenderFragment<DropDownMenuItem> ItemTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<DropDownMenuItem>	The template content. The default value is null.

Remarks

The ItemTemplate used to define custom template for DropDownButton item. Use the template’s context parameter to access DropDownMenuItem properties.

Examples

DropDownMenu with template.

 
<SfDropDownButton IconCss = "e-ddb-icons e-profile" >
    < ChildContent >
        < DropDownMenuItems >
            < DropDownMenuItem Text="Dashboard" IconCss=@DASHBOARD></DropDownMenuItem>
            <DropDownMenuItem Text = "Notifications" IconCss=@NOTIFICATION></DropDownMenuItem>
            <DropDownMenuItem Text = "User Settings" IconCss=@SETTINGS></DropDownMenuItem>
            <DropDownMenuItem Text = "Log Out" IconCss=@LOGOUT></DropDownMenuItem>
        </DropDownMenuItems>
    </ChildContent>
<ItemTemplate>
@{
    var Items = context;
    @if(string.IsNullOrEmpty(Items.Url))
    {
        @if(!string.IsNullOrEmpty(Items.IconCss))
        {
            < span class="@("e-menu-icon" + " " + Items.IconCss)"></span>
        }
        <b>@Items.Text</b>
    }
    else
    {
    < a >
        @if(!string.IsNullOrEmpty(Items.IconCss))
        {
            < span class= "@("e - menu - icon" + " " + Items.IconCss)" ></ span >
        }
        < b > @Items.Text </ b >
    </ a >
    }
    }
</ ItemTemplate >
</ SfDropDownButton >

PopupContent

Gets or sets a value that indicates the custom element as action items which will be rendered in DropDownButton popup.

Declaration

public RenderFragment PopupContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	The template content. The default value is null.

Remarks

If the Items property and DropDownMenuItems tag directive is not specified, the DropDownButton component is populated using PopupContent.

Examples

In the below code example, a dropdown button component rendered with ListView component as PopupContent.

 
<SfDropDownButton CssClass="e-caret-hide" IconCss="e-icons e-down"> 
<PopupContent>  
<SfListView ID="listview" DataSource="@Data" ShowCheckBox="true"> 
<ListViewFieldSettings Text="Text" TValue="ListData"></ListViewFieldSettings> 
</SfListView> 
</PopupContent>  
</SfDropDownButton>  
@code { 
public List<ListData> Data = new List<ListData>{  
new ListData{ Class = "data", Text = "Print", Id = "data1" },  
new ListData{ Class = "data", Text = "Save As", Id = "data2" },  
new ListData{ Class = "data", Text = "Update Folder", Id = "data3" }, 
new ListData{ Class = "data", Text = "Reply", Id = "data4" }  
};  
public class ListData {  
public string Text { get; set; }  
public string Id { get; set; }  
public string Class { get; set; }  
} 
} 

PopupWidth

This property is used to define the width of the dropdown popup for the SfDropDownButton component.

Declaration

public string PopupWidth { get; set; }

Property Value

Type	Description
System.String	A string or number representing the width of the dropdown. It can be a valid CSS unit such as px, %, or rem, or a number interpreted as pixels.

Remarks

The PopupWidth property allows developers to control the width of the dropdown popup, ensuring that it fits their design requirements. The default value of auto ensures that the popup adjusts based on the content length, but a specific width can be provided for more control.

Methods

AddItems(List<DropDownMenuItem>, String, Boolean)

Adds a new item to the menu. By default, new item appends to the list as the last item, but you can insert based on the text parameter.

Declaration

public void AddItems(List<DropDownMenuItem> items, string text = null, bool isUniqueId = false)

Parameters

Type	Name	Description
System.Collections.Generic.List<DropDownMenuItem>	items	Specifies the list of items to be added.
System.String	text	Specifies the existing item text. If specified, adds the items of the collection before this item. If not specified, adds the items of the collection to the end of the list.
System.Boolean	isUniqueId	Set true if text parameter is a unique id.

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

OnAfterRenderAsync(Boolean)

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task

RemoveItems(List<String>, Boolean)

Removes the items from the menu.

Declaration

public void RemoveItems(List<string> items, bool isUniqueId = false)

Parameters

Type	Name	Description
System.Collections.Generic.List<System.String>	items	Specifies the list of items to be removed.
System.Boolean	isUniqueId	Set true if text parameter is a unique id.

Toggle()

Opens/closes a DropDownButton popup based on current state of the DropDownButton.

Declaration

public void Toggle()