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 a v 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 a selected parameter that represents the selected values, it should return a Json(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