Awesome ASP.net Web-Forms Controls

MultiLookup Grid

Meal:
  •  

MultiLookup with grids inside the popup, done using the MultiLookupGrid mod that also uses PopupUrl extension.
MultiLookupDemo.aspx
<% MealCustomPopup.MultiLookup()
.MultiLookupGrid(Page.Url().Action("MealMultiLookup", "MultiLookupDemo"))
.Height(500)
.Width(500)
.Controller("MealsMultiLookup"); %>
<awe:Ocon runat="server" ID="MealCustomPopup" />
Awesome/MultiLookup/MealsMultiLookupController.cs
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))
});
}
}
\Views\MultiLookupDemo/MealMultiLookup.cshtml
@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>
}

MultiLookup with custom Items Layout

Meals:
  •  

MultiLookupDemo.aspx
<% MealsCustomItem.MultiLookup()
.Controller<MealsCustomItemMultiLookupController>()
.Mod(o => o.ShowHeader())
.CustomSearch()
.Height(700)
.HighlightChange(); %>
<awe:Ocon runat="server" ID="MealsCustomItem" />
Awesome/MultiLookup/MealsCustomItemMultiLookupController.cs
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;

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));
}
}
}
\Views\MealsCustomItemMultiLookup/SearchForm.cshtml
@{ 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()))
\Views\MealsCustomItemMultiLookup/Items.cshtml
@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>
}

MultiLookup bound to many parents

Parent Categories:
  •  
Parent Category:
Child Meals:
  •  

Setting predefined parameters

Meals (categories = Fruits):
  •  



Comments

We use cookies to improve your online experience. By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.