Post
Ask Question

Kendo UI Tile Layout Widget For jQuery

Introduction

 
The kendo tile layout widget is a two-dimensional CSS grid used to display the content in tiles. It has a feature like reordering and resizing. The user  can switch the object between tiles just by dragging and dropping and resizing the tiles just by enabling reordering and resizing properties respectively.
 

Kendo UI Tile Layout

 
KendoTileLayout.html 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>         
  4.     <title></title>  
  5.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css" />  
  6.     <script src="https://kendo.cdn.telerik.com/2021.1.224/js/jquery.min.js"></script>          
  7.     <script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>      
  8. </head>  
  9. <body>  
  10.         <div id="tilelayout"></div>       
  11.         <script id="tile1" type="text/x-kendo-template">  
  12.             <span  class="k-card"   />  
  13.         </script>  
  14.         <script id="tile2" type="text/x-kendo-template">  
  15.             <span class="k-card"   />  
  16.         </script>  
  17.         <script id="tile3" type="text/x-kendo-template">  
  18.             <span class="k-card"   />  
  19.         </script>  
  20.         <script id="tile4" type="text/x-kendo-template">  
  21.             <span class="k-card"   />  
  22.         </script>          
  23.         <script>  
  24.             $("#tilelayout").kendoTileLayout({  
  25.                 containers: [{  
  26.                     colSpan: 1,  
  27.                     rowSpan: 1,  
  28.                     header: {  
  29.                         text: "Tile 1"  
  30.                     },  
  31.                   bodyTemplate: kendo.template($("#tile1").html())  
  32.                       
  33.                 }, {  
  34.                     colSpan: 1,  
  35.                     rowSpan: 1,  
  36.                     header: {  
  37.                         text: "Tile 2"  
  38.                     },  
  39.                     bodyTemplate: kendo.template($("#tile2").html())  
  40.                 }, {  
  41.                     colSpan: 1,  
  42.                     rowSpan: 1,  
  43.                     header: {  
  44.                         text: "Tile 3"  
  45.                     },  
  46.                     bodyTemplate: kendo.template($("#tile3").html())  
  47.                 }, {  
  48.                     colSpan: 1,  
  49.                     rowSpan: 1,  
  50.                     header: {  
  51.                         text: "Tile 4"  
  52.                     },  
  53.                     bodyTemplate: kendo.template($("#tile4").html())  
  54.                 }],  
  55.                 columns: 2,  
  56.                 height:700,  
  57.                 columnsWidth: 285,  
  58.                 rowsHeight: 285,  
  59.                 reorderable: true,                    
  60.             });  
  61.         </script>
  62. <style>  
  63.     .k-card {  
  64.         width: 250px;  
  65.         height: 250px;  
  66.     }  
  67. </style>
  68. </body>  
  69. </html>  
The <div> tag is used to initialize the TileLayout. The container is used to define the tiles. The colSpan and rowSpan is used to define the position of tiles inside the container.
 
reorderable: true, this statement will enable the reordering feature in tile layout widget.
 

Summary

 
We have seen how to implement the Kendo TileLayout widget using jQuery, and the reordering feature to drag and drop the objects between the tiles.
Next Recommended Reading Hide/Show the Element Which Depends on View Model in Kendo UI