Class SfDropDownButton

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

Inheritance

System.Object

SfBaseComponent

SfDropDownButton

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

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

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.SplitButtons

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfDropDownButton : SfBaseComponent

Remarks

The DropDownButton is a versatile UI element that allows you to present multiple actions or options to the user in a compact and organized manner. When the user clicks the button, a dropdown menu appears, showing a list of items defined in the DropDownMenuItems collection. You can customize the button's appearance using properties like CssClass and control its behavior through various events.

Examples

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

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

This example demonstrates a basic implementation of the SfDropDownButton with a list of items.

<SfDropDownButton Content="Edit">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Cut"></DropDownMenuItem>
        <DropDownMenuItem Text="Copy"></DropDownMenuItem>
        <DropDownMenuItem Text="Paste"></DropDownMenuItem>
    </DropDownMenuItems>
</SfDropDownButton>

In this example, a SfDropDownButton is rendered with a list of items and customized with an icon and CSS class.

<SfDropDownButton Content="Help" IconCss="e-icons e-help" CssClass="e-primary">
  <DropDownMenuItems>
      <DropDownMenuItem Text="FAQ"></DropDownMenuItem>
      <DropDownMenuItem Text="Submit a Ticket"></DropDownMenuItem>
      <DropDownMenuItem Text="Contact Us"></DropDownMenuItem>
  </DropDownMenuItems>
</SfDropDownButton>

The following example demonstrates a basic implementation of the SfDropDownButton.

<SfDropDownButton Content="Edit">
  <DropDownButtonEvents OnItemSelected="@ItemSelected"></DropDownButtonEvents>
  <DropDownMenuItems>
    <DropDownMenuItem Text="Cut"></DropDownMenuItem>
    <DropDownMenuItem Text="Copy"></DropDownMenuItem>
    <DropDownMenuItem Text="Paste"></DropDownMenuItem>
  </DropDownMenuItems>
</SfDropDownButton>
@code {
  private void ItemSelected(MenuEventArgs args)
  {
    //- Your logic here
  }
}

Constructors

SfDropDownButton()

Declaration

public SfDropDownButton()

Properties

ChildContent

Gets or sets the child content of the SfDropDownButton, which can include HTML elements and other components.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment representing the content to be displayed inside the button. The default value is null.

Remarks

If this property is not specified, the component will use the Content property to display simple text. The child content is defined within the <SfDropDownButton> tags.

Content

Gets or sets the text content displayed in the SfDropDownButton.

Declaration

public string Content { get; set; }

Property Value

Type	Description
System.String	A System.String that represents the text of the button. The default value is String.Empty.

Remarks

This property is used for rendering simple text content. For more complex content, such as HTML elements, use the ChildContent property by defining content within the <SfDropDownButton> tags.

CssClass

Gets or sets a CSS class string to customize the appearance of the SfDropDownButton.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A string representing one or more CSS classes separated by a space. The default value is String.Empty.

Remarks

This property allows you to apply custom styles to the DropDownButton for a consistent look and feel with your application's design.

Disabled

Gets or sets a value indicating whether the SfDropDownButton is disabled.

Declaration

public bool Disabled { get; set; }

Property Value

Type	Description
System.Boolean	If true, the DropDownButton is disabled and does not respond to user interactions. The default value is false.

Remarks

A disabled DropDownButton is visually indicated and cannot be clicked or focused.

EnableRtl

Gets or sets a value indicating whether to enable right-to-left (RTL) rendering for the SfDropDownButton.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	If true, the component's layout and text direction will be adapted for RTL languages. The default value is false.

Remarks

Enabling RTL mode is essential for applications that support languages written from right to left, such as Arabic or Hebrew.

HtmlAttributes

Gets or sets a collection of additional HTML attributes to be applied to the container element of the SfDropDownButton.

Declaration

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

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A System.Collections.Generic.Dictionary<, > where the key is a System.String representing the attribute name and the value is an System.Object representing the attribute value.

Remarks

This property allows you to add custom attributes like id, title, style, or data-* attributes to the DropDownButton's root element.

Examples

In this example, a custom style attribute is applied to the SfDropDownButton.

<SfDropDownButton style="width:200px; background-color: lightblue;">
  <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 CSS class string to include an icon in the SfDropDownButton.

Declaration

public string IconCss { get; set; }

Property Value

Type	Description
System.String	A string representing one or more CSS classes for the icon. The default value is String.Empty.

Remarks

