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

ASP.NET Core Sortable Sortable Panels

Loading Demo...

EXAMPLE

VIEW SOURCE

Also available for:

CLIENT-SIDE API HTML HELPER API

News

Jan 22, 2014 Stanford Speaker Series Looks at the Rising Tide of Eastern European High Tech Firms with Telerik CEO Vassil Terziev

Dec 10, 2013 Telerik Test Studio Now Offers Cross-Browser Test Recording and Subscription-Based Pricing for 1M-Strong Developer Community

Nov 22, 2013 Telerik AD is Named "Best Employer in Bulgaria" for Sixth Consecutive Year

Nov 20, 2013 Telerik Embraces the Responsive Web with Latest Kendo UI Improvements

Blogs

Upgrading OpenAccess ORM to Telerik Data Access

Friday, February 14, 2014 by Data Access Team

OpenAccess ORM was recently renamed to Telerik Data Access and re-branded. Find out what are the changes you can expect when upgrading to the latest official release.

Design, then Develop Experiences

Friday, February 14, 2014 by Telerik Services

Here at Telerik, our goal is to help you develop experiences. We've got a long history of providing tools to help developers deliver great value for their customers. But maybe sometimes you need a little help figuring out just how to make your customers happy. That's where the user experience (UX) designers at Telerik Services come in.

What Carl Sagan Taught Me About Software

Thursday, February 13, 2014 by Kendo UI

Software ecosystems are vital to a developer's success. It's hard to place a value on the benefit derived from being able to lean on other's experience, as well as easily find and digest content that's relevant to your project. Ecosystems don't just sprout up overnight though. It takes the right timing, the perfect conditions and lots of love and cultivation. Trying to actively create a new ecosystem around a product or platform is a lot like terraforming. Carl Sagan knows a thing or two about that.

