Grid inline editing with Always edit mode and batch save.
StopLoad is set, so the grid won't load (change page, sort) if there are unsaved changes, and will scroll to first row with changes.
We could also handle the change event on the grid, and call grid api batchSave to save instantly on each change.
@*name of each inline helper/editor is matching the names of DinnerInput properties, and the names of row model properties set in MapToGridModel*@
@* certain helper data urls are configured to be cached globally (in site.js), that's why when the grid loads all rows in edit mode you may not notice 10 xhr requests for Url.Action("GetChefs", "Data"), Url.Action("GetMealsImg", "Data"), etc. *@
<script> // disable/enable save and cancel buttons when the grid has changed or new rows $(function () { var grid = $('#@gridId'); updateBtnState(); grid.on('change awerender awerowch', updateBtnState); });
function updateBtnState() { var grid = $('#@gridId'); $('.alwEdStBtn').prop('disabled', !grid.find('.o-hasch, .o-glnew').length); } </script>
@*optional grid client instant validation (for MVC5 must be placed in a cshtml with @model DinnerInput)*@ @(Html.BindOVldForId<DinnerInput>(gridId))
Demos/Grid/GridInlineEditDemoController.cs
public class GridInlineEditDemoController : Controller { private object MapToGridModel(Dinner o) { return new { o.Id, o.Name, Date = o.Date.ToShortDateString(), ChefName = o.Chef.FullName, Meals = string.Join(", ", o.Meals.Select(m => m.Name)), BonusMeal = o.BonusMeal.Name, o.Organic, DispOrganic = o.Organic ? "Yes" : "No",
// below properties used for inline editing only MealsIds = o.Meals.Select(m => m.Id).ToArray(), ChefId = o.Chef.Id, BonusMealId = o.BonusMeal.Id,