Update grid-rows-text-ellipsis.md (#1548)

* Update grid-rows-text-ellipsis.md In case you need to render all cells and do not want to do it column by column * docs(grid): Apply custom column and row styles to separate Grid instances --------- Co-authored-by: Dimo Dimov <[email protected]>
telerik · Jul 18, 2023 · beeba2a · beeba2a
1 parent dd355c0
commit beeba2a
Showing 1 changed file with 41 additions and 16 deletions.
diff --git a/knowledge-base/grid-rows-text-ellipsis.md b/knowledge-base/grid-rows-text-ellipsis.md
@@ -35,13 +35,14 @@ You might still want to allow the user to see the whole content, so you can enab
 
 
 ````CSHTML
-@*Use the OnCellRender event to pass a custom CSS class to the Grid column and prevent it from wrapping the text in multiple lines for the Notes column. Display the full content of the column in a separate Window component.*@
-
-Resize Note column or double click on a row to see the product details
-
-<TelerikGrid Data="@MyData" Height="400px"
-             Pageable="true" Sortable="true" Groupable="true"
-             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
+@*Use the OnCellRender event to pass a custom CSS class to the Grid column and prevent it from wrapping the text in multiple lines for the Notes column. Display the full content of the column in a separate Window component.
+Use the OnRowRender event to set a custom CSS class to Grid rows.*@
+
+Both Grids have column resizing enabled. Double click a row to see the full Notes value.
+<br />
+Ellipsis for the Notes column via OnCellRender.
+<TelerikGrid Data="@MyData" Height="300px"
+             Pageable="true" Sortable="true"
              Resizable="true" Reorderable="true"
              OnRowDoubleClick="@OnRowDoubleClickHandler">
     <GridColumns>
@@ -61,11 +62,30 @@ Resize Note column or double click on a row to see the product details
     </GridColumns>
 </TelerikGrid>
 
+Ellipsis for all columns via OnRowRender.
+
+<TelerikGrid Data="@MyData" Height="300px"
+             Pageable="true" Sortable="true"
+             Resizable="true" Reorderable="true"
+             OnRowDoubleClick="@OnRowDoubleClickHandler"
+             OnRowRender="@OnRowRender">
+    <GridColumns>
+        <GridColumn Field="@(nameof(SampleData.Id))" Width="100px" />
+        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Width="100px" />
+        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Width="100px" />
+        <GridColumn Field="@(nameof(SampleData.Note))" Title="Notes" Width="200px" />
+        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Width="100px" />
+        <GridColumn Title="Empty Column" />
+    </GridColumns>
+</TelerikGrid>
+
 <style>
     /* template */
     div.custom-ellipsis,
     /* OnCellRender */
-    .k-grid td.custom-ellipsis {
+    .k-grid td.custom-ellipsis,
+    /* OnRowRender */
+    .k-grid tr.custom-ellipsis .k-table-td {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -87,27 +107,34 @@ Resize Note column or double click on a row to see the product details
 </TelerikWindow>
 
 @code {
-    bool WindowIsVisible { get; set; }
+    private bool WindowIsVisible { get; set; }
 
-    SampleData CurrEmployee { get; set; } = new SampleData();
+    private SampleData CurrEmployee { get; set; } = new SampleData();
 
-    void OnRowDoubleClickHandler(GridRowClickEventArgs args)
+    private void OnRowDoubleClickHandler(GridRowClickEventArgs args)
     {
         CurrEmployee = args.Item as SampleData;
 
         WindowIsVisible = !WindowIsVisible;
     }
 
-    void OnCellRenderHandler(GridCellRenderEventArgs args)
+    // apply ellipsis to specific columns
+    private void OnCellRenderHandler(GridCellRenderEventArgs args)
+    {
+        args.Class = "custom-ellipsis";
+    }
+
+    // apply ellipsis to all columns
+    private void OnRowRender(GridRowRenderEventArgs args)
     {
         args.Class = "custom-ellipsis";
     }
 
     public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
     {
         Id = x,
-        Name = "Employee " + x,
-        Team = "team " + x % 5,
+        Name = "Employee Name " + x,
+        Team = "Team Name " + x % 5,
         Note = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has... ",
         HireDate = DateTime.Now.AddDays(-x).Date
     });
@@ -126,5 +153,3 @@ Resize Note column or double click on a row to see the product details
 ## See also
 
 * [Knowledge-Base article: Long text in TreeList does not align with the corresponding level]({%slug treelist-longer-text-starts-from-root-level%})
-
-