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