aweui.js ui components library

You can use the awesome controls without the use of server side html helpers by using the aweui.js library.

Grid remote data 

Drag a column header and drop it here to group by that column
Id
Person
Food
Country
Date
Location
Chef
3675MaryShepherd's pieLa Croisette11/19/2022DinerPepper Tomato
3671JeremyPizzaRegent6/13/2010TavernDemeter Harvest
3667JohnCheesecakeWinterspring9/25/2015RestaurantJosh Baskin
3663MichaelHot BeverageJisina2/13/2012VisitPepper Tomato
3659GabrielleFrench toastGoldshire5/19/2016TavernOmu Man
3655LucyBig SaladStormwind4/3/2019TavernOmu Man
3651CheyenneBig SaladWestfall11/1/2017VisitOmu Man
3647JonahShepherd's pieSylvanaar4/27/2020VisitJoanna Stan
3643FernandoSoupGhidrimesti5/7/2010UniversityChef Chef
3639AudreyShepherd's piePiccadilly5/17/2011UniversityCharles Duchemin

In this demo on the server side we query, order the data and select the items for the current page, while on the client we build the grid model. The count (total items count) is sent from the server so the grid would know how many pages there are in total.

Grid filter row with server side filtering 

Drag a column header and drop it here to group by that column
Id
Person
Food
Date
Country
Meals
search:
please select
3675MaryfoodShepherd's pie11/19/2022La CroisetteWheat, Papaya
3671JeremyfoodPizza6/13/2010RegentHazelnuts
3667JohnfoodCheesecake9/25/2015WinterspringWalnuts, Broccoli
3663MichaelfoodHot Beverage2/13/2012JisinaPotato, Broccoli
3659GabriellefoodFrench toast5/19/2016GoldshirePapaya, Tomato
3655LucyfoodBig Salad4/3/2019StormwindBroccoli, Banana, Tomato
3651CheyennefoodBig Salad11/1/2017WestfallRice
3647JonahfoodShepherd's pie4/27/2020SylvanaarOats, Banana, Papaya
3643FernandofoodSoup5/7/2010GhidrimestiRice
3639AudreyfoodShepherd's pie5/17/2011PiccadillyRice
Grid with filter row and server side filtering.

Grid with filter row 

  you can search multiple columns at the same time (try 'pizza tavern')
Drag a column header and drop it here to group by that column
Id
Person
Food
Country
Date
Meals
Chef
search:
please select
1475ScottfoodBananaFarringdon11/15/2013Almonds, Broccoli, RiceCharles Duchemin
1471KellyfoodBig SaladHatton Garden8/11/2021Mongongo, Onion, CauliflowerTom Smykowski
1467HugofoodPizzaRedridge Mountains3/11/2014HazelnutsFromage Sandwich
1463StanfoodCheesecakeWestfall5/27/2014ArtichokeDemeter Harvest
1459MariofoodBig SaladGoldshire3/27/2021Chestnuts, Hazelnuts, BananaBruce Nolan
1455AlicefoodSoupGhidrimesti9/21/2016Hazelnuts, BananaTom Smykowski
1451RachelfoodSoupJisina5/19/2009Lettuce, Chestnuts, HazelnutsHercules Oat
1447LucyfoodShepherd's pieCarpana5/15/2018Chestnuts, ApplePepper Tomato
1443MauricefoodPizzaOrgrimmar5/5/2009Hazelnuts, ArtichokeJosh Baskin
1439PatrickfoodApple PieFeralas11/19/2017MongongoChef Chef


Using a filter row with a dropdown for each column, each dropdown contains the collection of distinct column values.

Grid with filter row multiple editors 

Drag a column header and drop it here to group by that column
Id
Person
Price
Date
Country
Meals
Chef
search:
please select
1475Scott7011/15/2013FarringdonAlmonds, Broccoli, RiceCharles Duchemin
1471Kelly108/11/2021Hatton GardenMongongo, Onion, CauliflowerTom Smykowski
1467Hugo103/11/2014Redridge MountainsHazelnutsFromage Sandwich
1463Stan205/27/2014WestfallArtichokeDemeter Harvest
1459Mario703/27/2021GoldshireChestnuts, Hazelnuts, BananaBruce Nolan
1455Alice1009/21/2016GhidrimestiHazelnuts, BananaTom Smykowski
1451Rachel215/19/2009JisinaLettuce, Chestnuts, HazelnutsHercules Oat
1447Lucy795/15/2018CarpanaChestnuts, ApplePepper Tomato
1443Maurice455/5/2009OrgrimmarHazelnuts, ArtichokeJosh Baskin
1439Patrick3911/19/2017FeralasMongongoChef Chef

We can add more than one editor in one filter cell, and in this demo we added additional operator dropdowns and clear all values in cell buttons. Custom css is used to make the Op dropdowns (operator equals/less than etc.) take less space in the cell. o-op class on the dropdowns tells filter row to ignore its value for adding o-hv class to the cell, so if you only select a value in an op dropdown (less than/equals etc.), but not in another editor in the cell (without o-op) you won't get the little box-shadow under the cell.
o-clrAll class tells the filter row that clicking on the button with this class should clear all input values in this cell.

DropdownList 



DropdownList with fav buttons 



show code
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

RadioList, CheckboxList, Multiselect 

Legumes×
Vegetables×
show code
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

Checkbox 

show code
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

Numeric Textbox 

show code
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

DatePicker 

show code
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

DateTimePicker 

show code
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

Lookups 

 


  •  
show code
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

Popups 

show code
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.
show code
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.



Comments