Changing Datasource & Refresh the data of a grid

[John Stephen Mangam]

Hi,

Could you please let me know how I could change the datasource URL on a click of a button to another urlAdaptor?

Also, could you please let me know how I could refresh a grid so that it fetches from the server?

Thanks,

John

[Pavithra Subramaniyam]

Hi John, 

 

Thanks for contacting Syncfusion support. 

 

You can change the data url and refresh the Grid component by simple changing the Grid dataSource property inside the button click event. Please refer to the below code example and documentation link for more information. 

 

[index.cshtml] 

<ejs-button id="change" content="change"></ejs-button> 

 

<ejs-grid id="DataGrid" allowPaging="true"> 

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" crossdomain="true"></e-data-manager> 

    <e-grid-pagesettings pageSize="10"></e-grid-pagesettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" width="80"></e-grid-column> 

        .  .   

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

 

    document.getElementById("change").addEventListener("click",(e)=>{ 

        var grid = document.getElementById("DataGrid").ej2_instances[0]; 

        //changing the dataSoure will automatically refresh the Grid 

        grid.dataSource = new ej.data.DataManager({ 

            url: "Home/NewData", 

            adaptor:new ej.data.UrlAdaptor() 

        }); 

    }) 

 

    </script> 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/data/adaptors/#url-adaptor  

 

Please get back to us if you need further assistance. 

  

Regards              

Pavithra S.