MultiLookup control demo
MultiLookup needs a controller or urls to be specified, by default convention it
will look for a controller with the same name as it + "MultiLookupController"
-
action GetItems
- used to show the value in the readonly field, it will receive av
parameter which is going to be the keys of the selected items -
action Search
- gets data for the search result in it's popup, it receives aselected
parameter that represents the selected values, it should return aJson(AjaxListResult)
, so it has same features as the AjaxList (table layout, custom item template) action Selected
- gets data for the selected items in the popup
MultiLookupDemo/Index.cshtml
@(Html.Awe().MultiLookupFor(o => o.Meals)
.Controller<MealsMultiLookupController>()
.ClearButton()
.HighlightChange())
Awesome/MultiLookup/MealsMultiLookupController.cs
public class MealsMultiLookupController : Controller
{
// Only the GetItems action is used by the MultiLookup Grid demo, for selected and seach actions we have 2 grids in the popup partial view each with its own data Url.
public IActionResult GetItems(int[] v)
{
var items = new List<Meal>();
if (v != null)
{
items = Db.Meals
.Where(o => v.Contains(o.Id)).ToList();
}
return Json(items.Select(meal => new KeyContent(meal.Id, meal.Name)));
}
public IActionResult Search(int[] selected, int page, string search)
{
selected = selected ?? new int[] { };
var query = Db.Meals.AsQueryable().Filter(search, o => o.Name).Where(o => !selected.Contains(o.Id));
var res = AweUtil.BuildList(query, page, keyContentFunc: o => new KeyContent(o.Id, o.Name));
return Json(res);
}
public IActionResult Selected(int[] selected)
{
var items = new List<Meal>();
if (selected != null)
{
items = Db.Meals
.Where(o => selected.Contains(o.Id)).ToList();
}
return Json(new AjaxListResult
{
Items = items.Select(o => new KeyContent(o.Id, o.Name))
});
}
}
MultiLookup Grid
MultiLookup with grids inside the popup, done using the MultiLookupGrid mod that also uses PopupUrl extension.
MultiLookupDemo/Index.cshtml
@(Html.Awe().MultiLookup(new MultiLookupOpt
{
Name = "MealCustomPopup",
Dropdown = false,
ShowHeader = false,
Modal = true,
Height = 700,
MaxWidth = 900,
Controller = "MealsMultiLookup"
})
.MultiLookupGrid(Url.Action("MealMultiLookupGrid")))
Demos/Helpers/MultiLookupDemoController.cs
public IActionResult MealMultiLookupGrid()
{
return PartialView();
}
MultiLookupDemo/MealMultiLookupGrid.cshtml
@model AweCoreDemo.ViewModels.Input.Lookup.LookupPopupInput
@using (Html.Awe().BeginContext())
{
<div class="bar">
@Html.Awe().TextBoxFor(o => o.Search).Placeholder("search...")
</div>
<div class="o-flexf o-flex-col" style="max-width: 900px; gap: .5em;">
@(Html.Awe().Grid("MealsGrid1")
.Mod(o => o.Main()
.MovableRows(x => x.DropOn("MealsGrid1").DropOn("MealsGrid2"))
.KeyNav())
.CssClass("awe-srl")
.Parent(o => o.Search, "name")
.Columns(
new Column { Bind = "Id", Width = 120, ClientFormat = GridUtils.MoveBtn() + " .(Id)"},
new Column { Bind = "Name", Width = 150 }.Mod(o => o.Nohide()),
new Column { Bind = "Description", CssClass = "txtlim" }.Mod(o => o.Autohide()))
.Url(Url.Action("MealsGridSearch", "Data"))
.Groupable(false))
@(Html.Awe().Grid("MealsGrid2")
.Mod(o => o.PageInfo().KeyNav().MovableRows(x => x.DropOn("MealsGrid1").DropOn("MealsGrid2")))
.CssClass("awe-sel")
.Columns(
new Column { Bind = "Id", Width = 120, ClientFormat = GridUtils.MoveBtn() + " .(Id)" },
new Column { Bind = "Name", Width = 150 }.Mod(o => o.Nohide()),
new Column { Bind = "Description", CssClass = "txtlim" }.Mod(o => o.Autohide()))
.Url(Url.Action("MealsGridSelected", "Data"))
.ShowHeader(false)
.Groupable(false)
.Paging(false))
</div>
}
Awesome/MultiLookup/MealsMultiLookupController.cs
// Only the GetItems action is used by the MultiLookup Grid demo, for selected and seach actions we have 2 grids in the popup partial view each with its own data Url.
public IActionResult GetItems(int[] v)
{
var items = new List<Meal>();
if (v != null)
{
items = Db.Meals
.Where(o => v.Contains(o.Id)).ToList();
}
return Json(items.Select(meal => new KeyContent(meal.Id, meal.Name)));
}
MultiLookup with Custom Items
MultiLookupDemo/Index.cshtml
@(Html.Awe().MultiLookup(new MultiLookupOpt {
Name = "MealsCustomItem",
Controller = "MealsCustomItemMultiLookup",
Value = Db.Meals.Take(3).Select(o => o.Id).ToArray(),
Dropdown = false,
Modal = true,
CustomSearch = true,
Height = 700,
MaxWidth = 1000,
CssClass = "MLLimH" // limit caption height
}))
Awesome/MultiLookup/MealsCustomItemMultiLookupController.cs
public class MealsCustomItemMultiLookupController : Controller
{
public IActionResult SearchForm()
{
return PartialView();
}
public IActionResult GetItems(int[] v)
{
var query = Db.Meals.AsQueryable();
if (v != null)
{
query = query.Where(o => v.Contains(o.Id));
}
ViewData["caption"] = true;
var res = AweUtil.BuildList(
query,
setContentFunc: (items) => this.RenderPartialView("items", items));
return Json(res);
}
public IActionResult Search(int[] selected, int page, string search)
{
selected = selected ?? new int[] { };
var query = Db.Meals
.Where(o => !selected.Contains(o.Id))
.AsQueryable();
query = query.Filter(search, o => o.Name);
var res = AweUtil.BuildList<Meal>(
query,
page,
setContentFunc: (items) => this.RenderPartialView("items", items));
return Json(res);
}
public IActionResult Selected(IEnumerable<int> selected)
{
var query = Db.Meals
.AsQueryable();
if (selected != null)
{
query = query.Where(o => selected.Contains(o.Id));
}
var res = AweUtil.BuildList(
query,
setContentFunc: (items) => this.RenderPartialView("items", items));
return Json(res);
}
// used by the details button, in items view
public IActionResult Details(int id)
{
return PartialView(Db.Find<Meal>(id));
}
}
MealsCustomItemMultiLookup/SearchForm.cshtml
@{
Layout = null;
}
<input type="text" name="search" class="awe-searchtxt" placeholder="Search..." />
<button type="button" class="awe-searchbtn awe-btn">Search</button>
@(Html.Awe().InitPopup(new PopupOpt
{
Name = "details",
Url = Url.Action("Details"),
Modal = true,
OutClickClose = true
}))
MealsCustomItemMultiLookup/Items.cshtml
Could not find file '/app/Views/MealsCustomItemMultiLookup/Items.cshtml'.
MultiLookup bound to many parents
Parent Categories:
Parent Category:
Child Meals:
Setting predefined parameters
Meals (categories =
Fruits):
Comments