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
Id | Person | Food | Country | Date | Location | Chef |
3675 | Mary | Shepherd's pie | La Croisette | 11/19/2022 | Diner | Pepper Tomato |
3671 | Jeremy | Pizza | Regent | 6/13/2010 | Tavern | Demeter Harvest |
3667 | John | Cheesecake | Winterspring | 9/25/2015 | Restaurant | Josh Baskin |
3663 | Michael | Hot Beverage | Jisina | 2/13/2012 | Visit | Pepper Tomato |
3659 | Gabrielle | French toast | Goldshire | 5/19/2016 | Tavern | Omu Man |
3655 | Lucy | Big Salad | Stormwind | 4/3/2019 | Tavern | Omu Man |
3651 | Cheyenne | Big Salad | Westfall | 11/1/2017 | Visit | Omu Man |
3647 | Jonah | Shepherd's pie | Sylvanaar | 4/27/2020 | Visit | Joanna Stan |
3643 | Fernando | Soup | Ghidrimesti | 5/7/2010 | University | Chef Chef |
3639 | Audrey | Shepherd's pie | Piccadilly | 5/17/2011 | University | Charles 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
Id | Person | Food | Date | Country | Meals |
search: | please select |
3675 | Mary | Shepherd's pie | 11/19/2022 | La Croisette | Wheat, Papaya |
3671 | Jeremy | Pizza | 6/13/2010 | Regent | Hazelnuts |
3667 | John | Cheesecake | 9/25/2015 | Winterspring | Walnuts, Broccoli |
3663 | Michael | Hot Beverage | 2/13/2012 | Jisina | Potato, Broccoli |
3659 | Gabrielle | French toast | 5/19/2016 | Goldshire | Papaya, Tomato |
3655 | Lucy | Big Salad | 4/3/2019 | Stormwind | Broccoli, Banana, Tomato |
3651 | Cheyenne | Big Salad | 11/1/2017 | Westfall | Rice |
3647 | Jonah | Shepherd's pie | 4/27/2020 | Sylvanaar | Oats, Banana, Papaya |
3643 | Fernando | Soup | 5/7/2010 | Ghidrimesti | Rice |
3639 | Audrey | Shepherd's pie | 5/17/2011 | Piccadilly | Rice |
Grid with filter row and server side filtering.
Grid with filter row
Id | Person | Food | Country | Date | Meals | Chef |
search: | please select |
1475 | Scott | Banana | Farringdon | 11/15/2013 | Almonds, Broccoli, Rice | Charles Duchemin |
1471 | Kelly | Big Salad | Hatton Garden | 8/11/2021 | Mongongo, Onion, Cauliflower | Tom Smykowski |
1467 | Hugo | Pizza | Redridge Mountains | 3/11/2014 | Hazelnuts | Fromage Sandwich |
1463 | Stan | Cheesecake | Westfall | 5/27/2014 | Artichoke | Demeter Harvest |
1459 | Mario | Big Salad | Goldshire | 3/27/2021 | Chestnuts, Hazelnuts, Banana | Bruce Nolan |
1455 | Alice | Soup | Ghidrimesti | 9/21/2016 | Hazelnuts, Banana | Tom Smykowski |
1451 | Rachel | Soup | Jisina | 5/19/2009 | Lettuce, Chestnuts, Hazelnuts | Hercules Oat |
1447 | Lucy | Shepherd's pie | Carpana | 5/15/2018 | Chestnuts, Apple | Pepper Tomato |
1443 | Maurice | Pizza | Orgrimmar | 5/5/2009 | Hazelnuts, Artichoke | Josh Baskin |
1439 | Patrick | Apple Pie | Feralas | 11/19/2017 | Mongongo | Chef 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
Id | Person | Price | Date | Country | Meals | Chef |
search: | please select |
1475 | Scott | 70 | 11/15/2013 | Farringdon | Almonds, Broccoli, Rice | Charles Duchemin |
1471 | Kelly | 10 | 8/11/2021 | Hatton Garden | Mongongo, Onion, Cauliflower | Tom Smykowski |
1467 | Hugo | 10 | 3/11/2014 | Redridge Mountains | Hazelnuts | Fromage Sandwich |
1463 | Stan | 20 | 5/27/2014 | Westfall | Artichoke | Demeter Harvest |
1459 | Mario | 70 | 3/27/2021 | Goldshire | Chestnuts, Hazelnuts, Banana | Bruce Nolan |
1455 | Alice | 100 | 9/21/2016 | Ghidrimesti | Hazelnuts, Banana | Tom Smykowski |
1451 | Rachel | 21 | 5/19/2009 | Jisina | Lettuce, Chestnuts, Hazelnuts | Hercules Oat |
1447 | Lucy | 79 | 5/15/2018 | Carpana | Chestnuts, Apple | Pepper Tomato |
1443 | Maurice | 45 | 5/5/2009 | Orgrimmar | Hazelnuts, Artichoke | Josh Baskin |
1439 | Patrick | 39 | 11/19/2017 | Feralas | Mongongo | Chef 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.
show code
Comments