1. Home
  2. Forum
  3. jQuery
  4. Update Data Source for Spread Sheet

Update Data Source for Spread Sheet

Hello,

Method First:

I load 100 record in spread sheet now I update data source and add 50 records with following query

$("#Spreadsheet").ejSpreadsheet("getDataSettings", 1)[0].dataSource.push(jData);

 $("#Spreadsheet").ejSpreadsheet("refreshSpreadsheet");

Data source update but 150 records not show on spread sheet.


Method Second:

 var xlObj = $("#Spreadsheet").data("ejSpreadsheet");

 var settings = [{ dataSource: response, showHeader: false, startCell: "A101" }];   //(Add 50 record after 100 record)

 xlObj.updateRange(1, settings);

 $("#Spreadsheet").ejSpreadsheet("refreshSpreadsheet");

but they show garbage value.


Please suggest proper format for update data source and show in sync fusion grid.


Thanks





3 Replies
SK Shanmugaraja K Syncfusion Team February 1, 2017 05:11 AM UTC

Hi Kuldeep, 
 
Thanks for using Syncfusion products, 
 
We have checked your provided code examples. You can use “updateRange()” method to update the date source in the specified range. Please refer the below code examples, 
 
[JS] 
 
 
     var dataSource = [ 
                  //.. 
            ]; 
 
            $("#Spreadsheet").ejSpreadsheet({ 
                loadComplete: function (args) { 
                    var xlObj = this, settings; 
                    settings = { dataSource: dataSource, showHeader: false, startCell: "A1" }; 
                    // To update range of cells with the specified settings 
                    xlObj.updateRange(1, settings); // 1 => Sheet Index 
                } 
            }); 
 
 
For your convenience we have prepared simple sample and attached below, please refer the below sample and documentation link for more details. 
 
 
Regards, 
Shanmugaraja K 


KU kuldeep February 1, 2017 07:02 AM UTC

Thanks Shanmugaraja but it's not work:-

Explanation in Detail:-

Step 1: I load data in spread seat using following method:- 

                     $("#Spreadsheet").ejSpreadsheet({
                         sheets: [{rangeSettings: [{ dataSource: response, startCell: "A1", showHeader: true }], }], /*response contain  100 records*/
                         allowCharting: true,
                         allowConditionalFormats: true,
                         fieldAsColumnHeader: true,
                         allowSearching: true,
                         loadComplete: function () { /*alert('hello');*/ },
                         printSettings: { allowPrinting: true }
                     });

Step 2: After 10 second Time interval event fire and send 50 record (now total record is 150) when i update ejSpreadsheet then they not show 150 records they show only 100 records.

I use your code but they not fire loadComplete method as per my understanding it happens because ejSpreadsheet  initialize and loaded in first step .

Please Help !




SI Silambarasan I Syncfusion Team February 2, 2017 10:35 AM UTC

Hi Kuldeep, 
 
Thanks for your update. 
 
We have checked your requirement (“To update dataSource in an interval of 10seconds after rendered ejSpreadsheet”) and it has been achieved.  Please refer the following code example. 
 
 
<div id="Spreadsheet"></div> 
 
 
<script type="text/javascript"> 
var intervalId, response = [], newDataSource = []; 
 
//Datasource for inital binding 
for (var i = 1; i <= 100; i++) 
    response.push({ ProductID: "Item" + i, ProductName: "PName" + i, ... UnitsInStock: (10 * i) }); 
 
//Datasource for updating range after 10 seconds 
for (var i = 101; i <= 150; i++) 
    newDataSource.push({ ProductID: "Item" + i, ProductName: "PName" + i, ... UnitsInStock: (10 * i) }); 
 
 
$(function () { 
    $("#Spreadsheet").ejSpreadsheet({ 
        sheets: [{ rangeSettings: [{ dataSource: response, startCell: "A1", showHeader: true }], }], /*response contain  100 records*/ 
        //... 
    }); 
 
    intervalId = setInterval(updateNewRecords, 10000); 
}); 
 
updateNewRecords = function () { 
    var xlObj = $("#Spreadsheet").data("ejSpreadsheet"); 
 
    settings = { dataSource: newDataSource, showHeader: false, startCell: "A102" }; 
 
    // To update range of cells with the specified settings  
    xlObj.updateRange(1, settings); // 1 => Sheet Index 
 
    xlObj.refreshSpreadsheet(); 
    //Clear the interval timer 
    clearInterval(intervalId); 
} 
 
</script> 
 
 
 
For your convenience, we have modified the given sample in our last update and the same can be downloaded from the below link, 
 
Could you please check the above sample and get back to us if we misunderstood your requirement so that we can analyze based on your scenario and provide you better solution quickly?  The information provided would be a great help for us to proceed further. 
 
Regards, 
Silambarasan 


Loader.
Up arrow icon