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

Linked Lists

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

            
                        linkedlists.cshtml
                    
                        LinkedlistsController.cs

Also available for:

API REFERENCE

Apples
Grapefruits
Bananas

Cranberries
Pineapples
Strawberries

kendo.syncReady(function(){jQuery("#sortable-listA").kendoSortable({"connectWith":"#sortable-listB","cursor":"url(\u0027/aspnet-core/shared/web/sortable/grabbing.cur\u0027), default","placeholder":placeholder});});kendo.syncReady(function(){jQuery("#sortable-listB").kendoSortable({"cursor":"url(\u0027/aspnet-core/shared/web/sortable/grabbing.cur\u0027), default","placeholder":placeholder});});

Cherries
Pears
Plums

Apricots
Grapes
Lemons

kendo.syncReady(function(){jQuery("#sortable-listC").kendoSortable({"connectWith":"#sortable-listD","cursor":"url(\u0027/aspnet-core/shared/web/sortable/grabbing.cur\u0027), default","placeholder":placeholder});});kendo.syncReady(function(){jQuery("#sortable-listD").kendoSortable({"connectWith":"#sortable-listC","cursor":"url(\u0027/aspnet-core/shared/web/sortable/grabbing.cur\u0027), default","placeholder":placeholder});}); #example { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .demo-section { padding: 50px 70px; } .one-way { background: url("/aspnet-core/shared/web/sortable/one-way.png") no-repeat 50% 50%; } .two-way { background: url("/aspnet-core/shared/web/sortable/two-way.png") no-repeat 50% 50%; } .list-wrapper { overflow: hidden; display: flex; justify-content: space-between; } #sortable-listA, #sortable-listB, #sortable-listC, #sortable-listD { width: 210px; min-height: 40px; margin: 0; padding: 0; border: 1px solid #dddddd; border-radius: 4px; } .list-item { list-style-type: none; width: 200px; margin: 5px; line-height: 30px; text-align: center; background-color: #222222; color: #ffffff; border-radius: 3px; cursor: url("/aspnet-core/shared/web/sortable/grab.cur"), default; } #sortable-listA .list-item { background-color: #54b8fa; color: #000000; } #sortable-listB .list-item { background-color: #ff879e; color: #000000; } #sortable-listC .list-item { background-color: #66cc66; color: #000000; } #sortable-listD .list-item { background-color: #ffcc33; color: #000000; } #placeholder.list-item { background-color: #ffffff; color: #777; }

Linked Lists

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo