From d6feddfb2bc8d1bb09e6e6e280b584f87954c69a Mon Sep 17 00:00:00 2001 From: KB Bot Date: Thu, 12 Jun 2025 12:19:26 +0000 Subject: [PATCH 1/2] Added new kb article grid-popup-in-cell --- knowledge-base/grid-popup-in-cell.md | 117 +++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 knowledge-base/grid-popup-in-cell.md diff --git a/knowledge-base/grid-popup-in-cell.md b/knowledge-base/grid-popup-in-cell.md new file mode 100644 index 000000000..845782e09 --- /dev/null +++ b/knowledge-base/grid-popup-in-cell.md @@ -0,0 +1,117 @@ +--- +title: How to Display a Popup in a Grid Cell +description: Learn how to display a popup beside an icon embedded in a cell of the Grid for Blazor. +type: how-to +page_title: How to Display Popup Next to Icon in Grid for Blazor +slug: grid-kb-popup-in-cell +tags: grid, blazor, popup, cell +res_type: kb +ticketid: 1689992, 1640846 +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +I want to display a Popup beside an icon embedded within a cell in the [Grid for Blazor](slug:grid-overview). The Popup should appear when the icon is clicked. + +## Solution + +To display a Popup within a grid cell: + +1. Define a dictionary to store references to all popups associated with the Grid items. This ensures that each Popup has a unique identifier tied to its corresponding item. + +2. Use the `AnchorSelector` parameter of the `TelerikPopup` component to dynamically associate each popup with its corresponding icon. Set the `AnchorSelector` to the unique ID of the icon element. + +Here is an example implementation: + +````RAZOR + + + + + + + + + + +@code { + private List GridData { get; set; } = new(); + private Dictionary PopupRefs { get; set; } = new(); + + protected override void OnInitialized() + { + var rnd = new Random(); + + for (int i = 1; i <= 7; i++) + { + GridData.Add(new SampleModel() + { + Id = i, + Name = $"Name {i}", + GroupName = $"Group {i % 3 + 1}", + Price = rnd.Next(1, 100) * 1.23m, + Quantity = rnd.Next(0, 1000), + StartDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)), + IsActive = i % 4 > 0 + }); + } + } + + public class SampleModel + { + public int Id { get; set; } + public int? ParentId { get; set; } + public string Name { get; set; } = string.Empty; + public string GroupName { get; set; } = string.Empty; + public decimal Price { get; set; } + public int Quantity { get; set; } + public object Icon { get; set; } = SvgIcon.File; + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public bool IsActive { get; set; } + } +} +```` + +## See Also + +* [Grid Overview Documentation](slug:grid-overview) +* [Popup Overview Documentation](slug:popup-overview) From 66f90900fad7f5f6899b5cd131416be4b2eba95b Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Tue, 17 Jun 2025 16:57:29 +0300 Subject: [PATCH 2/2] chore(Grid): add suggestions --- knowledge-base/grid-popup-in-cell.md | 80 ++++++++++++++++------------ 1 file changed, 45 insertions(+), 35 deletions(-) diff --git a/knowledge-base/grid-popup-in-cell.md b/knowledge-base/grid-popup-in-cell.md index 845782e09..709c9064a 100644 --- a/knowledge-base/grid-popup-in-cell.md +++ b/knowledge-base/grid-popup-in-cell.md @@ -4,7 +4,7 @@ description: Learn how to display a popup beside an icon embedded in a cell of t type: how-to page_title: How to Display Popup Next to Icon in Grid for Blazor slug: grid-kb-popup-in-cell -tags: grid, blazor, popup, cell +tags: blazor, grid, popup, template res_type: kb ticketid: 1689992, 1640846 --- @@ -22,15 +22,15 @@ ticketid: 1689992, 1640846 ## Description -I want to display a Popup beside an icon embedded within a cell in the [Grid for Blazor](slug:grid-overview). The Popup should appear when the icon is clicked. +I want to display a popup beside an icon embedded within a cell in the [Grid for Blazor](slug:grid-overview). The popup should appear when the icon is clicked. ## Solution -To display a Popup within a grid cell: +To display a popup within a Grid cell: -1. Define a dictionary to store references to all popups associated with the Grid items. This ensures that each Popup has a unique identifier tied to its corresponding item. +1. Add a button that triggers the popup for each row by using a `GridCommandColumn` or a column [`Template`](slug:grid-templates-column). -2. Use the `AnchorSelector` parameter of the `TelerikPopup` component to dynamically associate each popup with its corresponding icon. Set the `AnchorSelector` to the unique ID of the icon element. +2. Anchor the [`Popover`](slug:popover-overview) to the button via `AnchorSelector`. Here is an example implementation: @@ -41,45 +41,56 @@ Here is an example implementation: Sortable="true" FilterMode="GridFilterMode.FilterRow"> - - - + + @{ + var dataItem = (SampleModel)context; + } + + + + + Popover for @ModelInPopup?.Name + + +
+ Hide +
+ + + @code { private List GridData { get; set; } = new(); - private Dictionary PopupRefs { get; set; } = new(); + private TelerikPopover? PopoverRef { get; set; } + + private string PopoverAnchorSelector { get; set; } = "#button1"; + + private SampleModel? ModelInPopup { get; set; } + + private async Task OnPopupShowButtonClick(GridCommandEventArgs args) + { + ModelInPopup = (SampleModel)args.Item; + + PopoverRef?.Hide(); + PopoverAnchorSelector = $"#button{ModelInPopup.Id}"; + await Task.Delay(1); + + PopoverRef?.Show(); + } protected override void OnInitialized() { var rnd = new Random(); - for (int i = 1; i <= 7; i++) { GridData.Add(new SampleModel() @@ -94,7 +105,6 @@ Here is an example implementation: }); } } - public class SampleModel { public int Id { get; set; } @@ -114,4 +124,4 @@ Here is an example implementation: ## See Also * [Grid Overview Documentation](slug:grid-overview) -* [Popup Overview Documentation](slug:popup-overview) +* [Popover Overview Documentation](slug:popover-overview)