Rank 2
Iron
Iron
Iron
I am trying to detect whether the rows in a spreadsheet have been changed. Thus far I haven't been able to get the dirty or isDirty flag to work with the dataSource that I am binding to the spreadSheet control.
Here is my dataSource:
$("#spreadsheet").kendoSpreadsheet({
columns: 20,
rows: 200,
toolbar: true,
sheetsbar: true,
dataSource: dataSource,
width: "100%"
});
Button control:
I click this button to check for dirty rows in the dataSouce:
//render and initialize button:
$("#save-sheet-btn").kendoButton({
icon: "forward",
themeColor: "primary",
click: saveSheet
});Button:
the saveSheet function mapped to the click option looks like this:
function saveSheet() {
var currSpreadSheet = $("#spreadsheet").data("kendoSpreadsheet");
var data = dataSource.data();
var dirtyItems = $.grep(dataSource.view(), function (e) {
return e.dirty === true;
});
console.log("Modified rows:", dirtyItems);
};
I am trying to avoid sending back the entire sheet structure or data source when I want to save the spreadsheet contents, as the dataSource in the real program could get very large (1000 + records)..and only send back the rows that have been edited... that is why I am trying to detect them copy them to a smaller structure and send them in a request body (HTML POST).
How I have been testing it:
(1) Page loads, initializing in a jQuery: $(document).ready(function () {}) block.
(2) Change a cell value.
(3) Click the save button
(4) View the onclick function consol.log(...) and look within the array for any indication that the row dirty flag has been tripped.
Thus far the array is empty.... so what am I missing? I am not using any of the transport options, and maybe I should? also I usually have to grab the data from a .NET Web API... and the response comes back in the form of a JSON array similar to the below Dojo page.
As you can see the initialization of the spreadSheet, dataSource and button in this example is pretty bare bones... I only like to initialize kendo ui widgets/components with the bare minimum I have to. So. there are options missing. My full example code is located here:
UPDATED:
Spreadsheet |Save If Dirty | Kendo UI Dojo (telerik.com)
Thanks again for your help and patience!
George
1 Answer, 1 is accepted
Hello, George,
The example you shared appears to be empty, but I managed to assemble a small example based on the provided code snippets. The only change I made was in the code below regarding how to reach the dataSource:
function saveSheet() {
var currSpreadSheet = $("#spreadsheet").data("kendoSpreadsheet");
var data = currSpreadSheet.options.sheets[0].dataSource.data();
var dirtyItems = $.grep(currSpreadSheet.options.sheets[0].dataSource.view(), function (e) {
return e.dirty === true;
});
console.log("Modified rows:", dirtyItems);
};Now the dirtyItems array contains all the modified items. Here's a small example for reference.
Let me know if that would be helpful.
Regards,
Martin
Progress Telerik
Rank 2
Iron
Iron
Iron
Martin,
Hi I tried this:
https://dojo.telerik.com/@georgeg@pipkins.com/uNatajEy/5
... and I got an error:
I haven't looked at your example yet.... more to come I guess. :)
Thanks sooo much for your help and patience, ^___^
George
Hi George,
Another option that you can try for retrieveing the sheet information is using the activeSheet method:
function saveSheet() {
var currSpreadSheet = $("#spreadsheet").data("kendoSpreadsheet");
var data = currSpreadSheet.activeSheet().dataSource.data();
var dirtyItems = $.grep(currSpreadSheet.activeSheet().dataSource.view(), function (e) {
return e.dirty === true;
});
};Regards,
Neli
Hi,
One thing I think I need, per the documentation on dataSources... is for my dataSource to look like this:
dataSource = new kendo.data.DataSource({ data: rowData, schema: { model: { id: "Id", fields: { Id: { type: "number" }, Name: { type: "string" }, Time_Zone: { type: "string" }, Start_Date:{ type: "string" }, End_Date: { type: "string" }, Calls_Offered: { type: "number" }, Unprocessed_Calls_Offered: { type: "number" }, Calls_Handled: { type: "number" }, Busy: { type: "number" }, Abandons: { type: "number" }, Unprocessed_Abandons: { type: "number" } } } } });The key idea here is you need to have a model and then you have to identify an Id.... so that the "dirty" flag stuff can work and identify the rows in the dataSource that have been changed....the way I understand it, basically, without going too deep into the weeds is you need that Id for the dirty flag mechanism to work... probably not explaining it that well but... you do need the model with the Id... and definitely if you are going to use the whole transport thing like in Martin's example.
In addition, from what I see as far as spreadsheet examples... the spreadsheet widget or component needs to have the dataSource inside the sheets? I think? Maybe?
$("#spreadsheet").kendoSpreadsheet({ columns: 20, rows: 200, toolbar: true, sheetsbar: true, sheets: [{name: "Test Sheet 1", dataSource: dataSource}], //Need to define sheets property/option. width: "100%", autoSync: true, change: function(e){ console.log("Changed!: "+ JSON.stringify(e)); e.dirty = true; } });I will need to do this in my real code for sure since I will have multiple sheets.
Prior to changing the spreadsheet code, I was getting this error with Martin's code example (see Answer below) when I just defined the dataSource outside of the sheets property...( so sheets, then your sheet and within that sheet the dataSource) as seen in my question above:
So, what helped me:
(1): Define a schema, and within that a model, and within that model identify or define an Idproperty or parameter.
(2): Define the dataSource in the sheet's property of the spreadSheet, or else the spreadSheet control has a problem finding the sheets array.
--George