Update Data Source for Spread Sheet

[kuldeep]

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

[Shanmugaraja K]

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. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/128595/ze/Sample-1295449931  

Documentation:  https://help.syncfusion.com/api/js/ejspreadsheet#methods:updaterange  

 

Regards, 

Shanmugaraja K 

[kuldeep]

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 !

[Silambarasan I]

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, 

https://www.syncfusion.com/downloads/support/forum/128595/ze/Sample_Modified892441826 

 

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