Multiple editors in one grid cell


GridInlineEditDemo/MultiEditorsDemo.cshtml

<div class="bar">
<div style="float: right;">
@Html.Awe().TextBox("txtSearch").Placeholder("search...").CssClass("searchtxt")
</div>
<button type="button" onclick="$('#DinnersGrid').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 };
}
<button type="button" onclick="$('#DinnersGrid').data('api').inlineCreate(@DemoUtils.Encode(initObj))" class="awe-btn mbtn">Create with predefined values</button>
</div>

@Html.InitDeletePopupForGrid("DinnersGrid", "GridInlineEditDemo")

@(Html.Awe().Grid("DinnersGrid")
.Mod(o => o.PageInfo().InlineEdit(Url.Action("Create"), Url.Action("Edit")))
.Url(Url.Action("GridGetItems"))
.Parent("txtSearch", "search")
.Height(350)
.Resizable()
.Reorderable()
.Columns(
new Column { Bind = "Id", Width = 75 }
.Mod(o => o.InlineId()),

new Column { Bind = "Name,Date", ClientFormat = ".Name .Date", Header = "Name"}
.Mod(o => o.Inline(Html.Awe().TextBox("Name").AsInline() + " "
+ Html.Awe().DatePicker("Date").AsInline())),

new Column { Bind = "Chef.FirstName,Chef.LastName", ClientFormat = ".ChefName", Header = "Chef", Width = 200 }
.Mod(o => o.Inline(Html.Awe().Lookup("Chef").Controller("ChefLookup"), "ChefId")),

new Column { ClientFormat = ".Meals and .BonusMeal", Header = "Meals" }
.Mod(o => o.Inline(Html.Awe().AjaxCheckboxList("Meals").Multiselect().DataFunc("utils.getItems(meals)").AsInline("MealsIds") + " "
+ Html.Awe().AjaxRadioList("BonusMealId").Odropdown().DataFunc("utils.getItems(meals)").AsInline("BonusMealId"))),

new Column { Bind = "Organic", Width = 100, ClientFormat = ".DispOrganic" }
.Mod(o => o.InlineBool(cssClass: "btoggle")),

new Column { ClientFormat = GridUtils.InlineEditFormat(), Width = 60 },
new Column { ClientFormat = GridUtils.InlineDeleteFormat("deleteDinnersGrid"), Width = 70 }))

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>

<script>
var meals = @Html.Raw(DemoUtils.Encode(Db.Meals.Select(o => new KeyContent(o.Id, o.Name))));

$(function () {
$(document).on('aweinlineedit', function () {
$(this).find(".btoggle").bootstrapToggle({
on: 'Yes',
off: 'No'
});
});
});
</script>
Demos/Grid/GridInlineEditDemoController.cs
public class GridInlineEditDemoController : Controller
{
public ActionResult Index()
{
return View();
}

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

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

private object MapToGridModel(Dinner o)
{
return new
{
o.Id,
o.Name,
Date = o.Date.ToShortDateString(),
ChefName = o.Chef.FirstName + " " + o.Chef.LastName,
Meals = string.Join(", ", o.Meals.Select(m => m.Name)),
BonusMeal = o.BonusMeal.Name,
o.Organic,
DispOrganic = o.Organic ? "Yes" : "",

// 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 < 2012
};
}

public ActionResult GridGetItems(GridParams g, string search)
{
search = (search ?? "").ToLower();
var items = Db.Dinners.Where(o => o.Name.ToLower().Contains(search)).AsQueryable();
var model = new GridModelBuilder<Dinner>(items, g)
{
Key = "Id", // needed for api select, update, tree, nesting, EF
GetItem = () => Db.Get<Dinner>(Convert.ToInt32(g.Key)), // called by the grid.api.update
Map = MapToGridModel,
}.Build();

return Json(model);
}

[HttpPost]
public ActionResult Create(DinnerInput input)
{
if (ModelState.IsValid)
{
var dinner = new Dinner
{
Name = input.Name,
Date = input.Date.Value,
Chef = Db.Get<Chef>(input.Chef),
Meals = input.Meals.Select(mid => Db.Get<Meal>(mid)),
BonusMeal = Db.Get<Meal>(input.BonusMealId),
Organic = input.Organic ?? false
};

Db.Insert(dinner);

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

return Json(ModelState.GetErrorsInline());
}

[HttpPost]
public ActionResult Edit(DinnerInput input)
{
if (ModelState.IsValid)
{
var dinner = Db.Get<Dinner>(input.Id);
dinner.Name = input.Name;
dinner.Date = input.Date.Value;
dinner.Chef = Db.Get<Chef>(input.Chef);

dinner.Meals = input.Meals.Select(mid => Db.Get<Meal>(mid));

dinner.BonusMeal = Db.Get<Meal>(input.BonusMealId);
dinner.Organic = input.Organic ?? false;
Db.Update(dinner);

return Json(new { });
}

return Json(ModelState.GetErrorsInline());
}

public ActionResult Delete(int id, string gridId)
{
var dinner = Db.Get<Dinner>(id);

return PartialView(new DeleteConfirmInput
{
Id = id,
Message = string.Format("Are you sure you want to delete dinner <b>{0}</b> ?", dinner.Name)
});
}

[HttpPost]
public ActionResult Delete(DeleteConfirmInput input)
{
Db.Delete<Dinner>(input.Id);
return Json(new { input.Id });
}

public ActionResult Popup()
{
return PartialView();
}
}