I have an MVC grid that has an Ajax datasource with InCell editing. After the grid loads we want to be able to update the contents of cells with JavaScript. So the user will enter a value in a textbox. Click a button that will execute JavaScript. The JavaScript will then update the cells in the grid with the value from the textbox. The idea being that this will save the user from typing the same value into every cell.
Below is the JavaScript function I have. It's looping through the grid and changing the value in cell named "NonOutageCost". If I don't refresh the grid - then I don't see that the value has changed until I click in the cell. After I click in the cell - then it shows me the value the JavaScript function set. But it doesn't show the red dirty flag indicator. If I refresh the grid - then it shows me the value the JavaScript function set. But it doesn't show me the red dirty flag indicator.
Is there a way to have a JavaScript function that is executed by a button click change the cell contents and set the dirty flag indicator? If so, could you show me an example. I've spent a lot of time researching this and looking at the documentation. But I haven't found an example like this. Most of the examples I saw show doing something like this in a databound event. But that won't work in this case. Thanks for your help.
function myFunction() {
alert("Function executes when button is clicked");
var vgrid = $("#grid").data("kendoGrid");
//Getting grid items
var items = vgrid.dataSource.data();
alert("length = " + items.length);
alert("Non Outage Cost = " + ($('#NonOutageCostInput').val()));
for (i = 0; i < items.length; i++) {
var item = items[i];
if ($('#NonOutageCostInput').val() > 0) {
item.NonOutageCost = $('#NonOutageCostInput').val();
}
}
//Refresh will change the row values - but the dirty flag isn't set - so the Save Changes doesn't update the database
//alert("before refresh");
//$("#grid").data("kendoGrid").refresh();
}