OData Group Lazy-Loading

The ODataCollectionView supports group lazy loading to improve performance when working with large datasets. With group lazy loading enabled, the collection initially loads only top-level groups and retrieves child records when a group is expanded.

This approach helps:

Reduce the initial data load
Improve rendering performance
Optimize data retrieval for large grouped datasets

Configure Group Lazy Loading

To enable group lazy loading:

Set the groupOnServer property to true
Set the groupLazyLoading property to true
Define one or more GroupDescription objects

This example demonstrates how to enable groupLazyLoading.

  <c1-flex-grid id="ODataGroupLazyLoading" is-read-only="true" allow-add-new="false" allow-delete="false" style="height:400px" loaded-rows="oDataGroupLazyLoaded">
      <c1-odata-source service-url="https://demodata.mescius.io/adventureworks/odata/v1/"
                       table-name="SalesOrderHeaders"
                       group-on-server="true"
                       group-lazy-loading="true">
          <c1-property-group-description property-name="AccountNumber"></c1-property-group-description>
      </c1-odata-source>
      <c1-flex-grid-column binding="AccountNumber" header="Account Number" is-visible="@false"></c1-flex-grid-column>
      <c1-flex-grid-column binding="PurchaseOrderNumber" header="Purchase Order Number"></c1-flex-grid-column>
      <c1-flex-grid-column binding="SalesOrderNumber" header="Sales Order Number"></c1-flex-grid-column>
      <c1-flex-grid-column binding="SubTotal" header="Sub Total"></c1-flex-grid-column>
      <c1-flex-grid-column binding="TaxAmt" header="Tax Amount"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Freight" header="Freight"></c1-flex-grid-column>
      <c1-flex-grid-column binding="TotalDue" header="Total Due"></c1-flex-grid-column>
      <c1-flex-grid-column binding="ModifiedDate" header="Modified Date"></c1-flex-grid-column>
      <c1-flex-grid-filter default-filter-type="Both"></c1-flex-grid-filter>
  </c1-flex-grid>