New to Telerik UI for Blazor? Download free 30-day trial

Appearance Settings

You can control the appearance of the DropDownList by setting the following attribute:

Size

You can increase or decrease the size of the DropDownList by setting the Size attribute to a member of the Telerik.Blazor.ThemeConstants.DropDownList.Size class:

Class members Manual declarations
Small sm
Medium md
Large lg

The built-in sizes

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.DropDownList.Size)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string size = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikDropDownList Data="@myDdlData"
                                 Size="@size"
                                 TextField="MyTextField"
                                 ValueField="MyValueField"
                                 @bind-Value="selectedValue">
            </TelerikDropDownList>
        </div>
    }
}

@code {
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    int selectedValue { get; set; }

    protected override void OnInitialized()
    {
        selectedValue = 3;
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
}

Rounded

The Rounded attribute applies the border-radius CSS rule to the DropDownList to achieve curving of the edges. You can set it to a member of the Telerik.Blazor.ThemeConstants.DropDownList.Rounded class:

Class members Manual declarations
Small sm
Medium md
Large lg
Full full

The built-in values of the Rounded attribute

@* The built-in values of the Rounded attribute.  *@

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.DropDownList.Rounded)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string rounded = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikDropDownList Data="@myDdlData"
                                 Rounded="@rounded"
                                 TextField="MyTextField"
                                 ValueField="MyValueField"
                                 @bind-Value="selectedValue">
            </TelerikDropDownList>
        </div>
    }
}

@code {
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    int selectedValue { get; set; }

    protected override void OnInitialized()
    {
        selectedValue = 3;
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
}

FillMode

The FillMode controls how the TelerikDropDownList is filled. You can set it to a member of the Telerik.Blazor.ThemeConstants.DropDownList.FillMode class:

Class members Result
Solid
default value
solid
Flat flat
Outline outline

The built-in Fill modes

@* These are all built-in fill modes *@

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.DropDownList.FillMode)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string fillMode = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikDropDownList Data="@myDdlData"
                                 FillMode="@fillMode"
                                 TextField="MyTextField"
                                 ValueField="MyValueField"
                                 @bind-Value="selectedValue">
            </TelerikDropDownList>
        </div>
    }
}

@code {
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    int selectedValue { get; set; }

    protected override void OnInitialized()
    {
        selectedValue = 3;
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
}

ThemeBuilder

To take full control over the appearance of the Telerik UI for Blazor components, you can create your own styles by using ThemeBuilder.

ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the UI components, you can export a ZIP file with the styles for your theme and use them in your Blazor app.

In this article