New to Telerik UI for ASP.NET Core? Download free 30-day trial

Customizing templates

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        template.cshtml
                    
                        TemplateController.cs
                    
                        CustomerViewModel.cs

Also available for:

API REFERENCE

Customers

Open the DropDownList to see the customized appearance.

.dropdown-header { border-width: 0 0 1px 0; text-transform: uppercase; } .dropdown-header > span { display: inline-block; padding: 10px; } .dropdown-header > span:first-child { width: 50px; } .selected-value { display: inline-block; vertical-align: middle; width: 24px; height: 24px; background-size: 100%; margin-right: 5px; border-radius: 50%; } #customers-list .k-item { line-height: 1em; min-width: 300px; } /* Material Theme padding adjustment*/ .k-material #customers-list .k-item, .k-material #customers-list .k-item.k-state-hover, .k-materialblack #customers-list .k-item, .k-materialblack #customers-list .k-item.k-state-hover { padding-left: 5px; border-left: 0; } #customers-list .k-item > span { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; vertical-align: top; margin: 20px 10px 10px 5px; } #customers-list .k-item > span:first-child { -moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3); -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3); box-shadow: inset 0 0 30px rgba(0,0,0,.3); margin: 10px; width: 50px; height: 50px; border-radius: 50%; background-size: 100%; background-repeat: no-repeat; } #customers-list h3 { font-size: 1.2em; font-weight: normal; margin: 0 0 1px 0; padding: 0; } #customers-list p { margin: 0; padding: 0; font-size: .8em; }

Description

The ASP.NET Core DropDownList comes with the option for different templates that let you control the items, selected values, and the popup headers in the component. As shown in this demo example, you can customize the rendering of the DropDownList and include images and other type of content using the header, item and value templates.

Customizing templates

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo