Skip to content

Commit b092bec

Browse files
marin-bratanovmarin-bratanov
authored
Merge pull request #16 from telerik/selection
Grid Selection
2 parents d4e17e4 + 4241ba5 commit b092bec

File tree

8 files changed

+526
-7
lines changed

8 files changed

+526
-7
lines changed

‎_config.yml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@ navigation:
4848
"*components/grid/editing":
4949
title: "Editing"
5050
position: 10
51-
"*components/grid/features":
52-
title: "Features"
53-
position: 15
51+
"*components/grid/selection":
52+
title: "Selection"
53+
position: 23
5454
"*components/chart/types":
5555
title: "Types"
5656
position: 15

‎components/grid/manual-operations.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: How to implement your own read, page, fiter, sort operations for th
55
slug: components/grid/manual-operations
66
tags: telerik,blazor,grid,read,filter,sort,page,manual,data,data source
77
published: True
8-
position: 30
8+
position: 50
99
---
1010

1111
# Manual Data Source Operations

‎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/selection/overview%}) 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/multiple.md

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
---
2+
title: Multiple Rows
3+
page_title: Grid for Blazor | Multiple Selection
4+
description: Single row selection in the Grid for Blazor
5+
slug: components/grid/selection/multiple
6+
tags: telerik,blazor,grid,selection,multiple
7+
published: True
8+
position: 2
9+
---
10+
11+
# Multiple Row Selection
12+
13+
The Grid component can allow the user to select many rows at a time, or to select [only one]({%slug components/grid/selection/single %}).
14+
15+
To use **multiple** row selection, set the `SelectionMode` property to `Telerik.Blazor.GridSelectionMode.Multiple`.
16+
17+
In Multiple SelectionMode, selection could be made using the following approaches:
18+
19+
* Click on a row to select only that row (and deselect any others)
20+
* Press and hold `Ctrl` and click the desired rows to select or deselect them.
21+
* Click on the starting row of a range of rows you want selected, press and hold `Shift`, and click on the last row of the range. The last selected item is the start point of the range and the current target row is the end of the selection.
22+
* Select the checkbox of each desired row.
23+
24+
>tip The [Examples](#examples) section showcases how you can use the grid features together.
25+
26+
## Checkbox Selection
27+
28+
To add checkboxes in each row that the user can use for selection, add a `TelerikGridCheckboxColumn` in the `TelerikGridColumns` collection of the grid.
29+
30+
The Grid allows selection and deselection of all rows on the current page via the `SelectAll` property. Setting this property to `true` (its default value) will render a checkbox in the grid header that the you can click to select whole pages.
31+
32+
## Selected Items
33+
34+
The `SelectedItemsChanged` event receives a collection of the grid data model. It may have no items in it.
35+
36+
You can use the `SelectedItems` collection in two-way binding. You can use this to pre-select rows for your users.
37+
38+
The `SelectedItems` collection persists across paging operations. Changing the page will keep it populated and you can add more items to the selection.
39+
40+
## Examples
41+
42+
### Multiple Row Selection and Checkbox
43+
44+
You can add a checkbox column for selection. It is required if the `InCell` edit mode is used. Otherwise, it is optional.
45+
46+
>caption Multiple Selection and a checkbox column.
47+
48+
````CSHTML
49+
@using Telerik.Blazor.Components.Grid
50+
51+
<TelerikGrid Data=@GridData
52+
SelectionMode="GridSelectionMode.Multiple"
53+
Pageable="true">
54+
<TelerikGridColumns>
55+
<TelerikGridCheckboxColumn />
56+
<TelerikGridColumn Field=@nameof(Employee.Name) />
57+
<TelerikGridColumn Field=@nameof(Employee.Team) Title="Team" />
58+
</TelerikGridColumns>
59+
</TelerikGrid>
60+
61+
@code {
62+
public List<Employee> GridData { get; set; }
63+
64+
protected override void OnInitialized()
65+
{
66+
GridData = new List<Employee>();
67+
for (int i = 0; i < 15; i++)
68+
{
69+
GridData.Add(new Employee()
70+
{
71+
EmployeeId = i,
72+
Name = "Employee " + i.ToString(),
73+
Team = "Team " + i % 3
74+
});
75+
}
76+
}
77+
78+
public class Employee
79+
{
80+
public int EmployeeId { get; set; }
81+
public string Name { get; set; }
82+
public string Team { get; set; }
83+
}
84+
}
85+
````
86+
87+
### SelectedItemsChanged Event
88+
89+
You can respond to the user action of selecting a new item through the `SelectedItemsChanged` event.
90+
91+
>caption Multiple Selection and handling the SelectedItemsChanged event
92+
93+
````CSHTML
94+
@using Telerik.Blazor.Components.Grid
95+
96+
<TelerikGrid Data=@GridData
97+
SelectionMode="GridSelectionMode.Multiple"
98+
SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
99+
Pageable="true"
100+
Height="400px">
101+
<TelerikGridColumns>
102+
<TelerikGridCheckboxColumn />
103+
<TelerikGridColumn Field=@nameof(Employee.Name) />
104+
<TelerikGridColumn Field=@nameof(Employee.Team) Title="Team" />
105+
</TelerikGridColumns>
106+
</TelerikGrid>
107+
108+
@if (SelectedEmployees != null)
109+
{
110+
<ul>
111+
@foreach (Employee employee in SelectedEmployees)
112+
{
113+
<li>
114+
@employee.Name
115+
</li>
116+
}
117+
</ul>
118+
}
119+
120+
@code {
121+
public List<Employee> GridData { get; set; }
122+
public IEnumerable<Employee> SelectedEmployees { get; set; }
123+
124+
protected override void OnInitialized()
125+
{
126+
GridData = new List<Employee>();
127+
for (int i = 0; i < 15; i++)
128+
{
129+
GridData.Add(new Employee()
130+
{
131+
EmployeeId = i,
132+
Name = "Employee " + i.ToString(),
133+
Team = "Team " + i % 3
134+
});
135+
}
136+
}
137+
138+
protected void OnSelect(IEnumerable<Employee> employees)
139+
{
140+
SelectedEmployees = employees;
141+
}
142+
143+
public class Employee
144+
{
145+
public int EmployeeId { get; set; }
146+
public string Name { get; set; }
147+
public string Team { get; set; }
148+
}
149+
}
150+
````
151+
152+
@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
153+
154+
@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)
155+
156+
### Two-way Binding of SelectedItems
157+
158+
You can predefine the selected items for your users through the two-way binding of the `SelectedItems` property. The collection will be updated by the grid when the selection changes. Note that both binding to the property and using its event cannot be used at the same time, as Blazor only allows one.
159+
160+
>caption Multiple Selection and two-way binding of the `SelectedItems` property
161+
162+
````CSHTML
163+
@using Telerik.Blazor.Components.Grid
164+
165+
<TelerikGrid Data=@GridData
166+
SelectionMode="GridSelectionMode.Multiple"
167+
@bind-SelectedItems="SelectedItems"
168+
Pageable="true"
169+
Height="400px">
170+
<TelerikGridColumns>
171+
<TelerikGridCheckboxColumn />
172+
<TelerikGridColumn Field=@nameof(Employee.Name) />
173+
<TelerikGridColumn Field=@nameof(Employee.Team) Title="Team" />
174+
</TelerikGridColumns>
175+
</TelerikGrid>
176+
177+
@if (SelectedItems != null)
178+
{
179+
<ul>
180+
@foreach (Employee employee in SelectedItems)
181+
{
182+
<li>
183+
@employee.Name
184+
</li>
185+
}
186+
</ul>
187+
}
188+
189+
@code {
190+
public List<Employee> GridData { get; set; }
191+
public IEnumerable<Employee> SelectedItems { get; set; }
192+
193+
protected override void OnInitialized()
194+
{
195+
GridData = new List<Employee>();
196+
for (int i = 0; i < 15; i++)
197+
{
198+
GridData.Add(new Employee()
199+
{
200+
EmployeeId = i,
201+
Name = "Employee " + i.ToString(),
202+
Team = "Team " + i % 3
203+
});
204+
}
205+
206+
// select Employee with 3 through 5
207+
SelectedItems = GridData.Skip(2).Take(3).ToList();
208+
}
209+
210+
public class Employee
211+
{
212+
public int EmployeeId { get; set; }
213+
public string Name { get; set; }
214+
public string Team { get; set; }
215+
}
216+
}
217+
218+
````
219+
220+
221+
## See Also
222+
223+
* [Live Demo: Grid Selection](https://demos.telerik.com/blazor-ui/grid/selection)
224+
* [Live Demo: Grid Checkbox Selection](https://demos.telerik.com/blazor-ui/grid/checkbox-selection)
225+
* [Single Selection]({%slug components/grid/selection/single%}})

‎components/grid/selection/overview.md

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: Overview
3+
page_title: Grid for Blazor | Selection Overview
4+
description: Selection basics in the Grid for Blazor
5+
slug: components/grid/selection/overview
6+
tags: telerik,blazor,grid,selection,overview
7+
published: True
8+
position: 0
9+
---
10+
11+
# Grid Selection
12+
13+
The Grid component offers support for row selection.
14+
15+
You can configure the selection behavior by setting `SelectionMode` to a member of the `Telerik.Blazor.GridSelectionMode` enum. The row selection can be:
16+
17+
* [Single]({%slug components/grid/selection/single%})
18+
* [Multiple]({%slug components/grid/selection/multiple%})
19+
* `None` - to disable row selection
20+
21+
To select a row, click on it. To select multiple rows, hold down the `Ctrl` or `Shift` key to extend the selection.
22+
23+
You can also use a [checkbox column](#checkbox-support) to select rows. To use it, add a `TelerikGridCheckboxColumn` in the `TelerikGridColumns` collection of the grid. It works with both selection modes. The checkbox in the header selects all items in the current page (if its `SelectAll` parameter is set to `true`).
24+
25+
You can get or set the [selected items](#get-or-set-selected-items) through the `SelectedItems` property. It is a collection of items from the Grid's `Data`. You can use two-way binding, or the `SelectedItemsChanged` event to track the user selection.
26+
27+
The [single selection]({%slug components/grid/selection/single%}) and [multiple selection]({%slug components/grid/selection/multiple%}) articles provide more examples and details on using the grid features.
28+
29+
>caption Enable row selection
30+
31+
````CSHTML
32+
@using Telerik.Blazor.Components.Grid
33+
34+
<select @bind=@selectionMode>
35+
<option value=@GridSelectionMode.Single>Single</option>
36+
<option value=@GridSelectionMode.Multiple>Multiple</option>
37+
</select>
38+
39+
<TelerikGrid Data=@GridData
40+
SelectionMode="@selectionMode"
41+
Pageable="true">
42+
<TelerikGridColumns>
43+
<TelerikGridCheckboxColumn SelectAll="@( selectionMode == GridSelectionMode.Single ? false : true )" Title="Select" Width="70px" />
44+
<TelerikGridColumn Field=@nameof(Employee.Name) />
45+
<TelerikGridColumn Field=@nameof(Employee.Team) Title="Team" />
46+
</TelerikGridColumns>
47+
</TelerikGrid>
48+
49+
@code {
50+
public List<Employee> GridData { get; set; }
51+
52+
GridSelectionMode selectionMode = GridSelectionMode.Single;
53+
54+
protected override void OnInitialized()
55+
{
56+
GridData = new List<Employee>();
57+
for (int i = 0; i < 15; i++)
58+
{
59+
GridData.Add(new Employee()
60+
{
61+
EmployeeId = i,
62+
Name = "Employee " + i.ToString(),
63+
Team = "Team " + i % 3
64+
});
65+
}
66+
}
67+
68+
public class Employee
69+
{
70+
public int EmployeeId { get; set; }
71+
public string Name { get; set; }
72+
public string Team { get; set; }
73+
}
74+
}
75+
````
76+
77+
78+
>note In [Incell EditMode]({%slug components/grid/editing/incell%}) selection can be applied only via a checkbox column. This is required due to the overlapping action that triggers selection and incell editing.
79+
80+
81+
## See Also
82+
83+
* [Live Demo: Grid Selection](https://demos.telerik.com/blazor-ui/grid/selection)
84+
* [Live Demo: Grid Checkbox Selection](https://demos.telerik.com/blazor-ui/grid/checkbox-selection)
85+
* [Single Selection]({%slug components/grid/selection/single%}})
86+
* [Multiple Selection]({%slug components/grid/selection/multiple%}})
87+

0 commit comments

Comments
 (0)