Awesome ASP.net Core and MVC Controls
Quick overview:
 
  •  
 
 

Grid, search using parent binding

Grid basic features and search using Parent binding.
Some columns have autohide mod, you can resize the browser window to see the columns hide and show depending on window width.
Home/Index.cshtml
<div class="bar">
@Html.Awe().TextBox("txtperson").Placeholder("search for person ...").CssClass("searchtxt")
@Html.Awe().TextBox("txtfood").Placeholder("search for food ...").CssClass("searchtxt")
@Html.Awe().AjaxRadioList("oCountry").Url(Url.Action("GetCountries", "Data")).Odropdown().HtmlAttributes(new { style = "min-width:15em;" })
</div>

@(Html.Awe().Grid("Grid1")
.Reorderable()
.Mod(o => o.PageInfo().PageSize().AutoMiniPager().ColumnsSelector())
.Columns(
new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false },
new Column { Bind = "Person" },
new Column { Bind = "Food", ClientFormatFunc = "imgFood", MinWidth = 200 },
new Column { Bind = "Location" },
new Column { Bind = "Date", Width = 120 }.Mod(o => o.Autohide()),
new Column { Bind = "Country.Name", ClientFormat = ".CountryName", Header = "Country" }.Mod(o => o.Autohide()),
new Column { Bind = "Chef.FirstName,Chef.LastName", ClientFormat = ".ChefName", Header = "Chef" }.Mod(o => o.Autohide()))
.Url(Url.Action("GetItems", "LunchGrid"))
.Persistence(Persistence.Session) // save collapsed groups and nodes when switching between grid pages
.ColumnsPersistence(Persistence.Session) // save columns (width, visibility, etc..) for browser session lifetime
.Resizable()
.Height(350)
.Parent("txtperson", "person")
.Parent("txtfood", "food")
.Parent("oCountry", "country"))
<script>
var root = '@Url.Content("~/Content/Pictures/Food/")';
function imgFood(itm) {
return '<img src="' + root + itm.FoodPic + '" class="food" />' + itm.Food;
}
</script>
Awesome/Grid/LunchGridController.cs
public class LunchGridController : Controller
{
public ActionResult GetItems(GridParams g, string person, string food, int? country)
{
food = (food ?? "").ToLower();
person = (person ?? "").ToLower();

var list = Db.Lunches
.Where(o => o.Food.ToLower().Contains(food) && o.Person.ToLower().Contains(person))
.AsQueryable();

if (country.HasValue) list = list.Where(o => o.Country.Id == country);

return Json(new GridModelBuilder<Lunch>(list, g)
{
KeyProp = o => o.Id,// needed for Entity Framework | nesting | tree | api
Map = o => new
{
o.Id,
o.Person,
o.Food,
o.FoodPic,
o.Location,
o.Price,
Date = o.Date.ToShortDateString(),
CountryName = o.Country.Name,
ChefName = o.Chef.FirstName + " " + o.Chef.LastName
}
}.Build());
}
}
Home/Index.cshtml

<button type="button" class="awe-btn" onclick="awem.notif('Hi,</br> how are you ! ', 5000)">Show Notification</button>
<button type="button" class="awe-btn redbtn" onclick="awem.notif('<h5>Oops !</h5> error example ', 0, 'o-err')">Show Error</button>
<button type="button" class="awe-btn" onclick="awe.flash($(this).parent())">Flash</button>
<button type="button" class="awe-btn" onclick="awe.flash(awem.notif('Hi,</br> how are you ! ', 5000))">Flash Notify</button>


See also:
Drag And Drop Demo (grid move rows)
Grid Client Data Demo
Grid In Nest Editing Demo
Grid Inline Editing Demo
Master Detail Crud Demo
Wizard Demo



Comments