diff --git a/components/grid/events.md b/components/grid/events.md index f7e2f27005..e34b52f297 100644 --- a/components/grid/events.md +++ b/components/grid/events.md @@ -17,6 +17,8 @@ This article explains the events available in the Telerik Grid for Blazor. They * [Other Events](#other-events) - other events the grid provides * [Command Button Click](#command-button-click) * [SelectedItemsChanged](#selecteditemschanged) + * [OnRowClick](#onrowclick) + * [OnRowDoubleClick](#onrowdoubleclick) * [PageChanged](#pagechanged) ## CUD Events @@ -42,6 +44,153 @@ The command buttons of a grid provide an `OnClick` event before firing their bui 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). +### OnRowClick + +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. + +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. + +>caption Use the OnRowClick event to load data on demand based on the clicked row + +````CSHTML +@* Use the OnRowClick event to load data on demand based on the clicked row *@ + + + + + + + + + + +@if (ProjectData.Any()) +{ +
+ + +} + +@code { + public List ProjectData { get; set; } = new List(); + + async Task OnRowClickHandler(GridRowClickEventArgs args) + { + var item = args.Item as SampleData; + + ProjectData = await GetProjectData(item.Id); + } + + async Task> GetProjectData(int id) + { + ProjectData = new List() + { + new ProjectModel() + { + ProjectManagerId = id, + ProjectName = $"Project name {id}", + DueDate = DateTime.Today.AddDays(-id), + isActive = id % 2 == 0 ? true : false + } + }; + 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 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; } + } +} +```` + +>caption The result from the code snippet above + +![OnRowClick example](images/onrowclick-example.gif) + +### OnRowDoubleClick + +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. + +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 + +>caption Use the OnRowDoubleClick event to receive information on the clicked row + +````CSHTML + +@* Use the OnRowDoubleClick event to receive information on the row the user clicked on *@ + + + + + + + + + + +@if (!String.IsNullOrEmpty(logger)) +{ +
+ @logger +
+} + +@code { + string logger = String.Empty; + + void OnRowDoubleClickHandler(GridRowClickEventArgs args) + { + var item = args.Item as SampleData; + + logger = $"Double clicked on {item.Name}"; + } + + 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 int Id { get; set; } + public string Name { get; set; } + public string Team { get; set; } + public DateTime HireDate { get; set; } + } +} +```` + ### PageChanged The event fires when the user pages the grid. diff --git a/components/grid/images/onrowclick-example.gif b/components/grid/images/onrowclick-example.gif new file mode 100644 index 0000000000..cc14c707c4 Binary files /dev/null and b/components/grid/images/onrowclick-example.gif differ diff --git a/components/grid/selection/overview.md b/components/grid/selection/overview.md index 77fb3158fc..5ed84fff24 100644 --- a/components/grid/selection/overview.md +++ b/components/grid/selection/overview.md @@ -19,6 +19,7 @@ In this article: * [Notes](#notes) * [Editing Modes](#editing-modes) * [Selection in Template](#selection-in-template) + * [Asynchronous Operations](#asynchronous-operations) * [Handle Data Changes](#handle-data-changes) @@ -119,6 +120,10 @@ When using the Grid [Template](https://docs.telerik.com/blazor-ui/components/gri 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) +### Asynchronous Operations + +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). + ### Handle Data Changes When the grid `Data` collection changes, the `SelectedItems` collection has the following behavior: diff --git a/components/grid/selection/single.md b/components/grid/selection/single.md index 88978a9f52..33667fc71d 100644 --- a/components/grid/selection/single.md +++ b/components/grid/selection/single.md @@ -103,6 +103,8 @@ You can respond to the user action of selecting a new item through the `Selected 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. +>tip If you want to load that data on demand, you should use the [OnRowClick event]({%slug grid-events%}#onrowclick). + >caption Single Selection and handling the SelectedItemsChanged event ````CSHTML @@ -145,6 +147,7 @@ The example below shows how to handle the `SelectedItemsChanged` event to extrac SelectedItems = new List { SelectedEmployee }; GetChildGridData(); // note: an async operation here can break the selection and may not even render its results in the view + // for async operations, use the OnRowClick event } void GetChildGridData()