For SVG rendering the <Virtualize> is not useful

[Naganathan]

We created a simple sample using tag but the content will not be rendered if we used a virtualize for SVG rendering.

In the following code example, we have rendered the employee details by using normal HTML and SVG within Tag.

@using Microsoft.AspNetCore.Components.Web.Virtualization;
<p>
    Employee details
</p>
@if (employees.Count > 0)
{
    <Virtualize Context="employee" Items="@employees">
        <text>
            @employee.Name
        </text>
    </Virtualize>
}
<svg id="canvas_layer" width="1000px" height="1000px" xmlns="http://www.w3.org/2000/svg">
    <g>
        @if (employees.Count > 0)
        {
            <Virtualize Context="employee" Items="@employees">
                <text>
                    @employee.Name
                </text>
            </Virtualize>
        }
    </g>
</svg>

@code{

    List<Employee> employees = new List<Employee>();

    protected override void OnInitialized()
    {
        base.OnInitialized();

        for (int i = 0; i < 10; i++)
        {
            Employee emp = new Employee() { Name = i.ToString() };
            employees.Add(emp);
        }
    }

    public class Employee
    {
        public string Name { get; set; }
    }
}

By Default, the blazer will be rendered the <div> elements if we using <Virtualize> tag. So if we use svg rendering for the Virualize, the div element will be rendered with the svg element wrongly, and also the necessary data (i.e. employee details) will not be rendered on page.

[mkArtakMSFT]

Thanks for contacting us. This is not a scenario the Virtualize component supports. In fact the underlying reason is w3c/IntersectionObserver#223