Working in Offline Mode in Blazor DataManager Component

14 Aug 20231 minute to read

On binding data through remote services, request will be sent to the server-side for every query. To avoid post back to server, you can set the SfDataManager to load all the data on initialization itself and make the query processing in client-side. This behavior can be enabled by using Offline property of the SfDataManager.

The following sample code demonstrates enabling offline mode for the SfDataManager which is bound with the DataGrid component,

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Grids

<SfGrid TValue="EmployeeData" ID="Grid" AllowPaging="true">
  <SfDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" Adaptor="Adaptors.ODataAdaptor" Offline="true"></SfDataManager>
  <GridColumns>
    <GridColumn Field=@nameof(EmployeeData.OrderID) TextAlign="TextAlign.Center" HeaderText="Order ID" Width="120"></GridColumn>
    <GridColumn Field=@nameof(EmployeeData.CustomerID) TextAlign="TextAlign.Center" HeaderText="Customer Name" Width="130"></GridColumn>
    <GridColumn Field=@nameof(EmployeeData.EmployeeID) TextAlign="TextAlign.Center" HeaderText="Employee ID" Width="120"></GridColumn>
  </GridColumns>
</SfGrid>

@code{
  public class EmployeeData
  {
    public int OrderID { get; set; }
    public string CustomerID { get; set; }
    public int EmployeeID { get; set; }
  }
}

NOTE

Return the complete list from server-side when using Offline property.