Skip to content

Commit 67b0bfb

Browse files
committed
chore(treelist): add rowcontextmenu documentation
1 parent eb6fc08 commit 67b0bfb

File tree

1 file changed

+122
-0
lines changed

1 file changed

+122
-0
lines changed

components/treelist/events.md

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ This article explains the events available in the Telerik TreeList for Blazor. T
2020
* [OnModelInit](#onmodelinit)
2121
* [OnRowClick](#onrowclick)
2222
* [OnRowDoubleClick](#onrowdoubleclick)
23+
* [OnRowContextMenu](#onrowcontextmenu)
2324
* [OnRowRender](#onrowrender)
2425
* [OnRowDrop](#onrowdrop)
2526
* [PageChanged](#pagechanged)
@@ -1165,6 +1166,127 @@ The `OnRowDoubleClick` event fires before selection happens.
11651166
}
11661167
````
11671168

1169+
### OnRowContextMenu
1170+
1171+
The `OnRowContextMenu` event fires as a response to the user right clicking action on a row of the TreeList, the context menu keyboard button or long-touch for mobile devices. The event does not fire when clicking on:
1172+
* `TreeListCommandButton`
1173+
* row selection checkbox
1174+
* expand/collapse button
1175+
* row in edit mode
1176+
1177+
The event handler receives a `TreeListRowClickEventArgs` object. It provides the model of the clicked row in the `Item` field that you can cast to your model type.
1178+
1179+
@[template](/_contentTemplates/common/event-arguments.md#rowclick-args)
1180+
1181+
The `OnRowContextMenu` event can be used to integrate a ContextMenu to the row.
1182+
1183+
@[template](/_contentTemplates/common/general-info.md#rerender-after-event)
1184+
1185+
````CSHTML
1186+
@* Get the row model from a context menu action (right click/long tap) *@
1187+
1188+
<TelerikTreeList Data="@Data"
1189+
IdField="Id"
1190+
ParentIdField="ParentId"
1191+
Pageable="true"
1192+
Width="850px"
1193+
Height="400px"
1194+
OnRowContextMenu="@OnRowContextMenuHandler">
1195+
<TreeListColumns>
1196+
<TreeListColumn Field="Name" Expandable="true" Width="320px" />
1197+
<TreeListColumn Field="Id" Width="120px" />
1198+
<TreeListColumn Field="ParentId" Width="120px" />
1199+
<TreeListColumn Field="EmailAddress" Width="120px" />
1200+
<TreeListColumn Field="HireDate" Width="220px" />
1201+
</TreeListColumns>
1202+
</TelerikTreeList>
1203+
1204+
<br />
1205+
1206+
@logger
1207+
1208+
@code {
1209+
public string logger { get; set; } = String.Empty;
1210+
1211+
private void OnRowContextMenuHandler(TreeListRowClickEventArgs args)
1212+
{
1213+
var clickedRow = args.Item as Employee;
1214+
1215+
logger = $"OnRowContextMenu event fired from right clicking on {clickedRow.Name}";
1216+
1217+
@[template](/_contentTemplates/common/event-arguments.md#rowclick-args-example)
1218+
}
1219+
1220+
public List<Employee> Data { get; set; }
1221+
1222+
protected override async Task OnInitializedAsync()
1223+
{
1224+
Data = await GetTreeListData();
1225+
}
1226+
1227+
// sample model
1228+
1229+
public class Employee
1230+
{
1231+
// denote the parent-child relationship between items
1232+
public int Id { get; set; }
1233+
public int? ParentId { get; set; }
1234+
1235+
// custom data fields for display
1236+
public string Name { get; set; }
1237+
public string EmailAddress { get; set; }
1238+
public DateTime HireDate { get; set; }
1239+
}
1240+
1241+
// data generation
1242+
1243+
async Task<List<Employee>> GetTreeListData()
1244+
{
1245+
List<Employee> data = new List<Employee>();
1246+
1247+
for (int i = 1; i < 15; i++)
1248+
{
1249+
data.Add(new Employee
1250+
{
1251+
Id = i,
1252+
ParentId = null, // indicates a root-level item
1253+
Name = $"root: {i}",
1254+
EmailAddress = $"{i}@example.com",
1255+
HireDate = DateTime.Now.AddYears(-i)
1256+
}); ;
1257+
1258+
for (int j = 1; j < 4; j++)
1259+
{
1260+
int currId = i * 100 + j;
1261+
data.Add(new Employee
1262+
{
1263+
Id = currId,
1264+
ParentId = i,
1265+
Name = $"first level child {j} of {i}",
1266+
EmailAddress = $"{currId}@example.com",
1267+
HireDate = DateTime.Now.AddDays(-currId)
1268+
});
1269+
1270+
for (int k = 1; k < 3; k++)
1271+
{
1272+
int nestedId = currId * 1000 + k;
1273+
data.Add(new Employee
1274+
{
1275+
Id = nestedId,
1276+
ParentId = currId,
1277+
Name = $"second level child {k} of {i} and {currId}",
1278+
EmailAddress = $"{nestedId}@example.com",
1279+
HireDate = DateTime.Now.AddMinutes(-nestedId)
1280+
}); ;
1281+
}
1282+
}
1283+
}
1284+
1285+
return await Task.FromResult(data);
1286+
}
1287+
}
1288+
````
1289+
11681290
### OnRowRender
11691291

11701292
This event fires upon the rendering of the TreeList rows. It receives an argument of type `TreeListRowRenderEventArgs` which exposes the following fields:

0 commit comments

Comments
 (0)