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

InCell Editing - Saving when stepping out of cell

9 Answers 2923 Views

Grid

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

9 Answers, 1 is accepted

answered on 12 Jul 2012, 08:39 PM

OK, the sync is happening before the grid registers that the field has changed. The original data is passed back to the server, not the updated data. When I try to update the same cell again, it passes the first edit through to the controller.

What am I missing?

.cshtml:

@(Html.Kendo()

.Grid<TestKendoGrid.Models.myTransaction>()

.Name("Grid")

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Columns(columns =>

{

columns.Bound(o => o.TranDt).Width(150);

columns.Bound(o => o.Description).Width(300);

columns.Bound(o => o.Category).Width(125);

columns.Bound(o => o.Amount).Width(100).Format("{0:c}");

columns.Bound(o => o.TranID);

columns.Command(command => command.Destroy()).Width(200);

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.TranID))

.Events(events => events.Error("error_handler"))

.Create(create => create.Action("_CreateTransactionKendo", "Home"))

.Read(read => read.Action("_SelectTransactionsKendo", "Home"))

.Update(update => update.Action("_SaveTransactionKendo", "Home"))

.Destroy(destroy => destroy.Action("_DeleteTransactionKendo", "Home"))

.Batch(true))

.Pageable()

.ToolBar(commands => { commands.Create(); commands.Save(); })

.Events(ev => ev.Save("function(e) { this.dataSource.sync() }"))

)



Controller:


[AcceptVerbs(HttpVerbs.Post)]
public ActionResult _SaveTransactionKendo([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<myTransaction> txns)
{
    List<myTransaction> list = (List<myTransaction>)TempData["trans"];
    if (txns != null && ModelState.IsValid)
    {
        myTransaction txn = txns.First();
        string id = txn.TranID;
        var target = list.Find(p => p.OFXTranID == id);
        if (target != null)
        {
            target.Description = txn.Description;
            target.Category = txn.Category;
            target.Amount = txn.Amount;
        }
    }
 
    TempData["trans"] = list;
 
    return Json(ModelState.ToDataSourceResult());
}

Accepted

answered on 14 Dec 2012, 09:07 AM

I was able to follow @Anish and @Petur solution but when I'm retrieving the values on the controller all fields was null but when I look on the Firebug all the changes on the model was their. Am I doing something wrong?

@(Html.Kendo().Grid<PDMS.Models.Temp_File_Upload.TempFileUploadCreate>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.ID).Hidden(true)
.ClientTemplate("#= ID #" +
"<input type='hidden' name='TempFileUploadCreate[#= index(data)#].ID' value='#= ID #' />");
columns.Bound(c => c.ProjectFolderID)
.ClientTemplate("#= ProjectFolderID #" +
"<input type='hidden' name='TempFileUploadCreate[#= index(data)#].ProjectFolderID' value='#= ProjectFolderID #' />");
columns.Bound(c => c.FileName)
.ClientTemplate("#= FileName #" +
"<input type='hidden' name='TempFileUploadCreate[#= index(data)#].FileName' value='#= FileName #' />");
columns.Bound(c => c.GeneratedFileName).Hidden(true)
.ClientTemplate("#= GeneratedFileName #" +
"<input type='hidden' name='TempFileUploadCreate[#= index(data)#].GeneratedFileName' value='#= GeneratedFileName #' />");
columns.Bound(c => c.Tag)
.ClientTemplate("#= Tag #" +
"<input type='hidden' name='TempFileUploadCreate[#= index(data)#].Tag' value='#= Tag #' />");
columns.Command(command => {
command.Destroy().HtmlAttributes("<div class='k-button'><span class='k-icon k-edit'></span></div>").Text(" ");
command.Edit().HtmlAttributes("<div class='k-button'><span class='k-icon k-delete'></span></div>").Text(" ");
}).Width(80);
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable(p => p
.Refresh(true))
.Sortable()
.Scrollable()
.Selectable(selectable => selectable.Type(GridSelectionType.Cell) )
.DataSource(datasource => datasource
.Ajax()
.Events(events =>
{
events.Error("error_handler");
})
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.FileName).Editable(false);
model.Field(p => p.GeneratedFileName).Editable(false);
})
.Read("FileDetails_Read", "File").Model(model =>
{
model.Field(p => p.ID).Editable(false);
model.Field(p => p.FileName).Editable(false);
})
.Update("FileDetails_Update","File")
.Destroy("FileDetails_Destroy", "File")
)
.Events(events =>
{

events.Save("onGridSave");

})
)
<script type="text/javascript">


// alert("save");
// when triggered save changes
// //alert("done na ba?");
function onGridSave(e) {
setTimeout(function () {
$("#Grid").data("kendoGrid").dataSource.sync();
});
}

function index(dataItem) {
var data = $("#Grid").data("kendoGrid").dataSource.data();

return data.indexOf(dataItem);
}

function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}

</script>

//Controller

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult FileDetails_Update([DataSourceRequest] DataSourceRequest request,[Bind(Prefix ="models")] PDMS.Models.Temp_File_Upload.TempFileUploadCreate entity)
{

var isSuccess = tempFileRepository.Update(entity.ID, entity.Tag ,User.Identity.Name.ToString());
//var isSuccess = tempFileRepository.Update(entity);

return Json(ModelState.ToDataSourceResult());
}