docs(tilelayout): Revamp Overview and polish the other pages (#1051)

* docs(tilelayout): Revamp Overview

* docs(tilelayout): Revamp Overview 2

* Update components/tilelayout/overview.md

Co-authored-by: Nadezhda Tacheva <[email protected]>

* docs(tilelayout): Address PR feedback

Co-authored-by: Nadezhda Tacheva <[email protected]>

Author: dimodi

components/tilelayout/events.md

@@ -5,7 +5,7 @@ description: Events of the TileLayout for Blazor.
 slug: tilelayout-events
 tags: telerik,blazor,tile,layout,dashboard,events
 published: True
-position: 20
+position: 30
 ---
 
 # TileLayout Events
@@ -126,8 +126,11 @@ The `OnReorder` event provides an argument of type `TileLayoutReorderEventArgs`.
 }
 ````
 
+## Next Steps
+
+* [Manage the Tile Layout state]({%slug tilelayout-state%}).
+
 
 ## See Also
 
-  * [TileLayout Overview]({%slug tilelayout-overview%})
-  * [State]({%slug tilelayout-state%})
+* [TileLayout Overview]({%slug tilelayout-overview%})

components/tilelayout/images/tile-content-scrollbars.png

@@ -0,0 +1,63 @@
+---
+title: Layout
+page_title: TileLayout - Layout and Appearance Setings
+description: Layout and apperance settings of the TileLayout for Blazor.
+slug: tilelayout-layout
+tags: telerik,blazor,tile,layout
+published: True
+position: 5
+---
+
+# TileLayout Appearance
+
+This article describes how the TileLayout constructs its layout, and what are the parameters that affect its appearance. To understand the component behavior in more depth, get familiar with the concept of [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/) first. The TileLayout component is based on it as underlying implementation and core properties.
+
+The TileLayout component exposes parameters that control its layout at two levels:
+
+* [Main Element](#main-element)
+* [Individual Tiles](#individual-tiles)
+
+
+## Main Element
+
+The main element defines the number of `Columns`, the `Width` and `Height` of the layout, as well as the `ColumnWidth` and `RowHeight`. 
+
+The `ColumnWidth` and `RowHeight` define the maximum dimensions for each column and row of the main layout. As the overall component dimensions change (e.g., because of different viewports), the column and row heights might decrease to provide even distribution. A single tile can span more than one column or row.
+
+Generally, you should use settings that allow the desired number of columns and rows (depending on their width and height) to fit in the set width and height of the entire component.
+
+You do not, however, have to set `Width` and `Height` - the main measure is the `Columns` and it will suffice to create a layout.
+
+Since the Tile Layout is a block element, its width defaults to `auto` in the browser, and the actual width is distributed evenly between the number of `Columns`. Setting `Height="100%"` can let the component take up its parent dimensions in terms of height as well.
+
+If the width and height dimensions are insufficient to accommodate the defined row height and column width that the current tiles create, the actual row height and/or column width will decrease so that the appointed number of columns fit in the available width and the existing number of rows fit in the available height.
+
+`Columns`, `Width` and `Height`  have no default values.
+
+`ColumnWidth` and `RowHeight` default to `1fr`. Thus, you may want to omit setting a `ColumnWidth` in order to get a more responsive (fluid) layout - all columns will then have the same width - a fraction of the total width.
+
+There are two other settings you should take into account if you set explicit dimensions to the main element - the `ColumnSpacing` and `RowSpacing` - they are CSS units that define the gaps between the individual columns and rows and count towards the total dimensions of the component. They default to `16px`.
+
+Lastly, you can also set the `Class` parameter that renders at the main wrapping element of the tile layout so you can cascade custom CSS rules through it.
+
+
+## Individual Tiles
+
+Each tile provides settings that define how many columns and rows its takes up - the `ColSpan` and `RowSpan` parameters. It also provides a `Class` parameter so you can cascade CSS rules through it.
+
+`ColSpan` can affect the actual number of `Columns` of the entire layout. For example, if you have a tile with `ColSpan="2"` and `Columns="1"`, the TileLayout will still have two columns.
+
+@[template](/_contentTemplates/tilelayout/basics.md#resizing-reordering-logic)
+
+
+## Next Steps
+
+* [Find how to set tile content]({%slug tilelayout-tile-content%}).
+* Enable tile [resizing]({%slug tilelayout-resize%}) and [reordering]({%slug tilelayout-reorder%}).
+* [Handle Tile Layout events]({%slug tilelayout-events%}).
+* [Manage the Tile Layout state]({%slug tilelayout-state%}).
+
+
+## See Also
+
+* [TileLayout Overview]({%slug tilelayout-overview%})

components/tilelayout/images/tilelayout-overview.png

@@ -5,7 +5,7 @@ description: Reorder tiles in the TileLayout for Blazor.
 slug: tilelayout-reorder
 tags: telerik,blazor,tile,layout,dashboard,reorder
 published: True
-position: 10
+position: 20
 ---
 
 # TileLayout Reorder
@@ -20,9 +20,9 @@ To be able to drag and reorder a tile, it must have some [content]({%slug tilela
 
 Reordering a tile fires the [OnReorder event]({%slug tilelayout-events%}#onreorder).
 
->caption Reordering tiles in the TileLayout
+> When the tile layout allows reordering, it captures mouse events in the tile headers. Thus, if you put components in the `HeaderTemplate` of the tiles, they may not function as expected. For example, you may not be able to focus inputs with the mouse. The header is designed for presentation purposes and to allow dragging. We recommend putting editors or complex content in the `Content` of the tiles.
 
-![reorder tiles](images/tilelayout-reordering-overview.gif)
+>caption Reordering tiles in the TileLayout
 
 ````CSHTML
 <TelerikTileLayout ColumnWidth="200px"
@@ -47,11 +47,16 @@ Reordering a tile fires the [OnReorder event]({%slug tilelayout-events%}#onreord
 </TelerikTileLayout>
 ````
 
->note When the tile layout has reordering enabled, it captures mouse events in its header. Thus, if you put components in the `HeaderTemplate` of `TileLayoutItem` instances, they may not function as expected. For example, you may not be able to focus inputs with the mouse. The header is designed for presentation purposes and to allow dragging, and we recommend you consider putting editors or complex content in the `Content` of the tiles.
+![reorder tiles](images/tilelayout-reordering-overview.gif)
+
+
+## Next Steps
+
+* [Handle Tile Layout events]({%slug tilelayout-events%}).
+* [Manage the Tile Layout state]({%slug tilelayout-state%}).
+
 
 ## See Also
 
-  * [Overview]({%slug tilelayout-overview%})
-  * [State]({%slug tilelayout-state%})
-  * [Events]({%slug tilelayout-events%})
-  * [Live Demo: TileLayout Reordering](https://demos.telerik.com/blazor-ui/tilelayout/reordering)
+* [Overview]({%slug tilelayout-overview%})
+* [Live Demo: TileLayout Reordering](https://demos.telerik.com/blazor-ui/tilelayout/reordering)

components/tilelayout/images/tilelayout-tile-content.png

@@ -5,12 +5,12 @@ description: Resize items in the TileLayout for Blazor.
 slug: tilelayout-resize
 tags: telerik,blazor,tile,layout,dashboard,resize
 published: True
-position: 5
+position: 15
 ---
 
 # TileLayout Resize
 
-You can resize the tiles by dragging their bottom and right-hand side borders to change the dashboard to your liking.
+Resize tiles by dragging their bottom and right borders to change the dashboard to your liking.
 
 To enable resizing, set the `Resizable` parameter of the main `TelerikTileLayout` tag to `true`.
 
@@ -20,8 +20,6 @@ Resizing a tile fires the [OnResize event]({%slug tilelayout-events%}#onresize).
 
 >caption Resizing tiles in the TileLayout
 
-![resize tiles](images/tilelayout-resizing-overview.gif)
-
 ````CSHTML
 <TelerikTileLayout ColumnWidth="200px"
                    RowHeight="150px"
@@ -45,10 +43,17 @@ Resizing a tile fires the [OnResize event]({%slug tilelayout-events%}#onresize).
 </TelerikTileLayout>
 ````
 
+![resize tiles](images/tilelayout-resizing-overview.gif)
+
+
+## Next Steps
+
+* Enable [tile reordering]({%slug tilelayout-reorder%}).
+* [Handle Tile Layout events]({%slug tilelayout-events%}).
+* [Manage the Tile Layout state]({%slug tilelayout-state%}).
+
 
 ## See Also
 
-  * [Overview]({%slug tilelayout-overview%})
-  * [State]({%slug tilelayout-state%})
-  * [Events]({%slug tilelayout-events%})
-  * [Live Demo: TileLayout Resizing](https://demos.telerik.com/blazor-ui/tilelayout/resizing)
+* [Overview]({%slug tilelayout-overview%})
+* [Live Demo: TileLayout Resizing](https://demos.telerik.com/blazor-ui/tilelayout/resizing)

components/tilelayout/layout.md

@@ -5,7 +5,7 @@ description: Control, save and load the state of the TileLayout for Blazor.
 slug: tilelayout-state
 tags: telerik,blazor,tile,layout,dashboard,state
 published: True
-position: 15
+position: 25
 ---
 
 # TileLayout State

components/tilelayout/overview.md

@@ -0,0 +1,95 @@
+---
+title: Tile Content
+page_title: TileLayout - Tile Content
+description: How to set tile content when using the TileLayout for Blazor.
+slug: tilelayout-tile-content
+tags: telerik,blazor,tile,layout
+published: True
+position: 10
+---
+
+# Tile Layout Content
+
+This article describes how to set the content of each TileLayout tile.
+
+## Header and Content
+
+To set the tile contents, you have the following options:
+
+* The `HeaderText` is a parameter on the individual tile that renders a simple string in its header portion.
+
+* The `HeaderTemplate` tag lets you define custom content, including components, in the header portion of the tile.
+
+* The `Content` is a `RenderFragment` where you put the content of the tiles - it can range from simple text, to complex components.
+
+>caption Set header and content of tiles
+
+````CSHTML
+<TelerikTileLayout ColumnWidth="200px"
+                   RowHeight="150px"
+                   Width="700px"
+                   Columns="3"
+                   Resizable="true"
+                   Reorderable="true">
+    <TileLayoutItems>
+        <TileLayoutItem HeaderText="Simple Header Text, no content">
+        </TileLayoutItem>
+        <TileLayoutItem HeaderText="Simple Header Text, some content" ColSpan="2">
+            <Content>You can put components in the tiles too.</Content>
+        </TileLayoutItem>
+        <TileLayoutItem ColSpan="2">
+            <HeaderTemplate>
+                <strong>Bold</strong> header from a template
+            </HeaderTemplate>
+            <Content><p>As with other render fragments, you can put <strong>any</strong> content here</p></Content>
+        </TileLayoutItem>
+    </TileLayoutItems>
+</TelerikTileLayout>
+````
+
+
+## Content Scrollbars
+
+The Tile Layout component targets modern web development and thus - responsive dimensions for the content. Therefore, we expect that most content will have `width: 100%; height: 100%;` so that it can stretch according to the size of the tile that the end user chooses.
+
+If you want to change that (for example, because you have certain content that requires dimensions set in `px`), you can use the `Class` of the individual tile and choose the required setting for the `overflow` CSS rule of the `div.k-tilelayout-item-body` element in that particular tile.
+
+>caption Content scrollbars and overflow behavior in the Tile Layout
+
+````CSHTML
+<TelerikTileLayout ColumnWidth="300px"
+                   RowHeight="150px"
+                   Columns="3"
+                   Resizable="true"
+                   Reorderable="true">
+    <TileLayoutItems>
+        <TileLayoutItem HeaderText="Responsive Content">
+            <Content>
+                <div style="width: 100%; height: 100%; background: lime;">My size fits</div>
+            </Content>
+        </TileLayoutItem>
+        <TileLayoutItem HeaderText="Static Content">
+            <Content>
+                <div style="width: 600px; height: 300px; background: yellow;">I will be cut off by default. I will be cut off by default. I will be cut off by default.</div>
+            </Content>
+        </TileLayoutItem>
+        <TileLayoutItem HeaderText="Custom Scrollbars" Class="tile-with-overflow">
+            <Content>
+                <div style="width: 600px; height: 300px; background: cyan;">I produce scrollbars</div>
+            </Content>
+        </TileLayoutItem>
+    </TileLayoutItems>
+</TelerikTileLayout>
+
+<style>
+    .tile-with-overflow .k-tilelayout-item-body {
+        overflow: auto;
+    }
+</style>
+````
+
+## Next Steps
+
+* Enable tile [resizing]({%slug tilelayout-resize%}) and [reordering]({%slug tilelayout-reorder%}).
+* [Handle Tile Layout events]({%slug tilelayout-events%}).
+* [Manage the Tile Layout state]({%slug tilelayout-state%}).