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

ASP.NET Core TileLayout Keyboard Navigation

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Telerik REPL
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main
Launch Theme Builder

HtmlHelper
TagHelper
Files:
                    keyboard_navigation.cshtml
                
                    Keyboard_NavigationController.cs
                
                    Keyboard_Navigation_TagHelper.cshtml

Also available for:

CLIENT-SIDE API SERVER-SIDE API

<div class="k-card"> <div class="k-card-header"> <h5 class="k-card-title">The Best of Western Europe</h5><h6 class="k-card-subtitle">Feb 27, 2007</h6> </div> <div class="k-card-body"> <div class="k-card-description"><p>Tour the best of Western Europe and take in the sights of Munich, Frankfurt, Meinz, Bruxel, Amsterdam, and Vienna along the way. Discover the amazing world of plants at Frankfurt Palmengarten, the botanical gardens in Frankfurt.</p><img alt="Telerik UI for ASP.NET Core TileLayout Germany" src="../shared/web/timeline/images/The_Best_of_Western_Europe.jpg" class="k-card-image"> </div> </div> </div> <div class="k-card"> <div class="k-card-header"> <h5 class="k-card-title">UNESCO Sites in Bulgaria</h5><h6 class="k-card-subtitle">Mar 13, 2009</h6> </div> <div class="k-card-body"> <div class="k-card-description"><p>Bulgaria is located in the heart of the Balkans, sharing boarders with Serbia, Macedonia, Romania, Greece and Turkey. Visitors will be greeted by a unique blend of enchanting monasteries, friendly people and old-world charm.</p><img alt="Telerik UI for ASP.NET Core TileLayout Bulgaria" src="../shared/web/timeline/images/UNESCO_sites_in_Bulgaria.jpg" class="k-card-image"> </div> </div> </div> <div class="k-card"> <div class="k-card-header"> <h5 class="k-card-title">Cuba Paradise Island</h5><h6 class="k-card-subtitle">Jun 16, 2013</h6> </div> <div class="k-card-body"> <div class="k-card-description"><p>Cuba provides a unique travel destination that is equal parts relaxation and education. You’ll find beautiful beaches, rum and some incredible and historically significant locations.</p><img alt="Telerik UI for ASP.NET Core TileLayout Cuba" src="../shared/web/timeline/images/Cuba_Paradise_Island.jpg" class="k-card-image"> </div> </div> </div> <div class="k-card"> <div class="k-card-header"> <h5 class="k-card-title">Wonders of Italy</h5><h6 class="k-card-subtitle">Jul 6, 2008</h6> </div> <div class="k-card-body"> <div class="k-card-description"><p>The Italian Republic is a history lover's paradise with thousands of museums, churches and archaeological sites dating back to Roman and Greek times. Visitors will also find a hub for fashion and culture unlike anywhere else in the world.</p><img alt="Telerik UI for ASP.NET Core TileLayout Italy" src="../shared/web/timeline/images/Wonders_of_Italy.jpg" class="k-card-image"> </div> </div> </div> <div class="k-card"> <div class="k-card-header"> <h5 class="k-card-title">Kenya</h5><h6 class="k-card-subtitle">Apr 23, 2016</h6> </div> <div class="k-card-body"> <div class="k-card-description"><p>Adventuring through Kenya is no day at the beach. But those willing to brave this raw and wild area of the world will be rewarded with sights and experiences that will last a lifetime.</p><img alt="Telerik UI for ASP.NET Core TileLayout Kenya" src="../shared/web/timeline/images/Kenya.jpg" class="k-card-image"> </div> </div> </div> <div class="k-card"> <div class="k-card-header"> <h5 class="k-card-title">Imperial China</h5><h6 class="k-card-subtitle">Jul 12, 2015</h6> </div> <div class="k-card-body"> <div class="k-card-description"><p>The ancient sights of China are otherworldly. From the Terracotta Army to the cave carvings at Dragon Gate, the immensity of these Chinese attractions is matched only by the diligence in their details.</p><img alt="Telerik UI for ASP.NET Core TileLayout China" src="../shared/web/timeline/images/Imperial_China.jpg" class="k-card-image"> </div> </div> </div> kendo.syncReady(function(){jQuery("#tilelayout").kendoTileLayout({"columns":6,"columnsWidth":"285px","containers":[{"bodyTemplate":jQuery('#europe').html(),"colSpan":2,"rowSpan":2},{"bodyTemplate":jQuery('#bulgaria').html(),"colSpan":2,"rowSpan":2},{"bodyTemplate":jQuery('#italy').html(),"colSpan":2,"rowSpan":2},{"bodyTemplate":jQuery('#cuba').html(),"colSpan":2,"rowSpan":2},{"bodyTemplate":jQuery('#kenya').html(),"colSpan":2,"rowSpan":2},{"bodyTemplate":jQuery('#china').html(),"colSpan":2,"rowSpan":2}],"navigatable":true,"reorderable":true,"resizable":true,"rowsHeight":"170px"});}); .k-card-body { height: 245px; } .k-card-image { bottom: 15px; left: 0; position: absolute; width: 314px; margin: 10px 0 0 10px; }

Focus

Alt + w focuses the widget

Supported keys and user actions

Shift + Tab focus the previous item
Tab focuses the next item
Shift + Left reorder with previous item
Shift + Right reorder with next item
Ctrl + Left Decrement the width with one column
Ctrl + Right Increment the width with one column
Ctrl + Up Decrement the height with one row
Ctrl + Down Increment the height with one row

Additional Apps

This TileLayout 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.

Focus

Supported keys and user actions

Additional Apps

Support & Learning Resources

Additional Resources