Hi! I'm using the KendoUI Grid with MVC 4. I'm trying to figure out how to automagically save the cell data when I step out of the cell. I can get it to save using a "Save" button and batch editing, but my requirements are such that they don't want to have to press the "Save" button.
Thanks for your help in advance.
Thanks for your help in advance.
9 Answers, 1 is accepted
0
Hi Stephanie,
Petur Subev
the Telerik team
This could be easily achieved via the Save event of the Grid and the dataSource sync objec i.e. .Events(ev=>ev.Save("function(e){this.dataSource.sync()}"))
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
IT
Top achievements
Rank 2
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?
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());
}
0
Accepted
Hi again Spephanie,
Yes it seems that the sync occurs before the model changes - you could use setTimeout to execute the update when the model has changed:
i.e.
Let me know if further questions arise.
Kind regards,
Petur Subev
the Telerik team
Yes it seems that the sync occurs before the model changes - you could use setTimeout to execute the update when the model has changed:
i.e.
.Events(ev => ev.Save(@"
function
(e){
setTimeout(
function
(){
$(
'#YourGrid'
).data(
'kendoGrid'
).dataSource.sync()
}
)}"))
Let me know if further questions arise.
Kind regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
IT
Top achievements
Rank 2
answered on 13 Jul 2012, 12:25 PM
Thanks, Petur! setTimeout did the trick.
0
Anish
Top achievements
Rank 1
answered on 03 Oct 2012, 04:44 PM
Hi Petur,
I have a validation enabled on a cell fr numerics...on entering text to it it show a validation error ..but still allowing me to save the data from grid ..this save button is outside the grid, not the inbuilt update ..
so bottomline... if I have any invalid data still the data is getting saved with old values ..PLS HELP :)
I have a validation enabled on a cell fr numerics...on entering text to it it show a validation error ..but still allowing me to save the data from grid ..this save button is outside the grid, not the inbuilt update ..
so bottomline... if I have any invalid data still the data is getting saved with old values ..PLS HELP :)
0
Princess
Top achievements
Rank 1
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());
}
@(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());
}
0
Princess
Top achievements
Rank 1
answered on 14 Dec 2012, 09:17 AM
Ok, my problem is fixed. I forgot to change the client template absolute to my models name. Thanks for this thread!
0
Jonathan Copelton
Top achievements
Rank 1
answered on 09 Jun 2015, 03:20 PM
Hi would you have any idea how you could do this in a grid hierarchy where the sub grids use #=Id# in their control name i.e.
.Name("Unitgrid_#=Id#")
Thanks
0
Hello Jonathan,
I covered the question in the support thread on the same topic. You could use the autoSync option of the dataSource.
Regards,Dimiter Madjarov
Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items