Refresh remote dataSource

Question

Hello!We are new to the spreadsheet component.  We have a remote dataSource and it displays the data correctly.  We just need to trigger a refresh on the spreadsheet to check for new data, but nothing we do will force that to happen.  What is the best way?Thank you!

Sangeetha Priya Murugan · Accepted Answer

Hi Mark, 
 
Thank you for your update. 
 
We have checked your reported issue based on your provided codes and we would let you know that, you have provided the e.result insead of e.result.result while assiging the data source property dynamically. The e.result returns the value based on the query. 
 




   
created: function(args) { 
    //Using this function doesn't show data on load in the spreadsheet 
 
    spreadsheet.cellFormat( 
      { fontWeight: "bold", textAlign: "center" }, 
      "A1:K1" 
    ); 
 
    new ej.data.DataManager({ 
      url: 
        "https://ej2services.syncfusion.com/production/web-services/api/Orders" 
    }) 
 
      .executeQuery(new ej.data.Query()) 
 
      .then(function(e) { 
        // console.log(e.result); //If you do e.result.result = undefined 
 
        //console shows an array of 45 items 
        spreadsheet.sheets[0].ranges[0].dataSource = e.result; 
 
        // console.log(spreadsheet.sheets[0].ranges[0].dataSource); 
 
        //console shows an array of 45 items BUT no results are shown 
      }); 
  } 
}); 
 
  new ej.data.DataManager({ 
    url: "https://ej2services.syncfusion.com/production/web-services/api/Orders" 
  }) 
 
    .executeQuery(new ej.data.Query().take(5)) 
 
    .then(function(e) { 
      spreadsheet.sheets[0].ranges[0].dataSource = e.result.result; // bind the modified records in the datasource property 
 
      // console.log(spreadsheet.sheets[0].ranges[0].dataSource); 
 
      //console shows an array of 5 records BUT the spreadsheet does not change what is shown 
    }); 
 
  //console.log("Out of DataManager"); 
} 
 
 
 
For your convenience, we have prepared the sample based on your codes in the latest version. Please find the link below. 
 
Sample Link: https://stackblitz.com/edit/t9kmnx?file=index.js  
 
Could you please check the above sample and get back to us, if you need any further assistance on this. 
 
Regards, 
Sangeetha M

Sangeetha Priya Murugan · Answer

Hi Mark, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your reported requirement and we are able to achieve by using the dataSource property as like as below.  
 




   
  function updateCollection() { 
  // To update the modified data in spreadsheet (For ex: bind only 10 records in spreadsheet) 
  new DataManager({ 
    url: "https://ej2services.syncfusion.com/production/web-services/api/Orders" 
  }) 
    .executeQuery(new Query().take(10)) 
    .then((e: ReturnOption) => { 
      spreadsheet.sheets[0].ranges[0].dataSource = e.result.result; // bind the modified records in the datasource property 
    }); 
} 
 
For your convenience, we have prepared the sample that request the data using the data manager request and bind the result in dataSource property for spreadsheet in a button click event. Please find the link below. 
 
Sample Link: https://stackblitz.com/edit/skx7c4?file=index.ts  
 
Could you please check the above details and get back to us, if you need any further assistance on this. 
 
Regards, 
Sangeetha M

Mark · Answer

Thank you, but we still have an issue.  The query gets executed, when we dump e.result.result to console, we see the new record that is supposed to show, but the spreadsheet still stays on the previous values.  The stackblitz works just like expected but for whatever reason, ours just won't change the values already displayed.  Any thoughts?

Sangeetha Priya Murugan · Answer

Hi Mark, 
 
Thank you for your update. 
 
We have checked your reported issue and before we proceed further, please share the below details to check the reported issue in our end. 
 
1. Please share the codes for dynamic updation of data source in your end. 
2. Share your control rendering and customization codes in your end. 
3. If possible please replicate your issue in our sample and send back to us. 
4. Essential studio product version. 
 
Could you please get back to us with the above details, based on that we will check and provide you a better solution quickly. 
 
Regards, 
Sangeetha M

Mark · Answer

Here is the code (malformed divs as they won't display properly in the forum):div id="spreadsheet">div id="customBtn" class="e-btn"> To refresh the data var spreadsheet_data = new ej.data.DataManager({                url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders',                }); var spreadsheet = new ej.spreadsheet.Spreadsheet({                sheets: [                                {                                                name: "Shipment Details",                                                ranges: [{ showFieldAsHeader: true, startCell: "A1",                                                //Shows at the spreadsheet load                                                //dataSource: spreadsheet_data //Using a linked dataManager results in values showing up on load in the spreadsheet                                }],                                                columns: [                                                                { width: 100 },                                                                { width: 130 },                                                                { width: 110 },                                                                { width: 100 },                                                                { width: 180 },                                                                { width: 100 },                                                                { width: 130 },                                                                { width: 150 },                                                                { width: 200 },                                                                { width: 180 },                                                                { width: 180 }                                                ]                                }                ],                created: function(args){                                //Using this function doesn't show data on load in the spreadsheet                                spreadsheet.cellFormat(                                                { fontWeight: "bold", textAlign: "center" }, "A1:K1"                                );                                new ej.data.DataManager({                                                url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders',                                })                                .executeQuery(new ej.data.Query())                                .then(function(e) {                                                // console.log(e.result); //If you do e.result.result = undefined                                                //console shows an array of 45 items                                                spreadsheet.sheets[0].ranges[0].dataSource = e.result;                                                // console.log(spreadsheet.sheets[0].ranges[0].dataSource);                                                //console shows an array of 45 items BUT no results are shown                                });                },});       spreadsheet.appendTo('#spreadsheet'); document                .getElementById("customBtn")                .addEventListener("click", updateCollection); function updateCollection() {                // To update the modified data in spreadsheet ( For ex: bind only 10 records in spreadsheet)                //console.log(spreadsheet.sheets[0].ranges[0].dataSource);                //console shows an array of 45 records                new ej.data.DataManager({                                url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders',                                })                                .executeQuery(new ej.data.Query().take(5))                                .then(function(e) {                                                spreadsheet.sheets[0].ranges[0].dataSource = e.result; // bind the modified records in the datasource property                                                // console.log(spreadsheet.sheets[0].ranges[0].dataSource);                                                //console shows an array of 5 records BUT the spreadsheet does not change what is shown                                });                //console.log("Out of DataManager");}Fresh Load of the page.After the Refresh button hit.Loaded with the Data Manager outside the created function call.Attachment: Pictures_ef41c003.7z

Mark · Answer

Thank you. We had implemented that and it STILL was not working, which got us to thinking why. Low and behold, we were using an outdated version. Updating to the newest on the CDN - works. We are working through getting the new version via our front office.

Thank you!

Sangeetha Priya Murugan · Answer

Hi Mark, 
 
Thank you for your update. As you have stated before please use our latest bersion and kindly get back to us, if you need any further assistance on this. 
 
Regards, 
Sangeetha M