Grid inline editing

Inline editing for grid achieved using InlineEdit grid mod
Delete action is the same as in the grid crud demo, using a popup.
To set initial values on create set the initial model as a parameter in the inlineCreate method, example: $grid.data('api').inlineCreate({ Name: 'hi' })
On Save you also get the grid parameters, for example this grid has txtSearchInl as parent, so you get the value of txtSearchInl as 'search' parameter in the Edit/Create post actions

Shared/Demos/GridInlineCrud.cshtml

@{
    var gridId = "DinnersInlineCrudGrid";
    var initObj = new
    {
        Name = DemoUtils.RndName(),
        Date = DateTime.Now.ToShortDateString(),
        ChefId = DemoCache.Chefs.First().Id,
        MealsIds = DemoCache.Meals.Take(2).Select(o => o.Id).ToArray()
    };
}
<div class="bar">
    <div style="float: right;">
        @Html.Awe().TextBox("txtSearchInl").Placeholder("search...").CssClass("searchtxt")
    </div>
    <button type="button" onclick="$('#@gridId').data('api').inlineCreate()" class="awe-btn">Create</button>

    @Html.InlineCreateButtonForGrid(gridId, initObj, "Create with predefined values")
</div>

@Html.InitDeletePopupForGrid(gridId, "GridInlineEditDemo")

@(Html.Awe().Grid(gridId)
    .Mod(o => o.Main(false)
        .InlineEdit(Url.Action("Save", "GridInlineEditDemo"))) //, reloadOnSave:true, oneRow:true
    .Url(Url.Action("GridGetItems", "GridInlineEditDemo"))
    .Parent("txtSearchInl", "search")
    .Height(350)
    .Resizable()
    .Reorderable()
    .Attr("data-syncg", "dinner") // crud sync using signalr in site.js
    .Columns(
        new Column { Bind = "Id", Width = 75 }
        .InlId(),

        new Column { Bind = "Name" }
        .InlString(),

        new Column { Bind = "Date", Width = 180 }
        .InlDate(),

        new Column { Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef", MinWidth = 170 }
        .Inl(Html.Awe().Lookup("ChefId").Controller("ChefLookup")),

        new Column { Prop = "Meals", Header = "Meals", MinWidth = 200, Grow = 2.2 }
        .InlMultiselect(new MultiselectOpt
        {
            Name = "MealsIds",
            Url = Url.Action("GetMealsImg", "Data")
        }
        .ImgItem()),

        new Column { Bind = "BonusMeal.Name", Prop = "BonusMeal", Header = "Bonus Meal" }
        .InlDropdownList(new DropdownListOpt
        {
            Name = "BonusMealId",
            Url = Url.Action("GetMealsImg", "Data")
        }
        .ImgItem()),                

        new Column { Bind = "Organic", Width = 90, Prop = "DispOrganic" }
        .Inl(Html.Awe().CheckBox("Organic").Otoggl()),

        Html.InlEditColumn(),
        Html.InlDeleteColumn(gridId)))

@*grid client 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 readonly MyContext mcx = new MyContext();// mock EF Db context

    public GridInlineEditDemoController()
    {
        
    }

    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,

            // for conditional demo
            Editable = o.Meals.Count() > 1,
            DateReadOnly = o.Date.Year < 2015
        };
    }

    public async Task<IActionResult> GridGetItems(GridParams g, string search = "")
    {
        var query = mcx.Dinners
            .Include(o => o.Chef)
            .Include(o => o.Meals)
            .Include(o => o.Country)
            .Include(o => o.BonusMeal)
        .Where(o => o.Name.Contains(search)).AsQueryable();

        var model = new GridModelBuilder<Dinner>(query, g)
        {
            KeyProp = o => o.Id, // needed for api select, update, tree, nesting, EF                
            Map = MapToGridModel,
        };

        return Json(await model.EFBuildAsync());
    }

    [HttpPost]
    public async Task<IActionResult> Save(DinnerInput input)
    {
        // custom validation example
        if (ModelState.IsValid && input.Name.Contains("asdf"))
        {
            ModelState.AddModelError("Name", "Name can't contain asdf");
        }

        if (ModelState.IsValid)
        {
            var isCreate = !input.Id.HasValue;

            var ent = isCreate ? new Dinner() :
                await mcx.Dinners
                    .Include(o => o.Meals)
                    .FirstOrDefaultAsync(o => o.Id == input.Id);

            if (ent == null)
            {
                throw new Exception("Item doesn't exist anymore, id:" + input.Id);
            }

            ent.Name = input.Name;
            ent.Date = input.Date.Value;
            ent.Chef = await mcx.FindAsync<Chef>(input.ChefId);

            // ToList req for EF
            ent.Meals = await mcx.Meals
                .Where(o => input.MealsIds.Contains(o.Id)).ToListAsync();

            ent.BonusMeal = await mcx.FindAsync<Meal>(input.BonusMealId);
            ent.Organic = input.Organic ?? false;

            if (isCreate)
            {
                mcx.Add(ent);
            }

            await mcx.SaveChangesAsync();

            return Json(new { Item = MapToGridModel(ent) });
        }

        return Json(ModelState.GetErrorsInline());
    }

    public async Task<IActionResult> Delete(int id)
    {
        var dinner = await mcx.FindAsync<Dinner>(id);

        return PartialView(new DeleteConfirmInput
        {
            Id = id,
            Type = "dinner",
            Name = dinner.Name
        });
    }

    [HttpPost]
    public async Task<IActionResult> Delete(DeleteConfirmInput input)
    {
        mcx.Remove(await mcx.FindAsync<Dinner>(input.Id));

        await mcx.SaveChangesAsync();

        // the PopupForm's success function utils.itemDeleted expects an obj with "Id" property
        return Json(new { input.Id });
    }

    public IActionResult Index()
    {
        return View();
    }

    public IActionResult ConditionalDemo()
    {
        return View();
    }

    public IActionResult MultiEditorsDemo()
    {
        return View();
    }

    public IActionResult ClientSave()
    {
        return View();
    }
}

Edit on row click

Edit on row click, and save when clicking out if there is are any changes.
When there are validation errors, grid loading (go to another page, sort, group) will be prevented.

Comments