This property is typically used to apply font icons (e.g., from libraries like Font Awesome or Syncfusion's built-in icons) to the button.

IconPosition

Gets or sets the position of the icon relative to the text content in the SfDropDownButton.

Declaration

public SplitButtonIconPosition IconPosition { get; set; }

Property Value

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

Remarks

This property controls the visual layout of the button when both an icon and text are present. The icon can be positioned to the left, right, top, or bottom of the text.

Items

Gets or sets the list of action items to be displayed in the dropdown popup of the SfDropDownButton.

Declaration

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

Property Value

Type	Description
System.Collections.Generic.List<DropDownMenuItem>	A System.Collections.Generic.List<> of DropDownMenuItem objects. The default value is null.

Remarks

If this property is not specified, the dropdown items can be defined declaratively using the DropDownMenuItems and DropDownMenuItem tags.

ItemTemplate

Gets or sets the template for rendering individual items in the SfDropDownButton's popup.

Declaration

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

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<DropDownMenuItem>	A Microsoft.AspNetCore.Components.RenderFragment<> of type DropDownMenuItem that defines the template for each item. The default value is null.

Remarks

This template provides a way to customize the appearance of each item in the dropdown list. The context parameter in the template provides access to the DropDownMenuItem's properties.

Examples

The following example demonstrates how to use an ItemTemplate to customize the display of dropdown items.

<SfDropDownButton IconCss="e-ddb-icons e-profile" Content="Profile">
  <DropDownMenuItems>
    <DropDownMenuItem Text="Dashboard" IconCss="e-icons e-dashboard"></DropDownMenuItem>
    <DropDownMenuItem Text="Notifications" IconCss="e-icons e-notification"></DropDownMenuItem>
    <DropDownMenuItem Text="User Settings" IconCss="e-icons e-settings"></DropDownMenuItem>
    <DropDownMenuItem Text="Log Out" IconCss="e-icons e-logout"></DropDownMenuItem>
  </DropDownMenuItems>
  <ItemTemplate>
    @{
      var item = context as DropDownMenuItem;
    }
    <div style="display: flex; align-items: center;">
      <span class="@item.IconCss" style="margin-right: 8px;"></span>
      <span style="font-weight: 600;">@item.Text</span>
    </div>
  </ItemTemplate>
</SfDropDownButton>

PopupContent

Gets or sets the custom content to be displayed in the dropdown popup of the SfDropDownButton.

Declaration

public RenderFragment PopupContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment that defines the content to be rendered in the popup. The default value is null.

Remarks

This property is used when you need to display complex content or other components within the popup, instead of a simple list of items. If both Items and this property are specified, Items will take priority.

Examples

In the following example, a SfDropDownButton is rendered with a SfListView component as its popup content.

<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 class ListData
  {
    public string Text { get; set; }
    public string Id { get; set; }
    public string Class { get; set; }
  }

  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" }
  };
}

PopupWidth

Gets or sets the width of the dropdown popup for the SfDropDownButton component.

Declaration

public string PopupWidth { get; set; }

Property Value

Type	Description
System.String	A System.String representing the width of the dropdown. It can be a valid CSS unit (e.g., "200px", "50%") or "auto". The default value is "auto".

Remarks

The PopupWidth property allows developers to control the width of the dropdown popup, ensuring it fits their design requirements. The default value of "auto" adjusts the width based on the content length.

Methods

AddItems(List<DropDownMenuItem>, String, Boolean)

Adds a collection of new items to the SfDropDownButton component's menu.

Declaration

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

Parameters

Type	Name	Description
System.Collections.Generic.List<DropDownMenuItem>	items	Specifies a System.Collections.Generic.List<> of DropDownMenuItem to be added to the menu.
System.String	text	Specifies the text of an existing item. The new items will be inserted before this item. If not specified, the new items will be appended to the end of the menu.
System.Boolean	isUniqueId	If set to true, the text parameter is treated as a unique ID for item lookup. The default value is false.

Remarks

This method allows you to dynamically add multiple items to the dropdown menu at a specified position. If the item specified by text is not found, the new items are added to the end of the menu.

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

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

OnAfterRenderAsync(Boolean)

A protected method that is invoked after the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	A System.Boolean value that is true if the component is being rendered for the first time, and false otherwise.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous post-render operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

Remarks

This method handles logic that needs to be executed after the component has been rendered, such as invoking events. On the first render, it triggers the Created event. It also manages the opening and closing of the popup and invokes the Opened and Closed events.

OnInitializedAsync()

A protected method that is invoked when the component is first initialized.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous initialization process.

Overrides

SfBaseComponent.OnInitializedAsync()

Remarks

This method is part of the Blazor component lifecycle. It is used to perform initialization tasks, such as setting default HTML attributes and loading necessary script modules for the SfDropDownButton.

OnParametersSetAsync()

A protected method that is invoked when the component receives parameters from its parent.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task that represents the asynchronous operation.

Remarks

This lifecycle method is called to handle property changes and update the component's state accordingly. It ensures that HTML attributes such as aria-haspopup, aria-expanded, and aria-label are correctly set based on the component's properties.

RemoveItems(List<String>, Boolean)

Removes a collection of items from the SfDropDownButton component's menu.

Declaration

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

Parameters

Type	Name	Description
System.Collections.Generic.List<System.String>	items	Specifies a System.Collections.Generic.List<> of item texts or IDs to be removed from the menu.
System.Boolean	isUniqueId	If set to true, the strings in the items list are treated as unique IDs for item lookup. The default value is false.

Remarks

This method allows for the dynamic removal of multiple items from the dropdown menu based on their text or unique ID.

Toggle()

Toggles the visibility of the SfDropDownButton component's popup menu.

Declaration

public void Toggle()

Remarks

Calling this method will open the popup if it is closed, or close it if it is open. This is useful for programmatically controlling the state of the dropdown menu.