Skip to content

docs(Grid): Simplify and show args.Field in Grid row event examples #2788

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 26, 2025
Merged

docs(Grid): Simplify and show args.Field in Grid row event examples #2788

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7384e0
docs(Grid): Simplify and show args.Field in Grid row event examples
dimodi Feb 24, 2025
5194cb8
Add missing lines in TreeList examples
dimodi Feb 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions _contentTemplates/common/click-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,6 @@ The event *does not fire* when the user:

#end

#rowclick-args-example

if (args.EventArgs is KeyboardEventArgs keyboardEventArgs)
{
Console.WriteLine($"The user pressed {keyboardEventArgs.Key} on row {model.Name} and column {args.Field}.");
}
else if (args.EventArgs is MouseEventArgs mouseEventArgs)
{
Console.WriteLine($"The user clicked {mouseEventArgs.ClientX} {mouseEventArgs.ClientY} on row {model.Name} and column {args.Field}.");
}

#end

#rowcontextmenu

The `OnRowContextMenu` event fires when the user:
Expand Down
229 changes: 97 additions & 132 deletions components/grid/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,98 +491,61 @@ The `OnRowClick` event handler receives a `GridRowClickEventArgs` argument, whic

@[template](/_contentTemplates/common/click-events.md#clickeventargs)

>caption Use the OnRowClick event to load data on demand based on the clicked row
>caption Using the Grid OnRowClick event

````RAZOR
@* Use the OnRowClick event to load data on demand based on the clicked row *@

There is a deliberate delay in the data loading to showcase the async nature of the event

<TelerikGrid Data="@MyData"
Height="400px"
Width="700px"
Pageable="true"
OnRowClick="@OnRowClickHandler"
SelectionMode="@GridSelectionMode.Single"
@bind-SelectedItems="@SelectedItems">
<TelerikGrid Data="@GridData"
OnRowClick="@OnGridRowClick"
Navigable="true">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
<GridColumn Field="@nameof(Product.Id)" />
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.Price)" />
<GridColumn Field="@nameof(Product.Quantity)" />
</GridColumns>
</TelerikGrid>

@if (ProjectData.Any())
{
<br />
<TelerikGrid Data="@ProjectData" AutoGenerateColumns="true"
Pageable="true" PageSize="4" Width="700px">
</TelerikGrid>
}
<p style="margin-top:1em;font-size:1.5em">@( (MarkupString)RowEventLog )</p>

@code {
// enable single row selection to showcase the clicked row to the user. Not mandatory
public IEnumerable<SampleData> SelectedItems { get; set; } = Enumerable.Empty<SampleData>();
private List<Product> GridData { get; set; } = new();

// data that will be loaded on demand for the next components - another grid in this sample
public List<ProjectModel> ProjectData { get; set; } = new List<ProjectModel>();
private string RowEventLog { get; set; } = "Click a Grid cell or hit Enter while it's focused...";

async Task OnRowClickHandler(GridRowClickEventArgs args)
private void OnGridRowClick(GridRowClickEventArgs args)
{
var model = args.Item as SampleData;
var dataItem = (Product)args.Item;
string columnField = args.Field;
string userAction = args.EventArgs is KeyboardEventArgs ? "key press" : "click";

ProjectData = await GetProjectData(model.Id);
@[template](/_contentTemplates/common/click-events.md#rowclick-args-example)
RowEventLog = $@"<code>OnRowClick</code> event fired for <strong>{userAction}</strong> on
row <strong>{dataItem.Id}</strong> and column <strong>{columnField}</strong>";
}

async Task<List<ProjectModel>> GetProjectData(int id)
protected override void OnInitialized()
{
await Task.Delay(500); // simulate loading data from a service, remove from a real app

ProjectData = new List<ProjectModel>()
for (int i = 1; i <= 5; i++)
{
new ProjectModel()
{
ProjectManagerId = id,
ProjectName = $"Project name {id}",
DueDate = DateTime.Today.AddDays(-id),
isActive = id % 2 == 0 ? true : false
GridData.Add(new Product()
{
Id = i,
Name = $"Name {i}",
Price = Random.Shared.Next(1, 100) * 1.23m,
Quantity = Random.Shared.Next(0, 1000)
});
}
};
return await Task.FromResult(ProjectData);
}

public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
{
Id = x,
Name = "name " + x,
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
});

public class SampleData
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}

public class ProjectModel
{
public int ProjectManagerId { get; set; }
public string ProjectName { get; set; }
public DateTime DueDate { get; set; }
public bool isActive { get; set; }
public string Name { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
}
}
````

>caption The result from the code snippet above

![OnRowClick example](images/onrowclick-example.gif)

## OnRowDoubleClick

