docs(grid): improve virualized columns article

marin-bratanov · marin-bratanov · commit ad49f3b9cab1 · 2020-04-17T11:31:48.000+03:00
diff --git a/components/grid/columns/virtual.md b/components/grid/columns/virtual.md
@@ -3,39 +3,41 @@ title: Virtualized
 page_title: Grid for Blazor | Virtual Columns
 description: How to add virtual columns to a scrollable Grid.
 slug: grid-columns-virtual
-tags: telerik,blazor,grid,column,virtual
+tags: telerik,blazor,grid,column,virtual,scrolling
 published: true
 position: 5
 ---
 
 # Virtualized Columns
 
-The Grid lets you add Virtualized Columns. This means that columns and the corresponding data will be rendered only for the currently visible viewport. When changing the [Page]({%slug components/grid/features/paging%}) or [Sorting]({%slug components/grid/features/sorting%}) the Grid less elements are rendered which improves the responsiveness and the overall user experience.
+The Telerik Blazor Grid provides Virtual Scrolling for its Columns. This means that columns and the corresponding data will be rendered only for the currently visible viewport. When changing the [Page]({%slug components/grid/features/paging%}) or [Sorting]({%slug components/grid/features/sorting%}) the Grid, fewer elements are rendered which improves the responsiveness and the overall user experience.
 
