Skip to content

Commit 4cb94c9

Browse files
jivanovajivanova
committed
docs(grid): initial selection article telerik/blazor#313 
1 parent 510b547 commit 4cb94c9

File tree

2 files changed

+212
-1
lines changed

2 files changed

+212
-1
lines changed

‎components/grid/overview.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ To create a basic Telerik Grid:
2323
````CSHTML
2424
@using Telerik.Blazor.Components.Grid
2525
26-
<TelerikGrid Data="@MyData" Height="300px"
26+
<TelerikGrid Data="@MyData" Height="300px"
2727
Pageable="true" Sortable="true"
2828
FilterMode="Telerik.Blazor.FilterMode.FilterRow">
2929
<TelerikGridColumns>
@@ -113,6 +113,10 @@ The grid can filter data automatically. You can read more about thsi feature in
113113

114114
The grid can group data automatically. You can read more about this feature in the [Grouping]({%slug components/grid/features/grouping%}) article.
115115

116+
## Selection
117+
118+
The grid offers single or multiple selection modes. You can read more about this feature in the [Selection]({%slug components/grid/features/selection%}) article.
119+
116120
## Toolbar
117121

118122
You can define user actions in a [dedicated toolbar]({%slug components/grid/features/toolbar%}). For the moment, they are mostly custom actions, but in future versions you will be able to add features like exporting there.

