Skip to content

Commit 9378c7e

Browse files
dimodidimodi
authored
docs(Grid): Document stacked mode (#3164)
* docs(Grid): Document stacked mode * Add missing intro * Apply PR suggestions
1 parent cbaa143 commit 9378c7e

File tree

14 files changed

+237
-23
lines changed

14 files changed

+237
-23
lines changed

‎components/grid/columns/auto-generated.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: How to automatically generate Grid columns out of a model.
55
slug: grid-columns-automatically-generated
66
tags: telerik,blazor,grid,column,automatic,automatically,generated,columns
77
published: true
8-
position: 5
8+
position: 35
99
---
1010

1111
# Automatically Generated Columns

‎components/grid/columns/checkbox.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Configuration options for the Telerik Blazor Grid Checkbox Column
55
slug: components/grid/columns/checkbox
66
tags: telerik,blazor,grid,column,selection
77
published: True
8-
position: 2
8+
position: 10
99
---
1010

1111
# Grid Checkbox Column

‎components/grid/columns/command.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Command buttons per row in Grid for Blazor.
55
slug: components/grid/columns/command
66
tags: telerik,blazor,grid,column,command
77
published: True
8-
position: 1
8+
position: 5
99
---
1010

1111
# Grid Command Column

‎components/grid/columns/display-format.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Use C# Format string to display values in the Grid for Blazor.
55
slug: grid-columns-displayformat
66
tags: telerik,blazor,grid,column,display,format
77
published: True
8-
position: 2
8+
position: 15
99
---
1010

1111
# Column Display Format

‎components/grid/columns/frozen.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: How to freeze grid columns so they are always visible in a scrollab
55
slug: grid-columns-frozen
66
tags: telerik,blazor,grid,column,freeze,frozen
77
published: true
8-
position: 5
8+
position: 40
99
---
1010

1111
# Frozen Columns

‎components/grid/columns/menu.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Use the Column Menu for the Grid
55
slug: grid-column-menu
66
tags: telerik,blazor,grid,column,columns,menu
77
published: True
8-
position: 20
8+
position: 55
99
---
1010

1111
# Column Menu

‎components/grid/columns/multi-column-headers.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Stack multiple columns under a single header in the data grid for B
55
slug: grid-columns-multiple-column-headers
66
tags: telerik,blazor,grid,column,multi,multiple,headers
77
published: True
8-
position: 25
8+
position: 60
99
---
1010

1111
# Multi-Column Headers

‎components/grid/columns/reorder.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Drag to reorder columns in the Grid for Blazor.
55
slug: components/grid/columns/reorder
66
tags: telerik,blazor,grid,column,reorder,drag
77
published: True
8-
position: 2
8+
position: 25
99
---
1010

1111
# Reorder Columns

‎components/grid/columns/resize.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Drag to resize columns in the Grid for Blazor.
55
slug: components/grid/columns/resize
66
tags: telerik,blazor,grid,column,resize,drag
77
published: True
8-
position: 3
8+
position: 20
99
---
1010

1111
# Resize Columns

‎components/grid/columns/stacked.md‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
---
2+
title: Stacked
3+
page_title: Grid - Stacked Columns
4+
description: How to adapt the Grid on small screens and display the values of one data item vertically instead of horizontally.
5+
slug: grid-columns-stacked
6+
tags: telerik,blazor,grid,column,stacked
7+
published: true
8+
position: 37
9+
---
10+
11+
# Stacked Columns
12+
13+
Stacked columns is an adaptive Grid feature that allows the component to display data item values vertically in one or more cards, instead of horizontally in classic table cells. This facilitates browsing the Grid data on narrow screens like mobile phones in portrait orientation.
14+
15+
The Grid stacked columns functionality depends on three configuraton settings:
16+
17+
* The [`DataLayoutMode` parameter](#data-layout-mode) of the Grid.
18+
* The [`ColumnsCount` parameter](#stacked-columns-count) of `<GridStackedLayoutSettings>`.
19+
* The [`Width` parameter](#stacked-columns-width) of each `<GridStackedLayoutColumn>`.
20+
21+
Only the `DataLayoutMode` parameter is required to use stacked Grid columns.
22+
23+
## Data Layout Mode
24+
25+
The show stacked Grid columns, set the `DataLayoutMode` component parameter to `GridDataLayoutMode.Stacked`. The default parameter value is `GridDataLayoutMode.Columns`.
26+
27+
>caption Enable stacked columns in the Grid
28+
29+
````RAZOR.skip-repl
30+
<TelerikGrid DataLayoutMode="@GridDataLayoutMode.Stacked" />
31+
````
32+
33+
## Stacked Columns Count
34+
35+
`ColumnsCount` is a an optional parameter of `<GridStackedLayoutSettings>`, which is a child tag of `<GridSettings>`. The `ColumnsCount` parameter sets how many stacked columns will show. The default value is `1`, which means that all data row values will display one below the other in a single column.
36+
37+
When using multiple stacked columns, the data row values are arranged first horizontally and then vertically. The following code snippet uses 2 stacked columns, so that the odd columns (`Name`, `Quantity` and `IsActive`) display in the first stacked column, while the even columns (`Price`, `StartDate`, and the command buttons) display in the second stacked column.
38+
39+
>caption Display 2 stacked columns in the Grid
40+
41+
````RAZOR.skip-repl
42+
<TelerikGrid DataLayoutMode="@GridDataLayoutMode.Stacked">
43+
<GridSettings>
44+
<GridStackedLayoutSettings ColumnsCount="2" />
45+
</GridSettings>
46+
<GridColumns>
47+
<GridColumn Field="@nameof(Product.Name)" />
48+
<GridColumn Field="@nameof(Product.Price)" />
49+
<GridColumn Field="@nameof(Product.Quantity)" />
50+
<GridColumn Field="@nameof(Product.StartDate)" />
51+
<GridColumn Field="@nameof(Product.IsActive)" />
52+
<GridCommandColumn>
53+
<GridCommandButton />
54+
</GridCommandColumn>
55+
</GridColumns>
56+
</TelerikGrid>
57+
````
58+
59+
## Stacked Columns Width
60+
61+
An optional `<GridStackedLayoutColumns>` tag inside `<GridStackedLayoutSettings>` allows you to define custom `Width` for each stacked column (`<GridStackedLayoutColumn>`) when there is more than one. The default width value is `"1fr"`, which means one equal fraction of the available horizontal space. The stacked Grid columns use the [CSS Grid concept](https://css-tricks.com/snippets/css/complete-guide-grid/) for HTML rendering.
62+
63+
> When using `<GridStackedLayoutColumn>` instances, the number of these tags must match the `ColumnsCount` value.
64+
65+
The code snippet below uses 3 stacked columns. The first one is twice as wide as the others.
66+
67+
>caption Set custom widths to the stacked Grid columns
68+
69+
````RAZOR.skip-repl
70+
<GridStackedLayoutSettings ColumnsCount="3">
71+
<GridStackedLayoutColumns>
72+
<GridStackedLayoutColumn Width="2fr" />
73+
<GridStackedLayoutColumn Width="1fr" />
74+
<GridStackedLayoutColumn Width="1fr" />
75+
</GridStackedLayoutColumns>
76+
</GridStackedLayoutSettings>
77+
78+
````
79+
80+
## Integration with Other Features
81+
82+
When the Grid is in `Stacked` data layout mode, it does not render column headers. As a result, column features like sorting, filtering, grouping, locking are not available through the classic Grid UI. Instead, use [ToolBar command tools](slug:components/grid/features/toolbar#command-tools) to enable the same functionality through different UI.
83+
84+
Hierarchy relies on an expand/collapse button, which is below the stacked table row content.
85+
86+
## Example
87+
88+
The following sample shows how to:
89+
90+
* Enable and disable column stacking, depending on the viewport width.
91+
* Display 1 or 2 stacked columns, depending on the viewport width.
92+
* Render ToolBar tools for column operations only when the Grid is in `Stacked` data layout mode.
93+
94+
>caption Using stacked data layout mode in the Blazor Grid
95+
96+
````RAZOR
97+
@using System.ComponentModel.DataAnnotations
98+
99+
<TelerikMediaQuery Media="(min-width:1200px)" OnChange="@( (bool matches) => IsLargeScreen = matches )" />
100+
<TelerikMediaQuery Media="(min-width:800px)" OnChange="@( (bool matches) => IsMediumScreen = matches )" />
101+
<TelerikMediaQuery Media="(max-width:500px)" OnChange="@( (bool matches) => IsSmallScreen = matches )" />
102+
103+
<TelerikGrid Data="@GridData"
104+
DataLayoutMode="@( IsLargeScreen ? GridDataLayoutMode.Columns : GridDataLayoutMode.Stacked )"
105+
FilterMode="@GridFilterMode.FilterMenu"
106+
EditMode="@GridEditMode.Inline"
107+
Groupable="true"
108+
OnUpdate="@OnGridUpdate"
109+
OnCreate="@OnGridCreate"
110+
SelectionMode="@GridSelectionMode.Multiple"
111+
@bind-SelectedItems="@GridSelectedItems"
112+
ShowColumnMenu="true"
113+
Sortable="true"
114+
Height="90vh">
115+
<GridSettings>
116+
<GridStackedLayoutSettings ColumnsCount="@GridStackedColumnsCount" />
117+
<GridToolBarSettings OverflowMode="@GridToolBarOverflowMode.Scroll" />
118+
</GridSettings>
119+
<GridToolBar>
120+
<GridToolBarAddTool>Add</GridToolBarAddTool>
121+
@if (!IsLargeScreen)
122+
{
123+
<GridToolBarSelectAllTool Text="Select&nbsp;All" />
124+
<GridToolBarSortTool>Sort</GridToolBarSortTool>
125+
<GridToolBarFilterTool>Filter</GridToolBarFilterTool>
126+
<GridToolBarColumnChooserTool>Columns</GridToolBarColumnChooserTool>
127+
<GridToolBarGroupTool>Group</GridToolBarGroupTool>
128+
}
129+
</GridToolBar>
130+
<GridColumns>
131+
<GridCheckboxColumn />
132+
<GridColumn Field="@nameof(Product.Name)" />
133+
<GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" />
134+
<GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" />
135+
<GridColumn Field="@nameof(Product.StartDate)" DisplayFormat="{0:d}" />
136+
<GridColumn Field="@nameof(Product.IsActive)" />
137+
<GridCommandColumn Width="120px">
138+
<GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil" />
139+
<GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true" />
140+
<GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true" />
141+
</GridCommandColumn>
142+
</GridColumns>
143+
<DetailTemplate>
144+
<div style="padding:0.5em 0;">DetailTemplate for @context.Name</div>
145+
</DetailTemplate>
146+
</TelerikGrid>
147+
148+
@code {
149+
private int GridStackedColumnsCount => IsSmallScreen ? 1 : 2;
150+
151+
private List<Product> GridData { get; set; } = new();
152+
private IEnumerable<Product> GridSelectedItems { get; set; } = new List<Product>();
153+
154+
private bool IsLargeScreen { get; set; }
155+
private bool IsMediumScreen { get; set; }
156+
private bool IsSmallScreen { get; set; }
157+
158+
private int LastId { get; set; }
159+
160+
private void OnGridCreate(GridCommandEventArgs args)
161+
{
162+
var createdItem = (Product)args.Item;
163+
164+
createdItem.Id = ++LastId;
165+
166+
GridData.Insert(0, createdItem);
167+
}
168+
169+
private void OnGridUpdate(GridCommandEventArgs args)
170+
{
171+
var updatedItem = (Product)args.Item;
172+
var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);
173+
174+
if (originalItemIndex != -1)
175+
{
176+
GridData[originalItemIndex] = updatedItem;
177+
}
178+
}
179+
180+
protected override void OnInitialized()
181+
{
182+
for (int i = 1; i <= 5; i++)
183+
{
184+
GridData.Add(new Product()
185+
{
186+
Id = ++LastId,
187+
Name = $"Product {LastId}",
188+
Price = Random.Shared.Next(0, 100) * 1.23m,
189+
Quantity = Random.Shared.Next(0, 10000),
190+
StartDate = DateTime.Now.AddDays(-Random.Shared.Next(60, 1000)),
191+
IsActive = LastId % 2 != 0
192+
});
193+
}
194+
}
195+
196+
public class Product
197+
{
198+
public int Id { get; set; }
199+
[Required]
200+
public string Name { get; set; } = string.Empty;
201+
public decimal? Price { get; set; }
202+
public int Quantity { get; set; }
203+
[Required]
204+
public DateTime? StartDate { get; set; } = DateTime.Today;
205+
public bool IsActive { get; set; }
206+
}
207+
}
208+
````
209+
210+
## See also
211+
212+
* [Live demo: Adaptive Grid](https://demos.telerik.com/blazor-ui/grid/adaptive)
213+
* [Live demo: Grid and MediaQuery Integration](https://demos.telerik.com/blazor-ui/mediaquery/grid-integration)

0 commit comments

Comments
 (0)