(typeof KendoLicensing === 'object' && KendoLicensing.setScriptKey('141j041f611f063e0837023e133i0i490g310c3a18445h425d38573a5i3d5k3f5f395f405b0i5a1a530940091g051i361i375e3g5k3d5i424i3j4j4b593759361i0a520d2i0f1d0g1d111i375c365a3b5f325d405f445h445b400f2339275i0j582c412i5a153h0342224h40155a2g3a00552i09511k4c421a5a1c3e254k2k381h58024h275d1557205k39284k2h5g30472c4627522i094f2f511b142d3j214d0b5047094h22371k31113425542e093c0f47511b4i253727442i5b13562b4i25143h2k5732135d2e3j274826381e4g0860175c2i3g06522j095123322e4d2f52165g3c611145295d360a4a121f502j57330f3c0a5g264a08591j572g5720501b114b285f0h391745541b3b0f2i571f4h41163g1j480i42072a54042b4907541j3j193b035h2a572c4a0j501j154101395k293b03572f402248052d4d0k5e360j45033109305d163b5i2a4c2b3d015i2f40133g154c24511e4314492f40154f3j2g4c0d3c1c542g5a370b4b185b2f5k2a054b0b4j0e4012494g3b154311410h4500502748064j0j5h0b3i4h422j4j1g3e5g1a38005c3d1h5g0k3j1e5j3g123h0f5c1e5g0k1c3e2d481558312513521f370f542e3j4j1g4k153d1444300b51165a1133255g320654082g4f2b470i5f123k4f3h27502f3g5d045e1a224k1c311033570j5d320k442a610j352k480c4j2349303d2e5348521k48124f0b5138025d244d3h29063c2h40233c234i104h2d05564a4i223e16251459103j055j3e051j3d1h3a153f2j3i1i4b195d2e602g0f49114d0c5h1a542j0c55481g311k4k4719245i3b13480d3f1a521b3a01355e1141045j1a245i0e51014j2a3h04531g310g1e4d4101502j470b54054k0b2e47033f2d48114f024h1d414i0j4e114h1e3d042c4c10335b342437610d5e0629054b23402g0e2g3c02492h330739175646531h4h105630062d005f1c3i2f0f46255e075a1k5g2b0c5h1761073k52492449084a0b600f2j3f1j53155i23591i501f3c59102d512d'));window._wrappersMetadata = Object.freeze({"name":"@progress/kendo-ui","productCode":"UIASPCORE","productName":"Telerik UI for ASP.NET Core","version":"2025.1.410","licensingDocsUrl":"https://www.telerik.com/aspnet-core-ui/documentation/installation/activating-your-license/setting-up-your-license"});kendo.syncReady(function(){jQuery("#sidebar").kendoSortable({"connectWith":"#main-content","cursor":"move","filter":"\u003ediv","hint":hint,"placeholder":placeholder});});kendo.syncReady(function(){jQuery("#main-content").kendoSortable({"connectWith":"#sidebar","cursor":"move","hint":hint,"placeholder":placeholder});}); #example { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dash-head { width: 902px; height: 80px; background: url(/aspnet-core/shared/web/sortable/dashboard-head.png) no-repeat 50% 50% #222222; } .panel-wrap { display: table; margin: 0 0 20px; width: 900px; background-color: #f5f5f5; border: 1px solid #e5e5e5; } #sidebar { display: table-cell; margin: 0; padding: 20px 0 20px 20px; width: 220px; vertical-align: top; } #main-content { display: table-cell; margin: 0; padding: 20px; width: 600px; vertical-align: top; } .widget.placeholder { opacity: 0.4; border: 1px dashed #a6a6a6; } /* WIDGETS */ .widget { margin: 0 0 20px; padding: 0; background-color: #ffffff; border: 1px solid #e7e7e7; border-radius: 3px; cursor: move; } .widget:hover { background-color: #fcfcfc; border-color: #cccccc; } .widget div { padding: 10px; min-height: 50px; } .widget h3 { font-size: 12px; padding: 8px 10px; text-transform: uppercase; border-bottom: 1px solid #e7e7e7; } .widget h3 span { float: right; } .widget h3 span:hover { cursor: pointer; background-color: #e7e7e7; border-radius: 20px; } /* PROFILE */ .profile-photo { width: 80px; height: 80px; margin: 10px auto; border-radius: 100px; border: 1px solid #e7e7e7; background: url(/aspnet-core/shared/web/Customers/ISLAT.jpg) no-repeat 50% 50%; } #profile div { text-align: center; } #profile h4 { width: auto; margin: 0 0 5px; font-size: 1.2em; color: #1f97f7; } #profile p { margin: 0 0 10px; } /* BLOGS & NEWS */ #blogs div, #news div { padding: 0 20px 20px; } #teammates h4, #blogs h4, #news h4 { width: auto; margin: 20px 0 2px; font-size: 1.4em; color: #1f97f7; font-weight: normal; } .blog-info { margin: 0 0 10px; font-size: .9em; color: #787878; } #sidebar #blogs h4 { font-size: 1em; } #sidebar #blogs p { display: none; } #sidebar #blogs .blog-info { display: block; } #main-content #news h4 { font-size: 1.2em; line-height: 1.4em; height: 40px; } #main-content #news h4 span { display: block; float: left; width: 100px; height: 40px; color: #000; } #sidebar #news h4 { font-size: 1em; } #sidebar #news h4 span { display: block; margin-bottom: 3px; color: #000; } /* TEAMMATES */ .team-mate:after { content: "."; display: block; height: 0; line-height: 0; clear: both; visibility: hidden; } #teammates .team-mate h4 { font-size: 1.4em; font-weight: normal; margin-top: 12px; } .team-mate p { margin: 0; } .team-mate img { float: left; margin: 0 15px 0 0; border: 1px solid #e7e7e7; border-radius: 60px; } .hint { width: 250px; height: 100px; overflow: hidden; } .hint > h3 { padding-left: 20px; }

Description

The Telerik UI for ASP.NET Core Sortable enables you to implement sortable panels that can be dragged and dropped. Drag-and-drop panels allow you to create very rich interfaces, such as customizable dashboards.

This example shows how to create a customizable dashboard with drag-and-drop panels.

Additional Apps

This Sortable example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

ASP.NET Core Sortable Sortable Panels

Description

Additional Apps

Support & Learning Resources

Additional Resources