Refresh datasource from remote source while using WebApiAdaptor in offline mode

Question

What would be the proper way to achieve resending the request to a different url in Datamanager 
with the Offline="true"?Basically the same as:https://www.syncfusion.com/forums/152060/how-to-elegantly-refire-the-datamanager-in-offline-modeBut using the javascript plattform.Thanks!

Mohammed Farook J · Accepted Answer

Hi Victor, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your requirement and you can achieved your requirement by the following way. Please find the code example and sample for your reference. 
 
 
. . . 
 
     
    let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; 
    let data: Object = new DataManager({ 
        url: hostUrl + 'api/orders', 
        adaptor: new WebApiAdaptor , 
        crossDomain: true, 
        offline: true 
    }); 
    let button: Button = new Button(); 
    button.appendTo('#btn') 
 
    let grid: Grid = new Grid( 
        { 
            dataSource: data, 
            allowPaging: true, 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', width: 130, textAlign: 'Right' }, 
                { field: 'CustomerID', headerText: 'Customer ID', width: 170 }, 
                { field: 'EmployeeID', headerText: 'Employee ID', width: 135, textAlign: 'Right' }, 
                { field: 'Freight', headerText: 'Freight', width: 160, textAlign: 'Right', format: 'C2' }, 
                { field: 'ShipCountry', headerText: 'Ship Country', width: 150, textAlign: 'Center' }, 
            ], 
            pageSettings: { pageCount: 3 } 
        }); 
    grid.appendTo('#Grid'); 
 
    button.element.onclick =(): void=>{ 
     let url:string; 
     let columns:Object[]; 
     if((grid.dataSource as any).dataSource.url.indexOf('orders')!== -1){ 
      url = 'https://ej2services.syncfusion.com/production/web-services/api/employees'; 
 
      columns= [ 
            { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 }, 
            { field: 'FirstName', headerText: 'Name', width: 120 }, 
            { field: 'Designation', headerText: 'Designation', width: 170 }, 
            { field: 'Country', headerText: 'Country', width: 120, textAlign: 'Right' } 
        ] 
 
     } 
     else{ 
      url = 'https://ej2services.syncfusion.com/production/web-services/api/orders'; 
      columns= [ 
                { field: 'OrderID', headerText: 'Order ID', width: 130, textAlign: 'Right' }, 
                { field: 'CustomerID', headerText: 'Customer ID', width: 170 }, 
                { field: 'EmployeeID', headerText: 'Employee ID', width: 135, textAlign: 'Right' }, 
                { field: 'Freight', headerText: 'Freight', width: 160, textAlign: 'Right', format: 'C2' }, 
                { field: 'ShipCountry', headerText: 'Ship Country', width: 150, textAlign: 'Center' }, 
            ] 
     } 
     grid.columns= []; // need to clear the column when dataSource changed 
     grid.columns = columns; // assign the new columns 
     // change dataSource with same adaptor 
     grid.dataSource= new DataManager({ 
        url: url, 
        adaptor: new WebApiAdaptor , 
        crossDomain: true, 
        offline: true 
    }); 
    } 
 
In the above code example , we have changed the Grid dataSource through button click. You need to reset the columns in the Grid  if the columns different the new dataSource. 
 
Sample : https://stackblitz.com/edit/hvxyjp?file=index.ts 
 
  
 
Regards, 
J Mohammed Farook

Victor · Answer

Thank you very much for your quick support.You guys rock!

Sujith Kumar Rajkumar · Answer

Hi Victor, 

We are glad to hear that. Please get back to us if you require any further assistance. 

Regards, 
Sujith R