This is a migrated thread and some comments may be shown as answers.

Preserve EDITED data.

1 Answer 70 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Michael asked on 11 Oct 2013, 03:36 PM

I have a page with multiple buttons and multiple Kendo grids populated by lists inside a model object. Some of the buttons on the page end up refreshing the page (but preserving the current state of the model) before anything gets saved to the database. The issue is that the Kendo grids use incell editing and any changes made are lost upon page refresh because the grids are populated with the initial data from the model object once again. It seems the Kendo grids do not make changes to the model. I want to preserve any changes made on the grid so that the user can eventually save to the database. Is this possible? Can the Kendo grid make changes to the model object so that the changes will persist when the page is refreshed?

------------------------------------------------------------------------------------

This is the javascript used to create the Kendo grid:

-------------------------------------------------------------------------------------

$(document)
.ready(
function() {

var savedGrid = JSON.parse($.cookie("distancesGrid"));

var grid = $("#distancesTable")
.kendoGrid(
{
sortable : true,
dataSource : {
autoSync: true,

schema : {
model : {
fields : {

bloodCenterId : {
type : "number",
editable : false
},

miles : {
type : "number",
validation : {
required : true
}
},

// additional fields omitted...
}
}
}
},

editable : "incell",

navigatable : true ,

columns : [

{
field : "bloodCenterId",
title : "bloodCenterId",
hidden : true,
},

{
field : "miles",
title : "Miles",
width : "15%"
},

// additional columns omitted...

{
command : [ {
name : "deleteDistance",
text : "Delete Distance",
click : function(e) {

var tr = $(e.target).closest("tr"); // get

var data = this.dataItem(tr);

deleteDistanceClicked(data.bloodCenterId);
}
} ]
}
],
}).data("kendoGrid");
});

function deleteDistanceClicked(bloodCenterId)
{
vertScrollPos.value = $(document).scrollTop();

document.getElementById('hiddenDeleteDistanceBloodCenterId').value = bloodCenterId;

leavePageDialog = false;

$('#viewForm').attr('action', 'deleteDistance.htm');
$('#viewForm').submit();
}

---------------------------------------------------------------------------------------------

And this is the table definition in the .jsp file:

---------------------------------------------------------------------------------------------

<table id="distancesTable" class="table table-bordered"style="clear: both;">
<tbody>
<c:forEach items="${locationModel.distancesList}" var="distance">
<tr>
<td>${distance.distanceId}</td>
<td>${distance.bloodCenter.bloodCenterId}</td>
<td>${distance.location.locationId}</td>
<td>${distance.bloodCenter.name}</td>
<td>${distance.miles}</td>
<td>${distance.minutes}</td>
<td></td>
</tr>
</c:forEach>
</tbody>
</table>

Preserve EDITED data.

1 Answer, 1 is accepted