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

Start typing to find a customer. E.g. "Ann"

.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; } #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; }

Customizing templates

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo