DropDownWidthMode Enum

Lists values that specify the width of a drop-down list.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public enum DropDownWidthMode

Members

Name	Description
ContentOrEditorWidth	The list displays item text completely. The minimum list width matches the editor.
ContentWidth	The list width is equal to the width of the longest list item.
EditorWidth	The list width matches the editor. List items are cut if they do not fit.

Related API Members

The following properties accept/return DropDownWidthMode values:

• DxComboBox<TData, TValue>.DropDownWidthMode
• DxComboBoxSettings.DropDownWidthMode
• DxDataGridComboBoxColumn<T>.DropDownWidthMode
• DxTagBox<TData, TValue>.DropDownWidthMode
• IComboBoxSettings.DropDownWidthMode

Remarks

The default width of drop-down lists is set to ContentOrEditorWidth.

The following code sets the width of the drop-down list to the editor width.

Razor

@using BlazorApp.Data

<DxTagBox Data="@Staff.DataSource"
          TextFieldName="@nameof(Person.Text)"
          DropDownWidthMode="DropDownWidthMode.EditorWidth">
</DxTagBox>

Person

namespace BlazorApp.Data {
    public class Person {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Department Department { get; set; }
        public string Text => $"{FirstName} {LastName} ({Department} Dept.)";
    }

    public enum Department { Motors, Electronics, Software }

    public override bool Equals(object obj) {
        if (obj is Person typedObj) {
            return (this.Id == typedObj.Id) && (this.FirstName == typedObj.FirstName) && (this.LastName == typedObj.LastName) 
            && (this.Department == typedObj.Department);
        }
        return base.Equals(obj);
    }
}

Staff

using System;
using System.Collections.Generic;

namespace BlazorApp.Data {
    public static class Staff {
        private static readonly Lazy<List<Person>> dataSource = new Lazy<List<Person>>(() => {
            var dataSource = new List<Person>() {
                new Person() { Id= 0 , FirstName="John", LastName="Heart", Department=Department.Electronics },
                new Person() { Id= 1 , FirstName="Samantha", LastName="Bright", Department=Department.Motors },
                new Person() { Id= 2 , FirstName="Arthur", LastName="Miller", Department=Department.Software },
                new Person() { Id= 3 , FirstName="Robert", LastName="Reagan", Department=Department.Electronics },
                new Person() { Id= 4 , FirstName="Greta", LastName="Sims", Department=Department.Motors },
                new Person() { Id= 5 , FirstName="Brett", LastName="Wade", Department=Department.Software },
                new Person() { Id= 6 , FirstName="Sandra", LastName="Johnson", Department=Department.Electronics },
                new Person() { Id= 7 , FirstName="Edward", LastName="Holmes", Department=Department.Motors },
                new Person() { Id= 8 , FirstName="Barbara", LastName="Banks", Department=Department.Software },
                new Person() { Id= 9 , FirstName="Kevin", LastName="Carter", Department=Department.Electronics },
                new Person() { Id= 10, FirstName="Cynthia", LastName="Stanwick", Department=Department.Motors },
                new Person() { Id= 11, FirstName="Sam", LastName="Hill", Department=Department.Electronics }};
            return dataSource;
        });
        public static List<Person> DataSource { get { return dataSource.Value; } }
    }
}

Run Demo: ComboBox – Drop-Down List Width

Run Demo: TagBox – Drop-Down List Width