diff --git a/_contentTemplates/common/click-events.md b/_contentTemplates/common/click-events.md index 8915992144..3bd57bdc5f 100644 --- a/_contentTemplates/common/click-events.md +++ b/_contentTemplates/common/click-events.md @@ -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: diff --git a/components/grid/events.md b/components/grid/events.md index 8d698fc090..44c1e4194c 100644 --- a/components/grid/events.md +++ b/components/grid/events.md @@ -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 - - + - - - - + + + + -@if (ProjectData.Any()) -{ -
- - -} +

@( (MarkupString)RowEventLog )

@code { - // enable single row selection to showcase the clicked row to the user. Not mandatory - public IEnumerable SelectedItems { get; set; } = Enumerable.Empty(); + private List GridData { get; set; } = new(); - // data that will be loaded on demand for the next components - another grid in this sample - public List ProjectData { get; set; } = new List(); + 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 = $@"OnRowClick event fired for {userAction} on + row {dataItem.Id} and column {columnField}"; } - async Task> 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() + 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 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) @@ -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 *@ - - + - - - - + + + + -@if (!String.IsNullOrEmpty(logger)) -{ -
- @logger -
-} +

@( (MarkupString)RowEventLog )

@code { - string logger = String.Empty; + private List 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 = $@"OnRowDoubleClick event fired for + row {dataItem.Id} and column {columnField}"; } - public IEnumerable 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; } } } ```` @@ -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) *@ - - + - - - - + + + + -
- -@logger +

@( (MarkupString)RowEventLog )

@code { - void OnRowContextMenuHandler(GridRowClickEventArgs args) - { - SampleData model = args.Item as SampleData; + private List 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 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 = $@"OnRowContextMenu event fired for {userAction} on + row {dataItem.Id} and column {columnField}"; + } + 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; } } } ```` diff --git a/components/grid/images/onrowclick-example.gif b/components/grid/images/onrowclick-example.gif deleted file mode 100644 index cc14c707c4..0000000000 Binary files a/components/grid/images/onrowclick-example.gif and /dev/null differ diff --git a/components/treelist/events.md b/components/treelist/events.md index bdfc4680b2..9076550eb9 100644 --- a/components/treelist/events.md +++ b/components/treelist/events.md @@ -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 Data { get; set; } @@ -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 Data { get; set; } @@ -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 Data { get; set; }