‎components/grid/selection.md

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
---
2+
title: Selection
3+
page_title: Grid for Blazor | Selection
4+
description: Enable and configure selection in Grid for Blazor
5+
slug: components/grid/features/selection
6+
tags: telerik,blazor,grid,selection
7+
published: True
8+
position: 22
9+
---
10+
11+
# Grid Selection
12+
13+
The Grid component offers support for row selection.
14+
15+
You can configure the selection by setting `SelectionMode` to a member of the `Telerik.Blazor.GridSelectionMode` enum. The row selection can be:
16+
17+
* `Single`
18+
* `Multiple`
19+
20+
You can configure initial selected items by setting the `SelectedItems` property to a collection of items from the Grid's `Data`. You could either use two-way binding, or `SelectedItemsChanged` event to track user selection.
21+
22+
The Grid supports selection via a checkbox column to be used. To define it, add a `TelerikGridCheckboxColumn` in the `TelerikGridColumns` collection of the grid.
23+
24+
## Single Selection
25+
26+
In Single SelectionMode, selection is applied via a click on a row, or clicking a checkbox if `TelerikGridCheckboxColumn` is configured.
27+
28+
>caption Single Selection and SelectedItemsChanged usage
29+
30+
````CSHTML
31+
@using Telerik.Blazor.Components.Grid
32+
@if (SelectedEmployee != null)
33+
{
34+
<span>Selected Employee: @SelectedEmployee.Name </span>
35+
}
36+
<TelerikGrid Data=@GridData
37+
SelectionMode="GridSelectionMode.Single"
38+
SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))" Height="400px">
39+
<TelerikGridColumns>
40+
<TelerikGridColumn Field=@nameof(Employee.Name) />
41+
<TelerikGridColumn Field=@nameof(Employee.Team) Title="Team" />
42+
<TelerikGridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
43+
</TelerikGridColumns>
44+
</TelerikGrid>
45+
46+
@code {
47+
public List<Employee> GridData { get; set; }
48+
public Employee SelectedEmployee { get; set; }
49+
50+
protected override void OnInitialized()
51+
{
52+
GridData = new List<Employee>();
53+
var rand = new Random();
54+
for (int i = 0; i < 15; i++)
55+
{
56+
GridData.Add(new Employee()
57+
{
58+
EmployeeId = i,
59+
Name = "Employee " + i.ToString(),
60+
Team = "Team " + i % 3,
61+
IsOnLeave = i % 2 == 0
62+
});
63+
}
64+
}
65+
66+
protected void OnSelect(IEnumerable<Employee> employees)
67+
{
68+
SelectedEmployee = employees.FirstOrDefault();
69+
}
70+
71+
public class Employee
72+
{
73+
public int EmployeeId { get; set; }
74+
public string Name { get; set; }
75+
public string Team { get; set; }
76+
public bool IsOnLeave { get; set; }
77+
}
78+
}
79+
80+
````
81+
82+
## Multiple Selection
83+
84+
In Multiple SelectionMode, selection could be made using the following approaches:
85+
86+
* Select the checkbox of each desired row, or
87+
* Press and hold `Ctrl`, and click the desired rows
88+
89+
For range selection, you could use the `Shift` key and click the row you want to be the last in the range. As a result, all rows between the initially selected row and the last one are selected.
90+
91+
>caption Multiple Selection and SelectedItems two-way binding
92+
93+
````CSHTML
94+
@using Telerik.Blazor.Components.Grid
95+
96+
<h3>
97+
Selected Employees:
98+
</h3>
99+
<ul>
100+
@foreach (Employee employee in Employees.ToList())
101+
{
102+
<li>
103+
@employee.Name
104+
</li>
105+
}
106+
</ul>
107+
<TelerikGrid Data=@GridData
108+
SelectionMode="GridSelectionMode.Multiple"
109+
@bind-SelectedItems="@Employees" Height="400px">
110+
<TelerikGridColumns>
111+
<TelerikGridColumn Field=@nameof(Employee.Name) />
112+
<TelerikGridColumn Field=@nameof(Employee.Team) Title="Team" />
113+
<TelerikGridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
114+
</TelerikGridColumns>
115+
</TelerikGrid>
116+
117+
@code {
118+
public List<Employee> GridData { get; set; }
119+
public IEnumerable<Employee> Employees { get; set; }
120+
121+
protected override void OnInitialized()
122+
{
123+
GridData = new List<Employee>();
124+
var rand = new Random();
125+
for (int i = 0; i < 15; i++)
126+
{
127+
GridData.Add(new Employee()
128+
{
129+
EmployeeId = i,
130+
Name = "Employee " + i.ToString(),
131+
Team = "Team " + i % 3,
132+
IsOnLeave = i % 2 == 0
133+
});
134+
}
135+
136+
Employees = GridData.Take(2);
137+
}
138+
139+
public class Employee
140+
{
141+
public int EmployeeId { get; set; }
142+
public string Name { get; set; }
143+
public string Team { get; set; }
144+
public bool IsOnLeave { get; set; }
145+
}
146+
}
147+
````
148+
149+
## Checkbox Support
150+
151+
Configure `TelerikGridCheckboxColumn` to render a checkbox column to enhance the selection user experience.
152+
153+
The Grid allows selection and deselection of rows on a page via the `SelectAll` property. This property will render a checkbox in the grid header that could be used for selection of whole pages.
154+
155+
>caption Checkbox support
156+
157+
````CSHTML
158+
@using Telerik.Blazor.Components.Grid
159+
<TelerikGrid Data=@GridData
160+
SelectionMode="GridSelectionMode.Multiple"
161+
Height="265px"
162+
Pageable="true"
163+
PageSize="5">
164+
<TelerikGridColumns>
165+
<TelerikGridCheckboxColumn SelectAll="true"></TelerikGridCheckboxColumn>
166+
<TelerikGridColumn Field=@nameof(Employee.Name) />
167+
<TelerikGridColumn Field=@nameof(Employee.Team) Title="Team" />
168+
<TelerikGridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
169+
</TelerikGridColumns>
170+
</TelerikGrid>
171+
172+
@code {
173+
public List<Employee> GridData { get; set; }
174+
175+
protected override void OnInitialized()
176+
{
177+
GridData = new List<Employee>();
178+
var rand = new Random();
179+
for (int i = 0; i < 15; i++)
180+
{
181+
GridData.Add(new Employee()
182+
{
183+
EmployeeId = i,
184+
Name = "Employee " + i.ToString(),
185+
Team = "Team " + i % 3,
186+
IsOnLeave = i % 2 == 0
187+
});
188+
}
189+
}
190+
191+
public class Employee
192+
{
193+
public int EmployeeId { get; set; }
194+
public string Name { get; set; }
195+
public string Team { get; set; }
196+
public bool IsOnLeave { get; set; }
197+
}
198+
}
199+
````
200+
201+
>note Selection in `Incell` EditMode could be applied only via a checkbox column. This is required due to the overlapping action that triggers selection and incell editing.
202+
203+
204+
## See Also
205+
206+
* [Live Demo: Grid Selection](https://demos.telerik.com/blazor-ui/grid/selection)
207+

0 commit comments

Comments
 (0)