enabling virtualization causing items loaded onscroll becomming invisible

[jose KJ]

if i dont add EnableVirtualization="true" page take too much time to load, when i add it loads quickly but after little scroll, no rows are visible but i can scroll... please guide me thanks

<SfMediaQuery @bind-ActiveBreakpoint="activeBreakpoint"></SfMediaQuery>

@{

    var renderingMode = RowDirection.Horizontal;

    if (activeBreakpoint == "Small")

    {

        renderingMode = RowDirection.Vertical;

    }

}

<section id="main" class="@(activeBreakpoint != "Small" ? "wrapper" : "")">

    <div class="inner">

        <div class="content">

            <div class="row align-items-center">

                <div class="col-auto">

                    <h4 class="main-header">Medical Conditions</h4>

                </div>

                <div class="col">

                    <button @onclick='(() => OpenUploadCSVDialog())' class="btn btn-link @(isCSVUploadModalOpen ? "main-header" : "")">

                        Upload csv

                    </button>

                </div>

                <div class="col-auto">

                    <button @onclick='(() => OpenEditModal("Add"))' class="btn btn-link @(isModalOpen ? "main-header" : "")">

                        Add new

                    </button>

                </div>

            </div>

            <div style=" height:calc(100vh - 10rem);">

                <SfGrid @ref="Grid" DataSource="@medConditions" AllowSorting="true" AllowFiltering="true" AllowMultiSorting="true" EnableAdaptiveUI="true" RowRenderingMode="@renderingMode" Height="100%" Width="100%" AllowTextWrap="true" GridLines="GridLine.Default" EnableVirtualization="true">

                    <GridTextWrapSettings WrapMode=WrapMode.Both></GridTextWrapSettings>

                    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>

                    <GridColumns>

                        <GridColumn Field=@nameof(MedicalCondition.MedicalConditionID) HeaderText="Id" IsPrimaryKey="true" Width="80" AllowEditing="false"></GridColumn>

                        <GridColumn Field=@nameof(MedicalCondition.MedicalConditionName) HeaderText="Medical Condition Name" Width="120"></GridColumn>

                        <GridColumn Field=@nameof(MedicalCondition.IsActive) HeaderText="Is Active" Width="120" DisplayAsCheckBox="true" Type="Syncfusion.Blazor.Grids.ColumnType.Boolean"></GridColumn>

                        <GridColumn HeaderText="Manage Records" Width="150">

                            <Template Context="context">

                                @{

                                    var medCondition = context as MedicalCondition;

                                }

                                <button class="btn btn-edit" type="button" @onclick='(() => OpenEditModal("Edit", medCondition))'>

                                    <i class="fas fa-edit"></i>

                                </button>

                                <button class="btn btn-delete" type="button" @onclick="() => DeleteRecord(medCondition)">

                                    <i class="fas fa-trash-alt"></i>

                                </button>

                            </Template>

                        </GridColumn>

                    </GridColumns>

                    <GridSortSettings>

                        <GridSortColumns>

                            <GridSortColumn Field="MedicalConditionID" Direction="SortDirection.Descending"></GridSortColumn>

                        </GridSortColumns>

                    </GridSortSettings>

                    <SfSpinner @bind-Visible="@loading"> </SfSpinner>

                </SfGrid>

            </div>

        </div>

    </div>

    <SfDialog @ref="EditDialog" Width="500px" IsModal="true" ShowCloseIcon="true" @bind-Visible="isModalOpen"

              Header="@($"{FormType} Medical Condition")" OnClose="CloseEditModal">

        <DialogTemplates>

            <Content>

                <!-- Blazor EditForm inside Syncfusion SfDialog -->

                <EditForm Model="medCondition" OnValidSubmit="SaveChanges">

                    <DataAnnotationsValidator />

                    <div class="form-group">

                        <label>Medical Condition Name</label>

                        <InputText class="form-control" @bind-Value="medCondition.MedicalConditionName" />

                        <ValidationMessage For="@(() => medCondition.MedicalConditionName)" />

                    </div>

                    <div class="form-group">

                        <input class="form-check-input" type="checkbox" id="myCheckbox" @bind="@medCondition.IsActive" />

                        <label class="form-check-label" for="myCheckbox">

                            Is Active

                        </label>

                        <ValidationMessage For="@(() =>medCondition.IsActive)" />

                    </div>

                    <!-- Buttons for Save and Cancel -->

                    <button type="submit" disabled="@loading">Save</button>

                    <button type="button" @onclick="CloseEditModal">Cancel</button>

                </EditForm>

            </Content>

        </DialogTemplates>

    </SfDialog>

    <SfDialog @ref="UploadCSVDialog" Width="500px" IsModal="true" ShowCloseIcon="true" @bind-Visible="isCSVUploadModalOpen"

              Header="@($"Upload Medical Condition CSV file")" OnClose="CloseUploadCSVDialog">

        <DialogTemplates>

            <Content>Only new conditions will be saved to db!,Please ensure csv has following column: MedicalCondition

                <!-- Blazor EditForm inside Syncfusion SfDialog -->

                <EditForm Model="@fileUploadModel" OnValidSubmit="HandleCSVSubmit">

                    <DataAnnotationsValidator />

                    <div class="form-group">

                        <label for="fileUpload" class="form-label">Upload CSV</label>

                        @if (deviceType == "Web")

                        {

                            <InputFile id="fileUpload" class="form-control" OnChange="HandleFileChange" accept=".csv" />

                            <ValidationMessage For="@(() => fileUploadModel.FileName)" />

                        }

                        else

                        {

                            <button @onclick="PickFile" type="button">Choose a File</button>

                            @if (!string.IsNullOrEmpty(fileUploadModel.FileName))

                            {

                                <p>Selected File: @fileUploadModel.FileName</p>

                            }

                            <ValidationMessage For="@(() => fileUploadModel.FileName)" />

                        }

                    </div>

                    <!-- Buttons for Save and Cancel -->

                    <button type="submit" disabled="@loading">Save</button>

                    <button type="button" @onclick="CloseUploadCSVDialog">Cancel</button>

                </EditForm>

            </Content>

        </DialogTemplates>

    </SfDialog>

