Refresh datasource from remote source while using WebApiAdaptor in offline mode

[Victor]

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-mode

But using the javascript plattform.

Thanks!

[Mohammed Farook J]

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]

Thank you very much for your quick support.

You guys rock!

[Sujith Kumar Rajkumar]

Hi Victor, 

We are glad to hear that. Please get back to us if you require any further assistance. 

Regards, 

Sujith R