ASP.net Web-Forms Awesome Controls overview:

This is an ASP.net web-forms project .NET Framework 4.5.2, it is using the MVC5 (Microsoft.AspNet.Mvc) nuget package to get json data and html (rendered mvc views) via ajax. Download this demo to see the full source code.

Odropdown with fav buttons
Multicheck

Hover me
Notification
 
  •  
 
 
ActivePanel

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.
Default.aspx
<div class="bar">
<% Txtperson.TextBox().Placeholder("search for person ...").CssClass("searchtxt"); %>
<awe:ocon runat="server" id="Txtperson" />
<% Txtfood.TextBox().Placeholder("search for food ...").CssClass("searchtxt"); %>
<awe:ocon runat="server" id="Txtfood" />
<% OCountry.AjaxRadioList().Url(Page.Url().Action("GetCountries", "Data")).Odropdown().HtmlAttributes(new { style = "min-width:15em;" }); %>
<awe:ocon runat="server" id="OCountry" />
</div>

<% Grid1.Grid()
.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.Name", ClientFormatFunc = "site.imgFood", MinWidth = 200 },
new Column { Bind = "Country.Name", ClientFormat = ".(CountryName)", Header = "Country" },
new Column { Bind = "Date", Grow = .1 }.Mod(o => o.Autohide()),
new Column { Bind = "Location" }.Mod(o => o.Autohide()),
new Column { Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef" })
.Url(Page.Url().Action("GetItems", "LunchGrid"))
.Persistence(Persistence.Session) // save collapsed groups and nodes when switching between grid pages.
.Resizable()
.Height(350)
.Parent(Txtperson.ClientID, "person")
.Parent(Txtfood.ClientID, "food")
.Parent(OCountry.ClientID, "country"); %>
<awe:ocon runat="server" id="Grid1" />
<script>
var root = '<%=ResolveUrl("~/Content/Pictures/Food/") %>';
function imgFood(itm) {
return '<img src="' + root + itm.FoodPic + '" class="food" />' + itm.Food;
}
</script>
Awesome/Grid/LunchGridController.cs
using System;
using System.Linq;
using AwesomeWebFormsDemo.Data;
using AwesomeWebFormsDemo.Models;
using AwesomeWebFormsDemo.Utils.Awesome;
using System.Web.Mvc;


using Omu.AwesomeWebForms;

namespace AwesomeWebFormsDemo.Controllers.Awesome.Grid
{
public class LunchGridController : Controller
{
public ActionResult GetItems(GridParams g, int? country, string person, string food)
{
var query = Db.Lunches.AsQueryable();

// filtering
if (person != null) query = query.Where(o => o.Person.ToLower().Contains(person.ToLower()));
if (food != null) query = query.Where(o => o.Food.Name.ToLower().Contains(food.ToLower()));
if (country.HasValue) query = query.Where(o => o.Country.Id == country);

// data can be from any source as long here you pass an IQueryable<T>
var gmb = new GridModelBuilder<Lunch>(query.AsQueryable(), g);

// define grid key, used to identify rows
gmb.KeyProp = o => o.Id;

// grid row model
// columns bound to Prop1.Prop2 will automatically display Prop1Prop2,
// or you could specify in the view Column.Prop ="Prop1Prop2", or ClientFormat = ".(Prop1Prop2)"
gmb.Map = o => new
{
o.Id,
o.Person,
FoodName = o.Food.Name,
FoodPic = o.Food.Pic,
o.Location,
o.Price,
Date = o.Date.ToShortDateString(),
CountryName = o.Country.Name,
ChefName = o.Chef.FullName
};

return Json(gmb.Build());
}

public ActionResult GetItemsEFExample(GridParams g, int? country, string person, string food)
{
var query = Db.Lunches.AsQueryable();

// Filter - custom extension in demo code
// equivalent to .Where(o => o.Food.Name.Contains(food) || ...)

query = query
.Filter(food, o => o.Food.Name)
.Filter(person, o => o.Person);

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

var gmb = new GridModelBuilder<Lunch>(query, g);
gmb.KeyProp = o => o.Id;
gmb.Map = o => new
{
o.Id,
o.Person,
FoodName = o.Food.Name,
FoodPic = o.Food.Pic,
o.Location,
o.Price,
Date = o.Date.ToShortDateString(),
CountryName = o.Country.Name,
ChefName = o.Chef.FullName
};

return Json(gmb.Build());
}
}
}
The following demos are loaded via ajax (on scroll), which is why they are mvc views, the same applies for popups that load their content via ajax.


See also:
Drag And Drop Demo (grid move rows)
Grid Client Data Demo
Grid In Nest Editing Demo



Comments