Skip to content

Commit 97ecb34

Browse files
svdimitrmarin-bratanov
svdimitr
and
marin-bratanov
authored
Added documentation for Row click and double click events (#87)
* chore(grid): Updated events article to contain row click and double click events * chore(grid): updates on the events article to contain row click and double click events * chore(grid): row click events minor improvements * chore(grid): restored pagechanged event documentation * chore(grid): updates on the events article * chore(grid); added load on demand example for the RowClickEvent * chore(grid): updated selection overview article to include that async operations should be handled in the row click events * chore(grid): minor improvements on row click event Co-authored-by: Marin Bratanov <[email protected]>
1 parent f7bb009 commit 97ecb34

File tree

4 files changed

+157
-0
lines changed

4 files changed

+157
-0
lines changed

‎components/grid/events.md‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ This article explains the events available in the Telerik Grid for Blazor. They
1717
* [Other Events](#other-events) - other events the grid provides
1818
* [Command Button Click](#command-button-click)
1919
* [SelectedItemsChanged](#selecteditemschanged)
20+
* [OnRowClick](#onrowclick)
21+
* [OnRowDoubleClick](#onrowdoubleclick)
2022
* [PageChanged](#pagechanged)
2123

2224
## CUD Events
@@ -42,6 +44,153 @@ The command buttons of a grid provide an `OnClick` event before firing their bui
4244

4345
Fires when the item selection is enabled and the user changes the selected [item]({%slug components/grid/selection/single%}#selecteditemschanged-event) or [items]({%slug components/grid/selection/multiple%}#selecteditemschanged-event).
4446

47+
### OnRowClick
48+
49+
The `OnRowClick` event fires as a response to the user clicking on a row of the Grid. Clicking on the `GridCommandButton`, select row `CheckBox`, expanding a `Detail Template` or when the row is in `edit/insert mode` will not trigger the event.
50+
51+
The event handler receives a `GridRowClickEventArgs` object which provides the model of the clicked row in the `Item` field that you can cast to your model type.
52+
53+
>caption Use the OnRowClick event to load data on demand based on the clicked row
54+
55+
````CSHTML
56+
@* Use the OnRowClick event to load data on demand based on the clicked row *@
57+
58+
<TelerikGrid Data="@MyData"
59+
Height="400px"
60+
Width="700px"
61+
Pageable="true"
62+
OnRowClick="@OnRowClickHandler">
63+
<GridColumns>
64+
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
65+
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
66+
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
67+
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
68+
</GridColumns>
69+
</TelerikGrid>
70+
71+
@if (ProjectData.Any())
72+
{
73+
<br />
74+
<TelerikGrid Data="@ProjectData" AutoGenerateColumns="true"
75+
Pageable="true" PageSize="4" Width="700px">
76+
</TelerikGrid>
77+
}
78+
79+
@code {
80+
public List<ProjectModel> ProjectData { get; set; } = new List<ProjectModel>();
81+
82+
async Task OnRowClickHandler(GridRowClickEventArgs args)
83+
{
84+
var item = args.Item as SampleData;
85+
86+
ProjectData = await GetProjectData(item.Id);
87+
}
88+
89+
async Task<List<ProjectModel>> GetProjectData(int id)
90+
{
91+
ProjectData = new List<ProjectModel>()
92+
{
93+
new ProjectModel()
94+
{
95+
ProjectManagerId = id,
96+
ProjectName = $"Project name {id}",
97+
DueDate = DateTime.Today.AddDays(-id),
98+
isActive = id % 2 == 0 ? true : false
99+
}
100+
};
101+
return await Task.FromResult(ProjectData);
102+
}
103+
104+
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
105+
{
106+
Id = x,
107+
Name = "name " + x,
108+
Team = "team " + x % 5,
109+
HireDate = DateTime.Now.AddDays(-x).Date
110+
});
111+
112+
public class SampleData
113+
{
114+
public int Id { get; set; }
115+
public string Name { get; set; }
116+
public string Team { get; set; }
117+
public DateTime HireDate { get; set; }
118+
}
119+
120+
public class ProjectModel
121+
{
122+
public int ProjectManagerId { get; set; }
123+
public string ProjectName { get; set; }
124+
public DateTime DueDate { get; set; }
125+
public bool isActive { get; set; }
126+
}
127+
}
128+
````
129+
130+
>caption The result from the code snippet above
131+
132+
![OnRowClick example](images/onrowclick-example.gif)
133+
134+
### OnRowDoubleClick
135+
136+
The `OnRowDoubleClick` event fires as a response to the user double clicking on a row of the Grid. Clicking on the `GridCommandButton`, select row `CheckBox`, expanding a `Detail Template` or when the row is in `edit/insert mode` will not trigger the event.
137+
138+
The event handler receives a `GridRowClickEventArgs` object which provides the model of the clicked row in the `Item` field that you can cast to your model type
139+
140+
>caption Use the OnRowDoubleClick event to receive information on the clicked row
141+
142+
````CSHTML
143+
144+
@* Use the OnRowDoubleClick event to receive information on the row the user clicked on *@
145+
146+
<TelerikGrid Data="@MyData"
147+
Height="400px"
148+
Width="700px"
149+
Pageable="true"
150+
OnRowDoubleClick="@OnRowDoubleClickHandler">
151+
<GridColumns>
152+
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
153+
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
154+
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
155+
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
156+
</GridColumns>
157+
</TelerikGrid>
158+
159+
@if (!String.IsNullOrEmpty(logger))
160+
{
161+
<div>
162+
@logger
163+
</div>
164+
}
165+
166+
@code {
167+
string logger = String.Empty;
168+
169+
void OnRowDoubleClickHandler(GridRowClickEventArgs args)
170+
{
171+
var item = args.Item as SampleData;
172+
173+
logger = $"Double clicked on {item.Name}";
174+
}
175+
176+
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
177+
{
178+
Id = x,
179+
Name = "name " + x,
180+
Team = "team " + x % 5,
181+
HireDate = DateTime.Now.AddDays(-x).Date
182+
});
183+
184+
public class SampleData
185+
{
186+
public int Id { get; set; }
187+
public string Name { get; set; }
188+
public string Team { get; set; }
189+
public DateTime HireDate { get; set; }
190+
}
191+
}
192+
````
193+
45194
### PageChanged
46195

47196
The event fires when the user pages the grid.

‎components/grid/images/onrowclick-example.gif‎

71 KB
Loading

‎components/grid/selection/overview.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ In this article:
1919
* [Notes](#notes)
2020
* [Editing Modes](#editing-modes)
2121
* [Selection in Template](#selection-in-template)
22+
* [Asynchronous Operations](#asynchronous-operations)
2223
* [Handle Data Changes](#handle-data-changes)
2324

2425

@@ -119,6 +120,10 @@ When using the Grid [Template](https://docs.telerik.com/blazor-ui/components/gri
119120

120121
If you are using the [Row Template]({%slug components/grid/features/templates%}#row-template), the grid cannot render selection checkboxes for you, so you have to bind them yourself to a field in the model, and handle their selection changed event to populate the `SelectedItems` collection of the grid. You can find an example to get started in the following thread: [Grid Row Template with Selection - Unsure how to Bind to Selected Item](https://feedback.telerik.com/blazor/1463819-grid-row-template-with-selection-unsure-how-to-bind-to-selected-item)
121122

123+
### Asynchronous Operations
124+
125+
Asynchronous operations such as loading data on demand should be handled in the [`OnRowClick`]({%slug grid-events%}#onrowclick) or [`OnRowDoubleClick`]({%slug grid-events%}#onrowdoubleclick) events rather than in the [`SelectedItemsChanged`]({%slug grid-events%}#selecteditemschanged).
126+
122127
### Handle Data Changes
123128

124129
When the grid `Data` collection changes, the `SelectedItems` collection has the following behavior:

‎components/grid/selection/single.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@ You can respond to the user action of selecting a new item through the `Selected
103103

104104
The example below shows how to handle the `SelectedItemsChanged` event to extract information about the selected item and use it to populate a second grid with details about the selected record.
105105

106+
>tip If you want to load that data on demand, you should use the [OnRowClick event]({%slug grid-events%}#onrowclick).
107+
106108
>caption Single Selection and handling the SelectedItemsChanged event
107109
108110
````CSHTML
@@ -145,6 +147,7 @@ The example below shows how to handle the `SelectedItemsChanged` event to extrac
145147
SelectedItems = new List<Employee> { SelectedEmployee };
146148
147149
GetChildGridData(); // note: an async operation here can break the selection and may not even render its results in the view
150+
// for async operations, use the OnRowClick event
148151
}
149152
150153
void GetChildGridData()

0 commit comments

Comments
 (0)