Grid Filtering

Filter grid using parent controls 

Drag a column header and drop it here to group by that column
Id
Person
Food
Country
Date
Location
Chef
3675MaryfoodShepherd's pieLa Croisette11/19/2022DinerPepper Tomato
3671JeremyfoodPizzaRegent6/13/2010TavernDemeter Harvest
3667JohnfoodCheesecakeWinterspring9/25/2015RestaurantJosh Baskin
3663MichaelfoodHot BeverageJisina2/13/2012VisitPepper Tomato
3659GabriellefoodFrench toastGoldshire5/19/2016TavernOmu Man
3655LucyfoodBig SaladStormwind4/3/2019TavernOmu Man
3651CheyennefoodBig SaladWestfall11/1/2017VisitOmu Man
3647JonahfoodShepherd's pieSylvanaar4/27/2020VisitJoanna Stan
3643FernandofoodSoupGhidrimesti5/7/2010UniversityChef Chef
3639AudreyfoodShepherd's piePiccadilly5/17/2011UniversityCharles Duchemin

The grid can be filtered by adding parent controls to it, when a parent control triggers the change event, the grid (child) will reload and the parent values will be sent as parameters to the data function (or url in this case).

Grid filtering using a popup to enter the search criteria 

Drag a column header and drop it here to group by that column
Id
Person
Food
Country
Date
Location
Chef
3675MaryfoodShepherd's pieLa Croisette11/19/2022DinerPepper Tomato
3671JeremyfoodPizzaRegent6/13/2010TavernDemeter Harvest
3667JohnfoodCheesecakeWinterspring9/25/2015RestaurantJosh Baskin
3663MichaelfoodHot BeverageJisina2/13/2012VisitPepper Tomato
3659GabriellefoodFrench toastGoldshire5/19/2016TavernOmu Man
3655LucyfoodBig SaladStormwind4/3/2019TavernOmu Man
3651CheyennefoodBig SaladWestfall11/1/2017VisitOmu Man
3647JonahfoodShepherd's pieSylvanaar4/27/2020VisitJoanna Stan
3643FernandofoodSoupGhidrimesti5/7/2010UniversityChef Chef
3639AudreyfoodShepherd's piePiccadilly5/17/2011UniversityCharles Duchemin

show code
Using a popupForm and the grid api to filter the grid. The search criteria is built inside the popup, and when the Ok button is clicked, the post function executes, this is where the grid api.load function is called.
Note: we used aweui to initialize the popupForm, and a formBuilder util class to build its content (just like in the aweui grid filtering demo); an alternative would be to use the PopupForm helper and instead of the formBuilder we could set the Url to point to an action that returns a partial view with the search criteria form.

Filter by all columns 

  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
Location
Date
Country
Chef
1475ScottBananaUniversity11/15/2013FarringdonCharles Duchemin
1471KellyBig SaladRestaurant8/11/2021Hatton GardenTom Smykowski
1467HugoPizzaTavern3/11/2014Redridge MountainsFromage Sandwich
1463StanCheesecakeTavern5/27/2014WestfallDemeter Harvest
1459MarioBig SaladHome3/27/2021GoldshireBruce Nolan
1455AliceSoupUniversity9/21/2016GhidrimestiTom Smykowski
1451RachelSoupTavern5/19/2009JisinaHercules Oat
1447LucyShepherd's pieHome5/15/2018CarpanaPepper Tomato
1443MauricePizzaCentral Perk5/5/2009OrgrimmarJosh Baskin
1439PatrickApple PieTavern11/19/2017FeralasChef Chef

show code
Filtering by multiple columns at once from one textbox, you can type multiple keywords separated by space and the grid will get filtered.
The grid data is loaded once from the server after it is stored in the 'lunches' variable. The function defined in DataFunc can either return the grid model or a promise which will return the grid model later, and in this case on the first load we return a promise ($.get).

Grid outside filter row and custom render 

Drag a column header and drop it here to group by that column
Id
Name
Chef
Date
Meals
Organic
4315cabbageNaked Chef1/6/2025Mango, AppleYes
675asdasdaGaia Earth6/8/2007RiceNo
673ApplesPeter Gibbons9/17/2018Broccoli, MangoNo
671CookiesJoanna Stan11/13/2019Tomato, Walnuts, CauliflowerYes
669Morning TeaPepper Tomato6/15/2009HazelnutsNo
667Morning mealPepper Tomato8/11/2018WalnutsYes
665Snacks and movieJoanna Stan10/9/2020BuckwheatNo
663AperoGaia Earth10/27/2010Almonds, Buckwheat, AppleYes
661petit dejJoanna Stan8/3/2009Walnuts, BuckwheatYes
659BreakfastCasse Croute10/27/2012MangoYes

Reusing the same data source (url) as for the Grid with filter row (server side data), except in this demo we're using the controls outside of the grid to filter the demo.
Just like in the filter row demos the filter controls get their data from the grid model.
Additionally there is filter persistence, so after page refresh the grid will have the same filters applied.
And there's a custom item render mod applied so you can switch between cards view and rows.



Comments