@[template](/_contentTemplates/common/click-events.md#rowdoubleclick)
Expand All @@ -591,57 +554,55 @@ The `OnRowDoubleClick` event handler receives a `GridRowClickEventArgs` argument

@[template](/_contentTemplates/common/click-events.md#clickeventargs)

>caption Use the OnRowDoubleClick event to receive information on the clicked row
>caption Using the Grid OnRowDoubleClick event

````RAZOR
@* Use the OnRowDoubleClick event to receive information on the row the user clicked on *@

<TelerikGrid Data="@MyData"
Height="400px"
Width="700px"
Pageable="true"
OnRowDoubleClick="@OnRowDoubleClickHandler">
<TelerikGrid Data="@GridData"
OnRowDoubleClick="@OnGridRowDoubleClick">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
<GridColumn Field="@nameof(Product.Id)" />
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.Price)" />
<GridColumn Field="@nameof(Product.Quantity)" />
</GridColumns>
</TelerikGrid>

@if (!String.IsNullOrEmpty(logger))
{
<div>
@logger
</div>
}
<p style="margin-top:1em;font-size:1.5em">@( (MarkupString)RowEventLog )</p>

@code {
string logger = String.Empty;
private List<Product> GridData { get; set; } = new();

void OnRowDoubleClickHandler(GridRowClickEventArgs args)
private string RowEventLog { get; set; } = "Double-click a Grid cell...";

private void OnGridRowDoubleClick(GridRowClickEventArgs args)
{
var model = args.Item as SampleData;
var dataItem = (Product)args.Item;
string columnField = args.Field;

logger = $"Double clicked on {model.Name}";
@[template](/_contentTemplates/common/click-events.md#rowclick-args-example)

RowEventLog = $@"<code>OnRowDoubleClick</code> event fired for
row <strong>{dataItem.Id}</strong> and column <strong>{columnField}</strong>";
}

public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
protected override void OnInitialized()
{
Id = x,
Name = "name " + x,
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
});
for (int i = 1; i <= 5; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Name {i}",
Price = Random.Shared.Next(1, 100) * 1.23m,
Quantity = Random.Shared.Next(0, 1000)
});
}
}

public class SampleData
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
public string Name { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
}
}
````
Expand All @@ -654,53 +615,57 @@ The `OnRowContextMenu` event handler receives a `GridRowClickEventArgs` argument

@[template](/_contentTemplates/common/click-events.md#clickeventargs)

>caption Use the Grid OnRowContextMenu event and get the data model
>caption Using the Grid OnRowContextMenu event

````RAZOR
@* Get the row model from a context menu action (right click/long tap) *@

<TelerikGrid Data="@MyData"
Pageable="true"
PageSize="6"
OnRowContextMenu="@OnRowContextMenuHandler">
<TelerikGrid Data="@GridData"
OnRowContextMenu="@OnGridRowContextMenu"
Navigable="true">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
<GridColumn Field="@nameof(Product.Id)" />
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.Price)" />
<GridColumn Field="@nameof(Product.Quantity)" />
</GridColumns>
</TelerikGrid>

<br />

@logger
<p style="margin-top:1em;font-size:1.5em">@( (MarkupString)RowEventLog )</p>

@code {
void OnRowContextMenuHandler(GridRowClickEventArgs args)
{
SampleData model = args.Item as SampleData;
private List<Product> GridData { get; set; } = new();

logger = $"OnRowContextMenu event fired from right clicking on {model.Name}";
@[template](/_contentTemplates/common/click-events.md#rowclick-args-example)
}
private string RowEventLog { get; set; } = "Right-click a Grid cell or hit the context menu key while it's focused...";

public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
private void OnGridRowContextMenu(GridRowClickEventArgs args)
{
Id = x,
Name = "name " + x,
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
});
var dataItem = (Product)args.Item;
string columnField = args.Field;
string userAction = args.EventArgs is KeyboardEventArgs ? "key press" : "click";

public string logger { get; set; } = String.Empty;
RowEventLog = $@"<code>OnRowContextMenu</code> event fired for <strong>{userAction}</strong> on
row <strong>{dataItem.Id}</strong> and column <strong>{columnField}</strong>";
}

protected override void OnInitialized()
{
for (int i = 1; i <= 5; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Name {i}",
Price = Random.Shared.Next(1, 100) * 1.23m,
Quantity = Random.Shared.Next(0, 1000)
});
}
}

public class SampleData
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
public string Name { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
}
}
````
Expand Down
Binary file removed components/grid/images/onrowclick-example.gif
View file
Open in desktop
Binary file not shown.
10 changes: 6 additions & 4 deletions components/treelist/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -987,7 +987,8 @@ The `OnRowClick` event handler receives a `TreeListRowClickEventArgs` argument,
@code {
private void OnRowClickHander(TreeListRowClickEventArgs args)
{
var clickedRow = args.Item as Employee;
var clickedRow = (Employee)args.Item;
string columnField = args.Field;
}

public List<Employee> Data { get; set; }
Expand Down Expand Up @@ -1089,7 +1090,8 @@ The `OnRowDoubleClick` event handler receives a `TreeListRowClickEventArgs` argu
@code {
private void OnRowDoubleClickHander(TreeListRowClickEventArgs args)
{
var clickedRow = args.Item as Employee;
var clickedRow = (Employee)args.Item;
string columnField = args.Field;
}

public List<Employee> Data { get; set; }
Expand Down Expand Up @@ -1200,9 +1202,9 @@ The `OnRowContextMenu` event handler receives a `TreeListRowClickEventArgs` argu

private void OnRowContextMenuHandler(TreeListRowClickEventArgs args)
{
var clickedRow = args.Item as Employee;
var clickedRow = (Employee)args.Item;

logger = $"OnRowContextMenu event fired from right clicking on {clickedRow.Name}";
logger = $"OnRowContextMenu event fired from right clicking on row {clickedRow.Name} and column {args.Field}";
}

public List<Employee> Data { get; set; }
Expand Down
Loading