Skip to content

Commit 553f3dd

Browse files
dimodidimodi
committed
docs(Grid): Document stacked mode
1 parent fcf99af commit 553f3dd

File tree

14 files changed

+235
-21
lines changed

14 files changed

+235
-21
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
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)