We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Changing Datasource & Refresh the data of a grid

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

1 Reply

PS Pavithra Subramaniyam Syncfusion Team April 4, 2019 06:28 AM UTC

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> 
 
 
Please get back to us if you need further assistance. 
  
Regards              
Pavithra S. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon