Grid inline editing multiple editors in one cell
You can have more than one editor inside a grid cell by calling .Inline(format) multiple times.
GridInlineEditDemo/MultiEditorsDemo.cshtml
@{
var gridId = "DinnersGrid";
}
<div class="bar">
<div style="float: right;">
@Html.Awe().TextBox("txtSearch").Placeholder("search...").CssClass("searchtxt")
</div>
<button type="button" onclick="$('#@gridId').data('api').inlineCreate()" class="awe-btn mbtn">Create</button>
@{
var chefId = Db.Chefs.First().Id;
var meals = Db.Meals.Take(2).Select(o => o.Id).ToArray();
var initObj = new { Name = "hi there", Date = DateTime.Now.ToShortDateString(), ChefId = chefId, MealsIds = meals };
}
@Html.InlineCreateButtonForGrid(gridId, initObj, "Create with predefined values")
</div>
@Html.InitDeletePopupForGrid(gridId, "GridInlineEditDemo")
@(Html.Awex().Grid<Dinner>(gridId)
.Url(Url.Action("GridGetItems"))
.InlEdit(new InlEditOpt { SaveUrl = Url.Action("Save") })
.Main()
.Parent("txtSearch", "search")
.Height(350)
.Resizable()
.Reorderable()
.Columns(b => {
b.Add(o => o.Id, new Column { Width = 75 }).InlId();
b.Add(o => new { o.Name, o.Date },
new Column { Header = "Name" })
.Inl(Html.Awe().TextBox("Name"))
.Inl(Html.Awe().DatePicker("Date"));
b.Add(o => new { o.Chef.FirstName, o.Chef.LastName },
new Column { Header = "Chef", MinWidth = 200, Grow = .2 })
.Inl(Html.Awe().Lookup("ChefId").Controller("ChefLookup"), "ChefId");
b.Add(new Column { ClientFormat = ".(Meals) and .(BonusMeal)", Header = "Meals" })
.InlMultiselect(new MultiselectOpt { Name = "MealsIds", Url = Url.Action("GetMealsImg", "Data") }.ImgItem())
.InlDropdownList(new DropdownListOpt { Name = "BonusMealId", Url = Url.Action("GetMealsImg", "Data") }.ImgItem());
b.Add(o => o.Organic, new Column { Width = 100, Prop = "DispOrganic" })
.Inl(Html.Awe().Toggle(new ToggleOpt { Name = "Organic" }));
b.Add(Html.InlEditDelColumn(gridId));
}))
<script>
var meals = @Html.Raw(DemoUtils.Encode(Db.Meals.Select(o => new KeyContent(o.Id, o.Name))));
</script>
Demos/Grid/GridInlineEditDemoController.cs
using AweCoreDemo.Data;
using AweCoreDemo.Models;
using AweCoreDemo.ViewModels.Input;
using Microsoft.AspNetCore.Mvc;
using Omu.Awem.Utils;
using Omu.AwesomeMvc;
namespace AweCoreDemo.Controllers.Demos.Grid
{
public class GridInlineEditDemoController : Controller
{
public IActionResult GridGetItems(GridParams g, string search)
{
var gmb = new GridModelBuilder<Dinner>(Db.Dinners.AsQueryable(), g)
{
KeyProp = o => o.Id, // needed for api select, update, tree, nesting, EF
};
gmb.FilterContainsStr(o => new { o.Name, o.Chef.FirstName, o.Chef.LastName }, search);
gmb.Prop(o => o.Organic, "DispOrganic", o => o ? "Yes" : "No");
// props used for inline editing controls values
gmb.PropVal(o => o.Meals.Select(m => m.Id), "MealsIds");
gmb.PropVal(o => o.Chef.Id, "ChefId");
gmb.PropVal(o => o.BonusMeal.Id, "BonusMealId");
// for conditional demo
gmb.Prop(o => o.Meals.Count(), "Editable", count => count > 1);
gmb.Prop(o => o.Date.Year, "DateReadOnly", year => year < 2015);
// for multi editors demo
gmb.PropVal(o => o.Name, "Name");
gmb.PropVal(o => o.Date, "Date", o => o.ToShortDateString());
gmb.Prop(o => o.Meals.Select(m => m.Name), "Meals");
gmb.Prop(o => o.BonusMeal.Name, "BonusMeal");
return this.AweJson(gmb.Build());
}
[HttpPost]
public 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() :
Db.Dinners.FirstOrDefault(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 = Db.Find<Chef>(input.ChefId);
// ToList req for EF
ent.Meals = Db.Meals
.Where(o => input.MealsIds.Contains(o.Id)).ToList();
ent.BonusMeal = Db.Find<Meal>(input.BonusMealId);
ent.Organic = input.Organic ?? false;
if (isCreate)
{
Db.Add(ent);
}
return Json(new { });
}
return Json(ModelState.GetErrorsInline());
}
public IActionResult Delete(int id)
{
var dinner = Db.Find<Dinner>(id);
return PartialView(new DeleteConfirmInput
{
Id = id,
Type = "dinner",
Name = dinner.Name
});
}
[HttpPost]
public IActionResult Delete(DeleteConfirmInput input)
{
Db.Remove(Db.Find<Dinner>(input.Id));
// the PopupForm's success function aweUtils.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();
}
public IActionResult AlwaysEdit()
{
return View();
}
}
}
Comments