-## Requirements
-To enable Virtualized Columns:
-* Set the `ColumnVirtualization` parameter of the Grid to `true`.
-* Set the `Width` parameter of the Grid in `px`.
-* Set the `Width` parameter of all columns in `px` so that the total sum is greater than the `Width` of the Grid which will enable horizontal scrollbar. You can read more about the scrolling behavior of the grid in the [Grid Column Width Behavior]({%slug grid-columns-width%}) article.
-* Set the `RowHeight` so that the content of all cells fit in the row. For more information see the [Notes](#notes) section.
-* Set the `Height` of the Grid in `px`. For more information see the [Notes](#notes) section.
-
-
-This article will be separated in the following sections:
+This article provides the following sections:
 * [Basics](#basics)
-* [Virtualized Columns and Rows](#virtualized-columns-and-rows)
-* [Virtualized Autogenerated Columns](#virtualized-autogenerated-columns)
 * [Notes](#notes)
+* [More Examples](#more-examples)
+    * [Virtualized Columns and Rows](#virtualized-columns-and-rows)
+    * [Virtualized Autogenerated Columns](#virtualized-autogenerated-columns)
 
 
 ## Basics
 
-The targeted scenario is for Grid with big volume of columns, since the performance improvement will be most significant there.
+The targeted scenario is for a Grid with big number of columns, since the performance improvement will be most significant there.
+
+To enable Virtualized Columns:
+
+1. Set the `ColumnVirtualization` parameter of the Grid to `true`.
+1. Set the `Width` parameter of all columns in `px` so that the total sum is greater than the `Width` of the Grid 
+    * This will enable horizontal scrollbar which is required. You can read more about the scrolling behavior of the grid in the [Grid Column Width Behavior]({%slug grid-columns-width%}) article.
+1. Set the `RowHeight` so that the content of all cells fits in the row. For more information see the [Notes](#notes) section.
+1. Set the `Height` of the Grid in `px`. For more information see the [Notes](#notes) section.
+
+
 
 >caption Basic setup of the Virtualized Columns
 
 ````CSHTML
-@*Observe the behavior of the Grid with enabled ColumnVirtualization*@
+@* Observe the behavior of the Grid with enabled ColumnVirtualization *@
 
 <TelerikGrid Data="@MyData"
              Width="800px"
@@ -87,7 +89,6 @@ The targeted scenario is for Grid with big volume of columns, since the performa
             get
             {
                 string fullName = $"{FirstName} {LastName}";
-
                 return fullName;
             }
         }
@@ -98,7 +99,6 @@ The targeted scenario is for Grid with big volume of columns, since the performa
             {
                 var timeSpan = DateTime.Today - DateOfBirth;
                 var years = timeSpan.Days / 365;
-
                 return years;
             }
         }
@@ -110,9 +110,25 @@ The targeted scenario is for Grid with big volume of columns, since the performa
     }
 }
 ````
->caption The result from the code snippet above
+>caption The result from the code snippet above - scrolling through the grid is the same as without virtual scrolling, but the rendering performance and responsiveness of all other actions will be improved.
 ![gif of virtual columns](images/virtual-columns-basic.gif)
 
+
+## Notes
+
+ * The `RowHeight` must accommodate the height of all the possible cells and their content in order to ensure good appearance. If certain cells that are not rendered have content that is taller than the rendered ones, you may experience glitches and unstable scrolling.
+    * If the row/cell height the browser would render is larger than the `RowHeight` value due to the cell contents, the browser will ignore the `RowHeight`. The actual cell height can depend on the chosen Theme or other CSS rules, or on cell data that falls on more than one line. Inspect the rendered HTML to make sure the grid setting matches the rendering.
+ * The `Height` of the Grid must be explicitly set in `px`. By default the Height is set by the browser depending on the contents. When a new column is rendered during horizontal scrolling, it might increase or decrease the vertical size of the row and cause issues with the rendering and abnormal visual behavior for the users.
+ * Rendering the Virtual Columns in Client-side Blazor Applications is slower due to the Framework rendering limitations. In the Server-side Applications this issue is not present.
+ 
+
+## More Examples
+
+The column virtualization can work together with other similar features in the grid:
+
+* [With Row Virtualization](#virtualized-columns-and-rows)
+* [With Automatically Generated Columns](#virtualized-autogenerated-columns)
+
 ## Virtualized Columns and Rows
 
 You can use Virtualized Columns and Rows together. More information on Virtual Rows can be found in the [Virtual Scrolling]({%slug components/grid/virtual-scrolling%}) article.
@@ -172,7 +188,6 @@ You can use Virtualized Columns and Rows together. More information on Virtual R
             get
             {
                 string fullName = $"{FirstName} {LastName}";
-
                 return fullName;
             }
         }
@@ -183,7 +198,6 @@ You can use Virtualized Columns and Rows together. More information on Virtual R
             {
                 var timeSpan = DateTime.Today - DateOfBirth;
                 var years = timeSpan.Days / 365;
-
                 return years;
             }
         }
@@ -201,7 +215,9 @@ You can use Virtualized Columns and Rows together. More information on Virtual R
 
 ## Virtualized Autogenerated Columns
 
-In order to add Virtualized Autogenerated Columns, the `ColumnWidth` parameter must be set. For more information on Autogenerated columns you can read the [Automatically Generated Columns]({%slug grid-columns-automatically-generated%}) article.
+Column virtualization is commonly used when you have many columns. You may not have to declare them yourself, the grid can do this for your through its [Automatically Generated Columns]({%slug grid-columns-automatically-generated%}) feature.
+
+>note In order to add Virtualized Autogenerated Columns, the `ColumnWidth` parameter must be set in pixels.
 
 ````CSHTML
 @*Grid with Virtual Autogenerated Columns*@
@@ -252,7 +268,6 @@ In order to add Virtualized Autogenerated Columns, the `ColumnWidth` parameter m
             get
             {
                 string fullName = $"{FirstName} {LastName}";
-
                 return fullName;
             }
         }
@@ -267,7 +282,6 @@ In order to add Virtualized Autogenerated Columns, the `ColumnWidth` parameter m
             {
                 var timeSpan = DateTime.Today - DateOfBirth;
                 var years = timeSpan.Days / 365;
-
                 return years;
             }
         }
@@ -293,10 +307,7 @@ In order to add Virtualized Autogenerated Columns, the `ColumnWidth` parameter m
 
 ![gif of virtual columns](images/virtual-columns-autogenerated.gif)
 
-## Notes
- * Rendering the Virtual Columns in Client-side Blazor Applications is slower due to the Framework rendering limitations. In the Server-side Applications this issue is not present.
- * The `RowHeight` must accommodate the height of all the possible cells and their content in order to ensure good appearance. If certain cells that are not rendered have content that is taller than the rendered ones, you may experience glitches and unstable scrolling. If the row/cell height the browser would render is larger than the `RowHeight` value, the browser will ignore it. It can depend on the chosen Theme or other CSS rules, or on cell data that falls on more than one row. Inspect the rendered HTML to make sure the grid setting matches the rendering.
- * The `Height` of the Grid must be explicitly set in `px`. By default the Height is calculated. When a new row is rendered during horizontal scrolling it might increase the horizonal size of the Grid and cause issues with the rendering and abnormal visual behavior for the users.
+
 
 
 ## See also
