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

Tag Helper

Loading Demo...

EXAMPLE
VIEW SOURCE
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

            
                        tag_helper.cshtml
                    
                        Tag_HelperController.cs

My Playlist

Papercut 3:04
One Step Closer 2:35
With You 3:23
Points of Authority 3:20
Crawling 3:29
Runaway 3:03
By Myself 3:09
In the End 3:36
A Place for My Head 3:04
Forgotten 3:14
Cure for the Itch 2:37
Pushing Me Away 3:11

kendo.syncReady(function(){jQuery("#sortable-basic").kendoSortable({"hint":hint,"placeholder":placeholder});}); #example { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #playlist { margin: 30px auto; width: 300px; background-color: #f3f5f7; border-radius: 4px; border: 1px solid rgba(0,0,0,.1); } #playlist-title { height: 80px; background: url(/aspnet-core/shared/web/sortable/playlist.png) no-repeat 50% 50% #ffffff; border-radius: 4px 4px 0 0; border-bottom: 1px solid rgba(0,0,0,.1); } #playlist-title span { display: none; } #sortable-basic { padding: 0; margin: 0; } li.sortable { list-style-type: none; padding: 6px 8px; margin: 0; color: #666; font-size: 1.2em; cursor: url(/aspnet-core/shared/web/sortable/grab.cur), default; } li.sortable:last-child { border-bottom: 0; border-radius: 0 0 4px 4px; } li.sortable span { display: block; float: right; color: #666; } li.sortable:hover { background-color: #dceffd; } li.hint { display: block; width: 200px; background-color: #52aef7; color: #fff; } li.hint:after { content: ""; display: block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #52aef7; position: absolute; left: 216px; top: 8px; } li.hint:last-child { border-radius: 4px; } li.hint span { color: #fff; } li.placeholder { background-color: #dceffd; color: #52aef7; text-align: right; }

Description

This example shows how you can use the tag-helper for ASP.NET Core Sortable component.

Tag Helper

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo