Back to Devexpress

DropDownWidthMode Enum

blazor-devexpress-dot-blazor-392b75e9.md

latest4.8 KB
Original Source

DropDownWidthMode Enum

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

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
public enum DropDownWidthMode

Members

NameDescription
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.

|

The following properties accept/return DropDownWidthMode values:

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>
csharp
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);
    }
}
csharp
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

See Also

DevExpress.Blazor Namespace