Lookup Grid

Meal:
 

Lookup with grid inside the popup, done using the lookupgrid mod that also uses PopupUrl extension.
LookupDemo.aspx
<% MealCustomPopup.Lookup()
            .LookupGrid(Page.Url().Action("MealLookup", "LookupDemo"))
            .Controller("MealLookup"); %>
<awe:Ocon runat="server" ID="MealCustomPopup" />
Awesome/Lookup/MealLookupController.cs
public class MealLookupController : Controller
{
    public ActionResult GetItem(int? v)
    {
        Check.NotNull(v, "v");
        var o = Db.Meals.SingleOrDefault(f => f.Id == v) ?? new Meal();

        return Json(new KeyContent(o.Id, o.Name));
    }

    public ActionResult Search(string search, int page)
    {
        const int PageSize = 7;
        search = (search ?? "").ToLower().Trim();
        
        var list = Db.Meals.Where(o => o.Name.ToLower().Contains(search));

        return Json(new AjaxListResult
                        {
                            Items = list.Skip((page - 1) * PageSize).Take(PageSize).Select(o => new KeyContent(o.Id, o.Name)),
                            More = list.Count() > page * PageSize
                        });
    }
}
\Views\LookupDemo/MealLookup.cshtml
@model AwesomeWebFormsDemo.ViewModels.Input.Lookup.LookupPopupInput
@using (Html.Awe().BeginContext())
{
    <div class="awe-search bar">
        @Html.Awe().TextBoxFor(o => o.Search).Placeholder("search...")
    </div>

    @(Html.Awe().Grid("MealsGrid")
              .Mod(o => o.Main().KeyNav().InfiniteScroll())
              .Selectable(SelectionType.Single)
              .Parent(o => o.Search, "name")
              .Columns(
                  new Column { Bind = "Id", Width = 75, Resizable = false }.Mod(o => o.Autohide()),
                  new Column { Bind = "Name", Width = 150 }.Mod(o => o.Nohide()),
                  new Column { Bind = "Description", CssClass = "txtlim" })
              .Url(Url.Action("MealsGrid", "Data"))
              .Groupable(false))
}

Lookup with Custom Items template

Meal:
 

The Search action of the LookupController returns json of AjaxListResult, we need to set the string AjaxListResult.Content instead of Items in order to achieve Custom Item Template, exactly the same as for the AjaxList helper.
LookupDemo.aspx
<% MealCustomItem.Lookup()
      .Controller("MealCustomItemLookup")
      .CustomSearch(); %>
<awe:Ocon runat="server" ID="MealCustomItem" />
Awesome/Lookup/MealCustomItemLookupController.cs
using System.Linq;
using System.Web.Mvc;
using AwesomeWebFormsDemo.Data;
using AwesomeWebFormsDemo.Models;
using AwesomeWebFormsDemo.Utils;
using Omu.AwesomeWebForms;

namespace AwesomeWebFormsDemo.Controllers.Awesome.Lookup
{
    public class MealCustomItemLookupController : Controller
    {
        public ActionResult SearchForm()
        {
            return PartialView();
        }

        public ActionResult GetItem(int? v)
        {
            Check.NotNull(v, "v");
            var o = Db.Meals.SingleOrDefault(f => f.Id == v) ?? new Meal();

            return Json(new KeyContent(o.Id, o.Name));
        }

        public ActionResult Search(string search, int page)
        {
            const int pageSize = 10;
            search = (search ?? "").ToLower().Trim();
            var list = Db.Meals.Where(f => f.Name.ToLower().Contains(search));
            return Json(new AjaxListResult
                {
                    Content = this.RenderPartialView("items", list.Skip((page - 1) * pageSize).Take(pageSize)),
                    More = list.Count() > page * pageSize
                });
        }

        public ActionResult Details(int id)
        {
            return PartialView(Db.Get<Meal>(id) ?? new Meal());
        }
    }
}
\Views\MealCustomItemLookup/SearchForm.cshtml
@{ Layout = null; }
<input type="text" name="search" class="awe-searchtxt" placeholder="search..."/>
@(Html.Awe().InitPopup()
            .Name("details")
            .Url(Url.Action("Details"))
            .Mod(o => o.OutClickClose())
            .Modal())
\Views\MealCustomItemLookup/Items.cshtml
@model IEnumerable<AwesomeWebFormsDemo.Models.Meal>
@{ Layout = null; }
@foreach (var o in Model)
{
    <li class="awe-li" data-val="@(o.Id)">Name: @o.Name
        <button onclick="awe.open('details', { params: { id: @o.Id } }, event)" class="awe-btn awe-nonselect lkdetail" tabindex="-1">
            Details
        </button>
        Category: @o.Category.Name
        <br />
        Description: @o.Description
    </li>
}

Lookup bound parents

Parent Categories:
  •  
Parent Category:
Child Meal:
 

Binding to parents and setting predefined parameters is done the same as for the AjaxDropdown using .Parent() and .Parameter(), values are passed to both GetItem and Search actions.
Unlike other controls the Lookup won't change its value when the value of the parent is changed.
LookupDemo.aspx
<div class="efield">
    <div class="elabel">
        Parent Categories:
    </div>
    <div class="einput">
        <% CategoriesData.MultiLookup()
              .Controller<CategoriesMultiLookupController>()
              .ClearButton(); %>
        <awe:Ocon runat="server" ID="CategoriesData" />
    </div>
</div>
<div class="efield">
    <div class="elabel">
        Parent Category:
    </div>
    <div class="einput">
        <% Category.AjaxDropdown().Url(Page.Url().Action("GetCategories", "Data")); %>
        <awe:Ocon runat="server" ID="Category" />
    </div>
</div>
<div class="efield">
    <div class="elabel">
        Child Meal:
    </div>
    <div class="einput">
        <% ChildOfMany.Lookup()
              .Parent(CategoriesData.ClientID, "categories")
              .Parent(Category.ClientID, "categories")
              .Controller<MealCustomSearchLookupController>(); %>
        <awe:Ocon runat="server" ID="ChildOfMany" />
    </div>
</div>

Setting predefinded parameters

Meal1 (categories = {Fruits, Legumes}):
 



 Comments