Search results

Virtual Scrolling

Allows to load the large amounts of data without any performance degradation by rendering rows and columns only in the current content viewport. Rest of the aggregated data will be brought into viewport dynamically based on vertical or horizontal scroll position. This feature can be enabled by setting the EnableVirtualization property in EjsPivotView class to true.

LIMITATION: In virtual scrolling, the column width should be in pixel and percentage value is not accepted.

    @using Syncfusion.EJ2.Blazor.PivotView

    <EjsPivotView TValue="ProductDetails" Width="800" Height="300" EnableVirtualization="true">
        <PivotViewDataSourceSettings DataSource="@data">
            <PivotViewColumns>
                <PivotViewColumn Name="Year"></PivotViewColumn>
                <PivotViewColumn Name="Quarter"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Country"></PivotViewRow>
                <PivotViewRow Name="Products"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
                <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
            </PivotViewValues>
            <PivotViewFormatSettings>
                <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
            </PivotViewFormatSettings>
        </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public List<ProductDetails> data { get; set; }
        protected override void OnInitialized()
        {
            this.data = ProductDetails.GetProductData().ToList();
           //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
        }
    }

output

Limitations for virtual scrolling

  • In virtual scrolling, the columnWidth property in gridSettings should be in pixel and percentage values are not accepted.
  • Resizing columns, setting width to individual columns which affects the calculation used to pick the correct page on scrolling.
  • Grouping, which takes additional time to splitting the raw items into the provided format.
  • Date Formatting, which takes additional time to convert date format.
  • Date Formatting with sorting, here additionally full date time format should be framed to perform sorting along with the provided date format which lags the performance.