Added new kb article grid-popup-in-cell

[kendo-bot]

No description provided.

[dimodi]

Consider a solution without duplicate popup instances in each cell. For example the Popover can achieve this. If you use a GridCommandColumn, you will get the data item in the Button's click handler automatically.

<TelerikGrid Data="@GridData"
             TItem="@SampleModel"
             Pageable="true"
             Sortable="true"
             FilterMode="GridFilterMode.FilterRow">
    <GridColumns>
        <GridCommandColumn>
            @{
                var dataItem = (SampleModel)context;
            }
            <GridCommandButton Id="@( $"button{dataItem.Id}" )" Icon="@SvgIcon.DocumentManager"
                               OnClick="@OnPopupShowButtonClick" />
        </GridCommandColumn>
        <GridColumn Field="@nameof(SampleModel.Price)" />
        <GridColumn Field="@nameof(SampleModel.Quantity)" />
    </GridColumns>
</TelerikGrid>

<TelerikPopover @ref="@PopoverRef"
                AnchorSelector="@PopoverAnchorSelector"
                Position="@PopoverPosition.Right"
                Offset="20"
                Width="240px"
                Height="140px">
    <PopoverHeader>
        Popover for @ModelInPopup?.Name
    </PopoverHeader>
    <PopoverContent>
        <div style="padding:2em;">
            <TelerikButton OnClick="@( () => PopoverRef?.Hide() )">Hide</TelerikButton>
        </div>
    </PopoverContent>
</TelerikPopover>

@code {
    private List<SampleModel> GridData { 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()
            {
                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; }
    }
}

[dimodi]

You can leave this example too, but warn about potential performance issues with a large number of rendered rows.

[dimodi]

Suggested change

	tags: grid, blazor, popup, cell
	tags: blazor, grid, popup, template

[dimodi]

Consider a little more detailed steps with links to each applicable feature or component.

• Grid column template
• Popup / Popover Overview

[dimodi]

merge-to-production no longer makes a difference, because third-party actions are disabled. Create a new PR for the production branch once this one is merged, or ping me to cherry-pick manually.

[github-actions]

Hello @dimodi,

Check the below option if you would like to automatically generate PR to production. The automation uses the branch for the cherry-pick, and then will delete the branch. Please, do not delete it manually.

• create PR to production