</section>

@code {

    private string activeBreakpoint { get; set; }

    private bool loading { get; set; } = true;

    private SfGrid<MedicalCondition> Grid;

    private MedicalCondition medCondition;

    public string[] ToolbarItems = new string[] { "Add", "Edit", "Delete", "Update", "Cancel" };

    private IList<MedicalCondition> medConditions = new List<MedicalCondition>();

    // private IList<Permissions> permissions = new List<Permissions>();

    private string deviceType = "Web";

    private bool showIdColumn = true;

    private bool isModalOpen = false;

    private bool isCSVUploadModalOpen = false;

    private SfDialog EditDialog;

    private SfDialog UploadCSVDialog;

    private string FormType = "Add";

    private FileUploadModel fileUploadModel = new();

    private IBrowserFile selectedFile;

    private FileResult? mobileSelectedFile;

}

<style>

    .e-virtualtable {

        position: static !important; /* Override the position */

        transform: none !important; /* Override the transform */

    }

    .e-virtualtable {

        position: static !important; /* Override the position */

        transform: none !important; /* Override the transform */

    }

    /* Ensure the grid container has a set height */

    .e-grid {

        height: 88vh; /* Adjust as needed */

        overflow: hidden; /* Hide overflow to apply custom scrolling */

    }

        /* Fixed header style */

        .e-grid .e-headercontent {

            position: sticky;

            top: 0;

            z-index: 1; /* Ensure it stays on top of other content */

        }

    ::deep .e-grid .e-altrow {

        background-color: #e3f2fd; /* Light blue color */

    }

    .col-md-3.col-lg-2.sidebar, .grid-container {

        background-color: whitesmoke; /* Set background to white */

        border-radius: 10px; /* Set border-radius */

    }

    ::deep .e-toolbar-item:has(.e-add) {

        padding-left: 10px;

        display: none;

    }

</style>

[jose KJ]

fixed by removing this

 .e-virtualtable {

        position: static !important; /* Override the position */

        transform: none !important; /* Override the transform */

    }

i added the above style to fix width issue in small screens[i had an issue like in small devices witdth of grid table was only 50% when only 2 columns were there]

[Prathap Senthil]

Hi jose KJ,

Based on the reported problem, it appears that you have overridden the grid's e-virtualtable class, which is causing this issue. We suggest removing the custom CSS changes to resolve the issue. Please refer to the code snippet and sample below for your reference.

Sample:https://blazorplayground.syncfusion.com/embed/LtLTWWifIWnEEUtM?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

    .e-virtualtable {

        position: static !important; /* Override the position */

        transform: none !important; /* Override the transform */

    }

 

Regards,
Prathap Senthil