How to elegantly refire the DataManager in offline mode

[Feifan]

Hi team,

Is there a way to resend the request to a different url in Datamanager with the Offline="true"? As the url attribute of the Datamanager would be changed by some user interaction.

Regards

[Renjith Singh Rajendran]

Hi Feifan, 

Thanks for contacting Syncfusion support. 

We suggest you to bind a property for the Url property of EjsDataManager. And modify this property value dynamically based on your scenario. And also we suggest you to call the Refresh() method of Grid to refresh the current Url changes to Grid. In the below code, in a button click event we have changed the property value for Url and called the Refresh() method. Please refer the code example below, 

 

<EjsButton @onclick="ChangeURL">Change Url</EjsButton> 

<EjsGrid @ref="Grid" TValue="Order" AllowPaging="true"> 

    <EjsDataManager Url="@URL" Adaptor="Adaptors.ODataV4Adaptor"></EjsDataManager> 

</EjsGrid> 

 

@code{ 

    EjsGrid<Order> Grid; 

    public string URL = "https://services.odata.org/V4/Northwind/Northwind.svc/Orders/"; 

    public void ChangeURL() 

    { 

        URL = "https://services.odata.org/V4/Northwind/Northwind.svc/Employees/";     //Change the property value for Url 

        this.Grid.Refresh();                  //Call the Refresh() method to reflect the changes 

    } 

    public class Order 

    { 

        public int? EmployeeID { get; set; } 

    } 

} 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Feifan]

Sorry Renjith, 

The sample code didn't work

you see, my datamanager is set with an WebApiAdaptor and offline mode. In that case, the DataManager won't request for the data source again even though the url has been changed.

Attachment: DatamanagerSample_e3a59bf3.zip

[Renjith Singh Rajendran]

Hi Feifan, 

We have prepared a sample based on this requirement. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Changeurl877834120 

 

When Offline property is enabled in EjsDataManager, only one time(at initial Grid rendering) the post/request will be sent to the server and fetch all the Data from server. And after that all the DataOperations will be performed in Grid locally(no post/request will be made to server).  

To achieve this default behavior of Offline property without using the Offline property, we suggest you to render the EjsDataManger component outside the Grid, and when the Url property of EjsDataMnager is changed we will fetch the entire data from the server by using the ExceuteQuery method of EjsdataManger and bind the data to the DataSource property of Grid. Please refer the code example below for more details, 

 

<EjsButton OnClick="@ChangeUrl">Change Url</EjsButton> 

 

<EjsDataManager @ref="DataManager" Url="@URL" Adaptor="Syncfusion.EJ2.Blazor.Adaptors.WebApiAdaptor"></EjsDataManager>          @*Render EjsdataManager outside Grid*@ 

 

<EjsGrid @ref="Grid" DataSource="DataSource" TValue="Order" AllowPaging="true">             @*Bind the data to Grid using DataSource property*@ 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Year" AutoFit="true" TextAlign="TextAlign.Left"> </GridColumn> 

    </GridColumns> 

</EjsGrid> 

 

@code{ 

    EjsDataManager DataManager; 

    EjsGrid<Order> Grid; 

    public string URL = "https://ej2services.syncfusion.com/production/web-services/api/Employees"; 

    public IEnumerable<Order> DataSource { get; set; } = new List<Order>(); 

    public bool toggle = false; 

    protected override async Task OnAfterRenderAsync(bool firstRender) 

    { 

        if (firstRender || toggle) 

        { 

            object data = await DataManager.ExecuteQuery<Order>(new Query());             //Fetch the data from the online api service 

            DataSource = (data as IEnumerable).Cast<Order>().ToList();                   //Assign the data to DataSource property 

            toggle = false; 

            StateHasChanged(); 

        } 

    } 

    public class Order 

    { 

        public int? EmployeeID { get; set; } 

    } 

    public async void ChangeUrl() 

    { 

        URL = "https://ej2services.syncfusion.com/production/web-services/api/Orders";              //Change the Url value. 

        toggle = true; 

    } 

}  

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.