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

set() not working on DataSource item in version 2016.1 112

7 Answers 629 Views

Data Source

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

Lily asked on 15 Feb 2016, 03:52 PM

I have a grid with remote datasorce. An I had jquery function called on specific event, which changed the grid data :

function approve(e) {
var grid = $("#grid").data("kendoGrid");
var tr = $(this).parents("tr");
var dataItem = grid.dataItem(tr);
if (dataItem != null) {
dataItem.set("Approved", true);
dataItem.set("ApprovalDate", new Date());
}
}

This function worked and updated the datasource and the data in the grid. After we upgraded to the version 2016.1 12, the code stopped working. I found the alternative which is working:

function approve(e) {
var grid = $("#grid").data("kendoGrid");
var tr = $(this).parents("tr");
var dataItem = grid.dataItem(tr);
if (dataItem != null) {
dataItem.Approved = true;
dataItem.ApprovalDate = new Date();

}
}
grid.refresh();
}

Why the old approach is not working anymore? It is a huge problem for us, because a lot of old code is broken. What is the correct way to update data in the grid programmatically?

7 Answers, 1 is accepted

answered on 16 Feb 2016, 06:21 PM

This is the code: <div id="grid"></div>
<script type="text/javascript">




$(document).ready(function () {
var model = kendo.data.Model.define({
id: "DocId",
fields: {
DocId: { type: "number" },
Approved: { type: "boolean", editable: false },
ApprovalDate: { type: "datetime", editable: false }

}

});
var datasource = new kendo.data.DataSource({

batch: true,

schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: model
}
});
var array = [
{ "DocId": 1, "Approved": false, "ApprovalDate": null },
{ "DocId": 2, "Approved": false, "ApprovalDate": null },
{ "DocId": 3, "Approved": false, "ApprovalDate": null }
];
datasource.data(array);

$("#grid").kendoGrid({
scrollable: true,
sortable: false,
filterable: false,
pageable: false,
//editable: false,
batch: true,
dataSource: datasource,
dataBound: onDataBound,
columns: [
{
field: "Approved", title: "Approved",
template: "<input class='chck_app' type='checkbox' #= Approved ? checked='checked' : '' #/>"
},
{
field: "ApprovalDate", title: "Approval Date",
template: "#= ApprovalDate ? kendo.toString(kendo.parseDate(ApprovalDate), 'MM/dd/yyyy') : '' #"

}
]
});
});
function approve(e) {
var grid = $("#grid").data("kendoGrid");
var tr = $(this).parents("tr");
var dataItem = grid.dataItem(tr);
if (dataItem != null) {
if (this.checked) {
//dataItem.Approved = true;
//dataItem.ApprovalDate = new Date();
//grid.refresh();


dataItem.set("Approved", true);
dataItem.set("ApprovalDate", new Date());

}
else {
//dataItem.Approved = false;
//dataItem.ApprovalDate = null;
//grid.refresh();


dataItem.set("Approved", false);
dataItem.set("ApprovalDate", null);
}


}

}



function onDataBound(e) {

$(".chck_app").click(approve);

}

</script>

answered on 17 Feb 2016, 03:35 PM

The older version was two versions ago.
Essentially this is our issue.

We need a column on the grid to be disabled to user input however, the values should be able to be updated using JavaScript (the field is a date time of when a user clicked something, we don’t want the user to be able to change that date for security reasons.)

This has worked in the earlier version however, after upgrading; we can no longer update the values with the script that had worked before.

Anyway there is the way around ( in my code it is commented out, it is working, but it is not documented in Telerik documentation and we are not sure that it is correct and would not stop working in next release.

Calculated fields in a grid is very common use case.