Awesome ASP.net Core and MVC Controls

Grid control basic features


The Awesome Grid control for ASP.net Core and MVC is used to display data, by default using a table, but that can be changed. Documentation

It can get the data from the server by specifying the url Url(urlstr) or from a js function DataFunc(jsfunc) (the javascript function could also do an ajax request and return the promise).
The Grid (like most awesome controls) can be bound to other controls using the Parent extension (used for filtering). It can also be filtered using the api.
Mods are used to add additional features to the grid like: inline editing, automatic columns hiding and via dropdown, adaptive pager (based on window width), and more.

Features:
Other grid crud demos: Grid Crud (Popup), Grid in nest editing, Master Detail Crud Demo
GridDemo/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("selCountry").Url(Url.Action("GetCountries", "Data")).Odropdown().HtmlAttributes(new { style = "min-width:15em;" })
</div>

@(Html.Awe().Grid("Grid1")
.Mod(o => o.ColumnsSelector().PageSize().PageInfo().Loading().AutoMiniPager())
.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 = "Country.Name", ClientFormat = ".(CountryName)", Header = "Country" },
new Column { Bind = "Date", Width = 120 }.Mod(o => o.Autohide()),
new Column { Bind = "Location" }.Mod(o => o.Autohide()),
new Column { Bind = "Chef.FirstName,Chef.LastName", ClientFormat = ".(ChefName)", Header = "Chef" })
.Url(Url.Action("GetItems", "LunchGrid"))
.Reorderable()
.Resizable()
.Persistence(Persistence.Session)
.ColumnsPersistence(Persistence.Session)
.Height(350)
.Parent("txtPerson", "person")
.Parent("txtFood", "food")
.Parent("selCountry", "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());
}
}


See also:

Awesome Grid Video Tutorial
Grid Client Data Demo
Grid Mailbox Demo



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.