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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Update Data Source for Spread Sheet

Thread ID:

Created:

Updated:

Platform:

Replies:

128595 Jan 31,2017 11:32 AM UTC Feb 2,2017 10:35 AM UTC JavaScript 3
loading
Tags: ejSpreadSheet
kuldeep
Asked On January 31, 2017 11:32 AM UTC

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 [Syncfusion]
Replied On 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 


kuldeep
Replied On 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 !




Silambarasan I [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;