<% MealCustomPopup.MultiLookup()
      .MultiLookupGrid(Page.Url().Action("MealMultiLookup", "MultiLookupDemo"))
      .Height(500)
      .Width(500)
      .Controller("MealsMultiLookup"); %>
<awe:Ocon runat="server" ID="MealCustomPopup" />

public class MealsMultiLookupController : Controller
{
    public ActionResult GetItems(int[] v)
    {
        var items = new List<Meal>();
        if (v != null)
        {
            items.AddRange(v.Select(Db.Get<Meal>));
        }

        return Json(items.Select(meal => new KeyContent(meal.Id, meal.Name)));
    }

    public ActionResult Search(string search, int[] selected, int page)
    {
        const int pageSize = 10;
        selected = selected ?? new int[] { };
        search = (search ?? "").ToLower().Trim();

        var items = Db.Meals.Where(o => o.Name.ToLower().Contains(search) && !selected.Contains(o.Id));

        return Json(new AjaxListResult
        {
            Items = items.Skip((page - 1) * pageSize).Take(pageSize).Select(o => new KeyContent(o.Id, o.Name)),
            More = items.Count() > page * pageSize
        });
    }

    public ActionResult Selected(int[] selected)
    {
        var items = new List<Meal>();
        if (selected != null)
        {
            items.AddRange(selected.Select(Db.Get<Meal>));
        }
        
        return Json(new AjaxListResult
        {
            Items = items.Select(o => new KeyContent(o.Id, o.Name))
        });
    }
}

@model AwesomeWebFormsDemo.ViewModels.Input.Lookup.LookupPopupInput
@using (Html.Awe().BeginContext())
{
    <div class="bar">
        @Html.Awe().TextBoxFor(o => o.Search).Placeholder("search...")
    </div>
    <div style="max-width: 900px">
        @(Html.Awe().Grid("MealsGrid1")
              .Mod(o => o.PageInfo().KeyNav().MovableRows(x => x.DropOn("MealsGrid1").DropOn("MealsGrid2")))
              .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)
              .Height(350))
        <br />
        @(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"))
              .Groupable(false)
              .Paging(false)
              .Height(350))
    </div>
}

<% MealsCustomItem.MultiLookup()
      .Controller<MealsCustomItemMultiLookupController>()
      .Mod(o => o.ShowHeader())
      .CustomSearch()
      .Height(700)
      .HighlightChange(); %>
<awe:Ocon runat="server" ID="MealsCustomItem" />

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using AwesomeWebFormsDemo.Data;
using AwesomeWebFormsDemo.Models;

using Omu.AwesomeWebForms;

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

        public ActionResult GetItems(IEnumerable<int> v)
        {
            return Json(Db.Meals.Where(o => v != null && v.Contains(o.Id))
                          .Select(f => new KeyContent(f.Id, f.Name)));
        }

        public ActionResult Search(string search, int[] selected, int page)
        {
            const int pageSize = 10;
            selected = selected ?? new int[] { };
            search = (search ?? "").ToLower().Trim();

            var items = Db.Meals.Where(o => o.Name.ToLower().Contains(search)
                                            && (!selected.Contains(o.Id)));
            
            //instead of setting the Items property we set the Content with rendered html
            return Json(new AjaxListResult
                {
                    Content = this.RenderPartialView("items", items.Skip((page - 1) * pageSize).Take(pageSize)),
                    More = items.Count() > page * pageSize
                });
        }

        public ActionResult Selected(IEnumerable<int> selected)
        {
            return Json(new AjaxListResult
                {
                    Content = this.RenderPartialView("items", Db.Meals.Where(o => selected != null && selected.Contains(o.Id)))
                });
        }

        //used by the details button, in items view
        public ActionResult Details(int id)
        {
            return PartialView(Db.Get<Meal>(id));
        }
    }
}

@{ Layout = null; }
<input type="text" name="search" class="awe-searchtxt"/><button type="button" class="awe-searchbtn awe-btn">Search</button>
@(Html.Awe().InitPopup()
        .Name("details")
        .Url(Url.Action("Details"))
        .Modal()
        .Mod(o => o.OutClickClose()))

@model IEnumerable<AwesomeWebFormsDemo.Models.Meal>
@{ Layout = null;}

@foreach (var o in Model)
{
    <li class="awe-li" data-val="@(o.Id)">
        <button class="awe-movebtn awe-btn" type="button"><i class='awe-icon'></i></button>
        Name: @o.Name
        <button onclick="awe.open('details', { params: { id: @o.Id } }, event)" class="awe-btn awe-nonselect lkdetail" tabindex="-1">
            Details
        </button>
        <br />
        Category: @o.Category.Name
        <br />
        Description: @o.Description
    </li>
}