1. Home
  2. Forum
  3. jQuery
  4. what is the right way to capture changes back to original data source?

what is the right way to capture changes back to original data source?

I am new to Syncfusion.

I am trying to get the right mental model for how to react to changes in the Spreadsheet control.
I am building a single page app using EmberJS.
I have local copy of data that I can provide to Spreadsheet control.
I have a couple of questions:
how do I react to user edits to the data and update the data source (Ember Model)? 
Do I write a custom DataManager or Adaptor and manage data updates there, or do I use the edit/change events from the Spreadsheet?

Can I set the column widths before I load the data?
Can I show the spreadsheet with the Ribbon initally collapsed?
Can I limit the number of rows and columns?

thanks,
Mark


4 Replies
SK Shanmugaraja K Syncfusion Team December 6, 2017 12:58 PM UTC

Hi Mark, 
 
Thanks for using Syncfusion products, 
 
Query 1: Can I set the column widths before I load the data? 
 
We suggest you to use columnWidth property to change the default column width. Or you can use “setWidthToColumns” method to achieve this requirement. 
 
Query 2: Can I show the spreadsheet with the Ribbon initially collapsed? 
 
We suggest you to use collapse() method in ribbon instance in load complete client side event.  
 
Query 3: Can I limit the number of rows and columns? 
 
We suggest you to use rowCount and columnCount property to achieve this requirement. Also, we suggest you to set scrollMode as normal.  
 
Query 4: how do I react to user edits to the data and update the data source (Ember Model)? do I use the edit/change events from the Spreadsheet? 
 
In our Spreadsheet, we have a client side event that to trigger after save the cell. You can use the “cellSave” and update the edited data into the Ember Model. 
 
Please refer the below code example for above details, 
 
[application.js] 
 
 
model() { 
        return{   
             scrollSettings: { 
                height: "530", 
                scrollMode:"normal" 
            }, 
            sheets: [{ 
                rangeSettings: [{ dataSource: window.dataColl, startCell: "A1" }] 
            }], 
            loadComplete: function() { 
                var xlFormat = this.XLFormat; 
                if (!this.isImport) { 
                    this.setWidthToColumns([140, 128, 105, 100, 100, 110, 120]);    
                    xlFormat.format({ "style": { "font-weight": "bold" } }, "A1:H1"); 
                    xlFormat.format({ "type": "currency" }, "E2:H11"); 
                    $("#Spreadsheet_Ribbon").data("ejRibbon").collapse(); 
                    this.XLRibbon.updateRibbonIcons(); 
                } 
            }, 
            cellSave: function(args){ 
                console.log(args); 
            } 
        } 
} 
 
[application.hbs] 
 
 
<div class="content-container-fluid"> 
    <div class="row"> 
        <div class="cols-sample-area"> 
            {{ej-spreadsheet id="Spreadsheet" e-scrollSettings=model.scrollSettings e-allowFormulaBar=model.allowFormulaBar e-columnWidth = 100 e-rowCount=20 e-columnCount = 10 e-sheets=model.sheets e-loadComplete=model.loadComplete e-cellSave=model.cellSave  }} 
        </div> 
    </div> 
</div> 
{{outlet}} 
 
 
Please check the above details and get back to us if you need further assistance. 
 
Regards, 
Shanmugaraja K 


ML Mark Lummus December 6, 2017 06:33 PM UTC

Thanks Shanmugaraja.

regarding limiting number of rows and columns, I am expecting something more like how the ejGrid works. When I set the row count and column count, it did not change the behavior in any way. I may not have set the scroll mode correctly and will need to try that.

regarding cellSave, are you suggesting that the DataManager only supports a one way transfer of data from my data source (Ember Model) into the spreadsheet natively and that I must use spreadsheet events to push data changes back into my data source? I tried creating a data manager with a customer adaptor, but the update method was never invoked.

I would prefer to put the update logic in a data manager or customer adaptor. If the logic only works in the cellSave event, then I will put it there. I just need to know so that I can have the right mental model for how updates work.


Mark



ML Mark Lummus December 6, 2017 06:53 PM UTC

Ok, so I changed the scrollMode to "normal" and the row/column count works like I wanted.

This may be a bug: there is odd behavior with dropdownlist cell types. When I collapse the ribbon or resize my browser window, my custom cell types that are defined as drop down lists lose their drop down capabilities and become text fields.

thanks,
Mark

Attachment: sfribboncaptures_a46ed7a6.zip

SK Shanmugaraja K Syncfusion Team December 12, 2017 11:27 AM UTC

Hi Mark, 
 
Thanks for your update, 
 
Query 1: I would prefer to put the update logic in a data manager or customer adaptor. 
 
We have created simple sample with the custom adaptor in Spreadsheet. In this sample, we have loaded Ember data by using data manager with custom adaptor. And you can save the edited data by using the cellSave client side event. Please refer the sample and client side events API  documentation below. 
 
Query 2: My custom cell types that are defined as drop down lists lose their drop-down capabilities and become text fields 
 
We have checked your reported issue and we are not able to reproduce the issue in our end. The dropdown list working properly while collapse and resize the browser window. Please try the below attached sample and check whether you able to reproduce the same issue in that sample. If not please replicate the same issue in this sample and get back to us with that sample with more information. 
 
 
Regards, 
Shanmugaraja K 


Loader.
Up arrow icon