QuickGrid In Blazor

Displaying data on a web page is a Displaying data on a web page is a common request. So common that the grid common request. So common that the grid common request. So common that the grid control is one of the most popular web control is one of the most popular web control is one of the most popular web controls. But instead of reaching for a controls. But instead of reaching for a controls. But instead of reaching for a third-party resource or paying for a third-party resource or paying for a third-party resource or paying for a grid, you might want to consider quick grid, you might want to consider quick grid, you might want to consider quick grid in Blazer. This control is easy to grid in Blazer. This control is easy to grid in Blazer. This control is easy to add, easy to modify, and easy to use. add, easy to modify, and easy to use. add, easy to modify, and easy to use. Now if you don't know me, my name is Tim Now if you don't know me, my name is Tim Now if you don't know me, my name is Tim Corey and my goal is to help you become Corey and my goal is to help you become Corey and my goal is to help you become the best developer you can be. Instead the best developer you can be. Instead the best developer you can be. Instead of faking it or pretending that of faking it or pretending that of faking it or pretending that prompting an AI makes you a good prompting an AI makes you a good prompting an AI makes you a good developer, I will teach you how to be a developer, I will teach you how to be a developer, I will teach you how to be a confident prepared developer ready to confident prepared developer ready to confident prepared developer ready to survive and thrive in today's survive and thrive in today's survive and thrive in today's marketplace. This channel has over a marketplace. This channel has over a marketplace. This channel has over a thousand videos dedicated to just that. thousand videos dedicated to just that. thousand videos dedicated to just that. But if you're looking for even more, go But if you're looking for even more, go But if you're looking for even more, go to devforge.com. to devforge.com. to devforge.com. There you'll find even more free and There you'll find even more free and There you'll find even more free and paid resources to help you wherever you paid resources to help you wherever you paid resources to help you wherever you are in your development journey. are in your development journey. are in your development journey. So let's start here with a new project. So let's start here with a new project. So let's start here with a new project. We're going to This is a Blazer project. We're going to This is a Blazer project. We're going to This is a Blazer project. We're going to call this We're going to call this We're going to call this quick grid demo quick grid demo quick grid demo and quick grid demo app.

and quick grid demo app. and quick grid demo app. And if you want the source code for And if you want the source code for And if you want the source code for this, there'll be a link down below in this, there'll be a link down below in this, there'll be a link down below in the description you can get. So we're the description you can get. So we're the description you can get. So we're going to do Auto is fine. We're just going to do Auto is fine. We're just going to do Auto is fine. We're just going to use the server version, going to use the server version, going to use the server version, not web assembly. If you don't know not web assembly. If you don't know not web assembly. If you don't know Blazer web apps, which is what this is, Blazer web apps, which is what this is, Blazer web apps, which is what this is, allow you to do a allow you to do a allow you to do a complete range from fully server-side to complete range from fully server-side to complete range from fully server-side to fully client-side or anything in between fully client-side or anything in between fully client-side or anything in between and you can change over time. They're and you can change over time. They're and you can change over time. They're really awesome. They're They're a bunch really awesome. They're They're a bunch really awesome. They're They're a bunch of fun to play with and they're They're of fun to play with and they're They're of fun to play with and they're They're my go-to for a new C# web app. So we're my go-to for a new C# web app. So we're my go-to for a new C# web app. So we're going to include the sample pages, but going to include the sample pages, but going to include the sample pages, but that's it. that's it. that's it. So we're going to hit create. So we're going to hit create. So we're going to hit create. And what we're going to do is is create And what we're going to do is is create And what we're going to do is is create just and here it just and here it just and here it right there. We're going to create just right there. We're going to create just right there. We're going to create just a a simple sample. Okay, so we're not a a simple sample. Okay, so we're not a a simple sample. Okay, so we're not going to worry about client and in here going to worry about client and in here going to worry about client and in here we're going to add one thing to quick we're going to add one thing to quick we're going to add one thing to quick grid demo, which is a NuGet package. grid demo, which is a NuGet package. grid demo, which is a NuGet package. And you can just search for quick grid And you can just search for quick grid And you can just search for quick grid um um um like so and you'll find the like so and you'll find the like so and you'll find the microsoft.aspnetcore.components.quickgrid.

You might say, "Well, Tim, wait a You might say, "Well, Tim, wait a minute. You said no third-party minute. You said no third-party minute. You said no third-party packages. This isn't a third-party packages. This isn't a third-party packages. This isn't a third-party package." This is how .NET works is that package." This is how .NET works is that package." This is how .NET works is that instead of putting everything in .NET instead of putting everything in .NET instead of putting everything in .NET like it used to be in .NET framework like it used to be in .NET framework like it used to be in .NET framework where everything include the kitchen where everything include the kitchen where everything include the kitchen sink was in .NET framework and you had sink was in .NET framework and you had sink was in .NET framework and you had this massive bloated thing, instead it's this massive bloated thing, instead it's this massive bloated thing, instead it's the very core that we have which is why the very core that we have which is why the very core that we have which is why they originally call it .NET core and they originally call it .NET core and they originally call it .NET core and now it's .NET. But the just the core now it's .NET. But the just the core now it's .NET. But the just the core components that you need are in .NET and components that you need are in .NET and components that you need are in .NET and everything else is a newgate package everything else is a newgate package everything else is a newgate package that you can add on. These are still the that you can add on. These are still the that you can add on. These are still the things that would have come from things that would have come from things that would have come from Microsoft. They still come from Microsoft. They still come from Microsoft. They still come from Microsoft, but now it's opt-in instead Microsoft, but now it's opt-in instead Microsoft, but now it's opt-in instead of opt-out or have no choice. of opt-out or have no choice. of opt-out or have no choice. Um so, let's install this package. Um so, let's install this package. Um so, let's install this package. Accept that. And we'll just do a quick Accept that. And we'll just do a quick Accept that. And we'll just do a quick check as well. We go here to updates and check as well. We go here to updates and check as well. We go here to updates and just make sure there's nothing here to just make sure there's nothing here to just make sure there's nothing here to be updated and there's not. be updated and there's not. be updated and there's not. Okay. So, now we have this all set up. Okay. So, now we have this all set up. Okay. So, now we have this all set up. I'm going to do one more quick thing I'm going to do one more quick thing I'm going to do one more quick thing that's on our components and go to that's on our components and go to that's on our components and go to imports. Um I'm going to add a using imports. Um I'm going to add a using imports. Um I'm going to add a using directive. Using directive. Using directive. Using microsoft.aspnetcore.components.quickgrid.

So, this just means I don't have to add So, this just means I don't have to add this using directive on any page where I this using directive on any page where I this using directive on any page where I use quick grid. And I'm going to create use quick grid. And I'm going to create use quick grid. And I'm going to create a model as well. So, let's a model as well. So, let's a model as well. So, let's um do a control shift A here and say um do a control shift A here and say um do a control shift A here and say um models and say person model. And that will create the person model, And that will create the person model, but also I can come back over here to but also I can come back over here to but also I can come back over here to imports and add one more using using imports and add one more using using imports and add one more using using and it's quickgrid demo. and it's quickgrid demo. and it's quickgrid demo. Uh models. Uh models. Uh models. That way again I don't have to reference That way again I don't have to reference That way again I don't have to reference the the full path, the fully qualified the the full path, the fully qualified the the full path, the fully qualified name for my model. So while I'm in the name for my model. So while I'm in the name for my model. So while I'm in the model, what we're going to do is create model, what we're going to do is create model, what we're going to do is create a a a really basic model really basic model really basic model that will allow us to create a grid of that will allow us to create a grid of that will allow us to create a grid of data. Now I'm going to do this data in data. Now I'm going to do this data in data. Now I'm going to do this data in memory. We're not going to pull it from memory. We're not going to pull it from memory. We're not going to pull it from a database. That'll be a separate video. a database. That'll be a separate video. a database. That'll be a separate video. There's no reason to do all of that in There's no reason to do all of that in There's no reason to do all of that in one video, but just note that where you one video, but just note that where you one video, but just note that where you see me creating the the set of data, see me creating the the set of data, see me creating the the set of data, that's where you instead bring it in that's where you instead bring it in that's where you instead bring it in from a database or call an API, etc.

from a database or call an API, etc. from a database or call an API, etc. So we're going to say prop, we're going So we're going to say prop, we're going So we're going to say prop, we're going to say required string and we'll say to say required string and we'll say to say required string and we'll say first name. first name. first name. And prop required string And prop required string And prop required string last name. last name. last name. And one more And one more And one more uh required uh required uh required int int int age. So required just means that when age. So required just means that when age. So required just means that when you instantiate this object, you will you instantiate this object, you will you instantiate this object, you will have fill these three things out. That's have fill these three things out. That's have fill these three things out. That's why they're not nullable. why they're not nullable. why they're not nullable. Okay. Okay. Okay. So now we have a person model. Let's go So now we have a person model. Let's go So now we have a person model. Let's go ahead and go to pages and we're going to ahead and go to pages and we're going to ahead and go to pages and we're going to create a new page. create a new page. create a new page. So new razor component So new razor component So new razor component and we'll call this component um and we'll call this component um and we'll call this component um grid demo. grid demo. grid demo. So So So the first thing you do when you create the first thing you do when you create the first thing you do when you create component is if you want to bring it in component is if you want to bring it in component is if you want to bring it in as or see it as a page, you say at page as or see it as a page, you say at page as or see it as a page, you say at page and then give it the path. So in this and then give it the path. So in this and then give it the path. So in this case grid demo. So notice the the two case grid demo. So notice the the two case grid demo. So notice the the two D's there.

D's there. D's there. Okay. So now we have this grid demo Okay. So now we have this grid demo Okay. So now we have this grid demo component. We can actually put a space component. We can actually put a space component. We can actually put a space there to make it there to make it there to make it actually read well. And I am going to um actually read well. And I am going to um actually read well. And I am going to um add this into my navigation. So nav add this into my navigation. So nav add this into my navigation. So nav menu, instead of trying to menu, instead of trying to menu, instead of trying to um create a a nav entry, I'm just going um create a a nav entry, I'm just going um create a a nav entry, I'm just going to say grid demo here. to say grid demo here. to say grid demo here. Instead of weather. We're going to get Instead of weather. We're going to get Instead of weather. We're going to get rid of weather. rid of weather. rid of weather. And down here we'll say um And down here we'll say um And down here we'll say um this is the quick grid demo. We'll do this is the quick grid demo. We'll do this is the quick grid demo. We'll do We'll spell it the whole thing out. We'll spell it the whole thing out. We'll spell it the whole thing out. So now in navigation we'll be able to So now in navigation we'll be able to So now in navigation we'll be able to see that really quickly. If we run this see that really quickly. If we run this see that really quickly. If we run this just to see that it works. Um it's just to see that it works. Um it's just to see that it works. Um it's always good to start by building your always good to start by building your always good to start by building your application, running it, making sure it application, running it, making sure it application, running it, making sure it doesn't crash or or having any other doesn't crash or or having any other doesn't crash or or having any other issues to start. issues to start. issues to start. So So So here we go. Wait for it to load. here we go. Wait for it to load. here we go. Wait for it to load. And by the way, you may see slow load And by the way, you may see slow load And by the way, you may see slow load times and then you go, "Man, times and then you go, "Man, times and then you go, "Man, Blazor slow." It's not. Uh it's actually Blazor slow." It's not. Uh it's actually Blazor slow." It's not. Uh it's actually very fast, especially if you write it very fast, especially if you write it very fast, especially if you write it well. But part of whenever you run well. But part of whenever you run well. But part of whenever you run application Visual Studio and you hit application Visual Studio and you hit application Visual Studio and you hit go, it's going to be a lot slower go, it's going to be a lot slower go, it's going to be a lot slower because of the fact we're in debug mode because of the fact we're in debug mode because of the fact we're in debug mode where um it's attaching Visual Studio to where um it's attaching Visual Studio to where um it's attaching Visual Studio to your application and doing a whole lot your application and doing a whole lot your application and doing a whole lot of other setup stuff. So just note of other setup stuff. So just note of other setup stuff. So just note that's the case. There's a grid demo. So that's the case. There's a grid demo. So that's the case. There's a grid demo. So now we have a counter and we have grid now we have a counter and we have grid now we have a counter and we have grid demo.

demo. demo. So we've got a good starting point for So we've got a good starting point for So we've got a good starting point for actually working on a grid. So now is actually working on a grid. So now is actually working on a grid. So now is when we actually start working in this when we actually start working in this when we actually start working in this application. The first thing I want to application. The first thing I want to application. The first thing I want to do is I want to bring in a render mode. do is I want to bring in a render mode. do is I want to bring in a render mode. Render mode and I'm going to say Render mode and I'm going to say Render mode and I'm going to say interactive interactive interactive server. server. server. So this is important. So render mode, by So this is important. So render mode, by So this is important. So render mode, by default you don't have a render mode, default you don't have a render mode, default you don't have a render mode, it's essentially a server-side built it's essentially a server-side built it's essentially a server-side built application meaning it get built in the application meaning it get built in the application meaning it get built in the server and then just the the HTML get server and then just the the HTML get server and then just the the HTML get sent down to the client, which is how sent down to the client, which is how sent down to the client, which is how MVC works or Razor Pages or you know, MVC works or Razor Pages or you know, MVC works or Razor Pages or you know, PHP or other things like that. So PHP or other things like that. So PHP or other things like that. So with a render mode, what we're doing is with a render mode, what we're doing is with a render mode, what we're doing is allowing for interactivity. Now I said allowing for interactivity. Now I said allowing for interactivity. Now I said render server which does the SignalR in render server which does the SignalR in render server which does the SignalR in the background, the uh socket the background, the uh socket the background, the uh socket connection. And that's gotten a lot connection. And that's gotten a lot connection. And that's gotten a lot better recently, by the way. Um if you better recently, by the way. Um if you better recently, by the way. Um if you haven't seen how this works, um it's haven't seen how this works, um it's haven't seen how this works, um it's it's pretty awesome. Now, you don't have it's pretty awesome. Now, you don't have it's pretty awesome. Now, you don't have the problem of the problem of the problem of um like if it disconnects, you it will um like if it disconnects, you it will um like if it disconnects, you it will try to reconnect and everything like try to reconnect and everything like try to reconnect and everything like that. It's They're pretty awesome. But, that. It's They're pretty awesome. But, that. It's They're pretty awesome. But, um we're going to use interactive um we're going to use interactive um we're going to use interactive server. We could use interactive auto.

server. We could use interactive auto. server. We could use interactive auto. We have to put that down in the client We have to put that down in the client We have to put that down in the client project because it would turn over into project because it would turn over into project because it would turn over into web assembly. Um but, I think this is web assembly. Um but, I think this is web assembly. Um but, I think this is good for now, especially since if you're good for now, especially since if you're good for now, especially since if you're going to call from a database, you're going to call from a database, you're going to call from a database, you're going to want interactive server. Unless going to want interactive server. Unless going to want interactive server. Unless you're going to put this in an API and you're going to put this in an API and you're going to put this in an API and then call the API instead of the then call the API instead of the then call the API instead of the database directly. In that case, you can database directly. In that case, you can database directly. In that case, you can you want to put in auto and and convert you want to put in auto and and convert you want to put in auto and and convert over to web assembly. over to web assembly. over to web assembly. Okay. So, we got the page set up. What Okay. So, we got the page set up. What Okay. So, we got the page set up. What we're going to do is we're going to we're going to do is we're going to we're going to do is we're going to build a a list of person. build a a list of person. build a a list of person. So, private list of person model and So, private list of person model and So, private list of person model and we'll call them people. we'll call them people. we'll call them people. And then, I'll also create a private And then, I'll also create a private And then, I'll also create a private IQueryable IQueryable IQueryable of type person model of type person model of type person model that's going to be called um results. that's going to be called um results. that's going to be called um results. And I'm going to start this off with And I'm going to start this off with And I'm going to start this off with Enumerable Enumerable Enumerable >> [snorts] >> [snorts] >> [snorts] >> .Empty. >> .Empty. >> .Empty. And that's empty of person model.

And that's empty of person model. And that's empty of person model. And then, as queryable. And then, as queryable. And then, as queryable. And yes, that's a lot of extra stuff to And yes, that's a lot of extra stuff to And yes, that's a lot of extra stuff to do. But, what this does, it makes sure do. But, what this does, it makes sure do. But, what this does, it makes sure that even when we have a um that even when we have a um that even when we have a um a a results not yet filled in, we still a a results not yet filled in, we still a a results not yet filled in, we still have something in this have something in this have something in this uh this IQueryable object. So, uh this IQueryable object. So, uh this IQueryable object. So, QuickGrid uses IQueryable. And the QuickGrid uses IQueryable. And the QuickGrid uses IQueryable. And the reason why is it does some calculations reason why is it does some calculations reason why is it does some calculations around filtering and sorting that have around filtering and sorting that have around filtering and sorting that have to be done um on the grid itself, which to be done um on the grid itself, which to be done um on the grid itself, which is why we're not just using a list. But, is why we're not just using a list. But, is why we're not just using a list. But, a list or an IEnumerable can be changed a list or an IEnumerable can be changed a list or an IEnumerable can be changed to as queryable and convert over to a to as queryable and convert over to a to as queryable and convert over to a queryable object. Just so you know, queryable object. Just so you know, queryable object. Just so you know, that's how that works. that's how that works. that's how that works. Okay. So, we're going to Okay. So, we're going to Okay. So, we're going to simulate creating or calling an API or simulate creating or calling an API or simulate creating or calling an API or calling a database. So, protected calling a database. So, protected calling a database. So, protected override override override void um I initialized. Now, if you're void um I initialized. Now, if you're void um I initialized. Now, if you're calling an API or database, it's going calling an API or database, it's going calling an API or database, it's going to be on initialized async. Just know to be on initialized async. Just know to be on initialized async. Just know that both are essentially equivalent.

that both are essentially equivalent. that both are essentially equivalent. It's just that the async one is for It's just that the async one is for It's just that the async one is for async work, whereas the um non-async one async work, whereas the um non-async one async work, whereas the um non-async one is for is for is for um synchronous work. um synchronous work. um synchronous work. Okay. We're going to say people equals Okay. We're going to say people equals Okay. We're going to say people equals I'm going to do square brackets. I'm going to do square brackets. I'm going to do square brackets. And in here, I'll say new And in here, I'll say new And in here, I'll say new and we'll say first name equals Tim and we'll say first name equals Tim and we'll say first name equals Tim last name equals Corey and age equals last name equals Corey and age equals last name equals Corey and age equals 48. 48. 48. Okay. So, there is my first record and I Okay. So, there is my first record and I Okay. So, there is my first record and I could do just that for my records, but could do just that for my records, but could do just that for my records, but instead of putting comma here at the instead of putting comma here at the instead of putting comma here at the end, I'm going to duplicate this. end, I'm going to duplicate this. end, I'm going to duplicate this. Control D if you're on Windows, which it Control D if you're on Windows, which it Control D if you're on Windows, which it should be for Visual Studio. should be for Visual Studio. should be for Visual Studio. Um Um Um Now, I've got five records here. Now, I've got five records here. Now, I've got five records here. And we'll just make some modifications And we'll just make some modifications And we'll just make some modifications here. So, Sue, here. So, Sue, here. So, Sue, uh Bob, and uh Bob, and uh Bob, and Mary and Greg. Mary and Greg. Mary and Greg. And then for last name, we're going to And then for last name, we're going to And then for last name, we're going to say Jones here.

say Jones here. say Jones here. And let's go with Lamb. And let's go with Lamb. And let's go with Lamb. And here, we'll say Smith. And here, we'll say Smith. And here, we'll say Smith. And of course, Storm. And of course, Storm. And of course, Storm. And then ages will change as well. Let's And then ages will change as well. Let's And then ages will change as well. Let's go 23 go 23 go 23 uh 51 uh 51 uh 51 37 and 62. 37 and 62. 37 and 62. So, now we have five people. Again, this So, now we have five people. Again, this So, now we have five people. Again, this is simulating pulling from an API or a is simulating pulling from an API or a is simulating pulling from an API or a database. database. database. Now, what I'm going to do is I'm going Now, what I'm going to do is I'm going Now, what I'm going to do is I'm going to say results equals to say results equals to say results equals people people people {dot} as queryable. {dot} as queryable. {dot} as queryable. So, it takes this list of people So, it takes this list of people So, it takes this list of people which is now populated and is going to which is now populated and is going to which is now populated and is going to populate that with populate that with populate that with or take that list and say as queryable or take that list and say as queryable or take that list and say as queryable and put that into results. Okay. So, now and put that into results. Okay. So, now and put that into results. Okay. So, now we have an IQueryable of person model we have an IQueryable of person model we have an IQueryable of person model called results that we can use as a called results that we can use as a called results that we can use as a grid. grid. grid. So, up here in grid demo So, up here in grid demo So, up here in grid demo in the HTML portion portion, we can say in the HTML portion portion, we can say in the HTML portion portion, we can say quick grid quick grid quick grid and the items and the items and the items equals and this is going to be results.

equals and this is going to be results. equals and this is going to be results. And we'll say class equals table. Uh by And we'll say class equals table. Uh by And we'll say class equals table. Uh by the way, that class equals table, that's the way, that class equals table, that's the way, that class equals table, that's going to be pulling from uh lowercase r. going to be pulling from uh lowercase r. going to be pulling from uh lowercase r. That's going to be pulling from um That's going to be pulling from um That's going to be pulling from um Bootstrap. So, it's applying the Bootstrap. So, it's applying the Bootstrap. So, it's applying the Bootstrap formatting for uh table. Bootstrap formatting for uh table. Bootstrap formatting for uh table. And let's call this good for now. And let's call this good for now. And let's call this good for now. And now we have this. We're going to And now we have this. We're going to And now we have this. We're going to create a property column. create a property column. create a property column. Property column, we'll say property Property column, we'll say property Property column, we'll say property uh we'll say p uh we'll say p uh we'll say p arrow p.first name. arrow p.first name. arrow p.first name. And we're going to mark this as You know And we're going to mark this as You know And we're going to mark this as You know what? Let's leave it as as is. what? Let's leave it as as is. what? Let's leave it as as is. So, now we have a property column for So, now we have a property column for So, now we have a property column for first name. Well, let's duplicate this first name. Well, let's duplicate this first name. Well, let's duplicate this couple times and say couple times and say couple times and say last name and age. last name and age. last name and age. Now, we have a quick grid. We're done. Now, we have a quick grid. We're done. Now, we have a quick grid. We're done. Like, the quick grid is in and running. Like, the quick grid is in and running. Like, the quick grid is in and running. Let's look at it. Let's look at it. Let's look at it. Make sure it runs just in case I forgot Make sure it runs just in case I forgot Make sure it runs just in case I forgot something, but something, but something, but this should um Um, give us our grid. And this should um Um, give us our grid. And this should um Um, give us our grid. And there you go. First name, last name, and there you go. First name, last name, and there you go. First name, last name, and age. Now, you can't do anything. You age. Now, you can't do anything. You age. Now, you can't do anything. You can't click on these. You can't filter.

can't click on these. You can't filter. can't click on these. You can't filter. You can't sort. You can't sort. You can't sort. There's no pagination. So, but that's a There's no pagination. So, but that's a There's no pagination. So, but that's a grid. Done. Like, we've got it. And if grid. Done. Like, we've got it. And if grid. Done. Like, we've got it. And if you wanted to, you could make some you wanted to, you could make some you wanted to, you could make some modifications to this. modifications to this. modifications to this. Um, Um, Um, but the first modification, I think the but the first modification, I think the but the first modification, I think the most important one, is going to say, uh, most important one, is going to say, uh, most important one, is going to say, uh, sortable sortable sortable equals true. So, I left this off equals true. So, I left this off equals true. So, I left this off intentionally because you can choose intentionally because you can choose intentionally because you can choose which columns are and are not sortable. which columns are and are not sortable. which columns are and are not sortable. Now, let's make them all sortable Now, let's make them all sortable Now, let's make them all sortable because I think that's valuable. But, because I think that's valuable. But, because I think that's valuable. But, then also, you know what? I want to then also, you know what? I want to then also, you know what? I want to change the alignment on age. So, I'm change the alignment on age. So, I'm change the alignment on age. So, I'm going to say, um, align equals So, now I'll change the alignment of my So, now I'll change the alignment of my ages. Now, because of how Bootstrap does ages. Now, because of how Bootstrap does ages. Now, because of how Bootstrap does the column headers, it's not quite the the column headers, it's not quite the the column headers, it's not quite the same alignment for the, uh, the column same alignment for the, uh, the column same alignment for the, uh, the column name. That's a Bootstrap thing that you name. That's a Bootstrap thing that you name. That's a Bootstrap thing that you can change. But, notice age is centered, can change. But, notice age is centered, can change. But, notice age is centered, kind of. Um, but then these ages are kind of. Um, but then these ages are kind of. Um, but then these ages are centered in that column as opposed to centered in that column as opposed to centered in that column as opposed to left align. Also, notice, like, last left align. Also, notice, like, last left align. Also, notice, like, last name is not quite the same alignment as, name is not quite the same alignment as, name is not quite the same alignment as, um, um, um, as your last name or or first name for as your last name or or first name for as your last name or or first name for first name. So, first name. So, first name. So, you know, that that's a CSS thing that you know, that that's a CSS thing that you know, that that's a CSS thing that you can play around [clears throat] you can play around [clears throat] you can play around [clears throat] around with all you want. That's just around with all you want. That's just around with all you want. That's just CSS. But, now we have age centered, and CSS. But, now we have age centered, and CSS. But, now we have age centered, and we can say last name and click on it.

we can say last name and click on it. we can say last name and click on it. And now notice the last names are And now notice the last names are And now notice the last names are sorted, sorted, sorted, which means, of course, that all the which means, of course, that all the which means, of course, that all the records are sorted based upon the last records are sorted based upon the last records are sorted based upon the last name. Or, click it again, it's now name. Or, click it again, it's now name. Or, click it again, it's now sorted in reverse. Or, first name, or sorted in reverse. Or, first name, or sorted in reverse. Or, first name, or age. age. age. So, very responsive, very quick grid, So, very responsive, very quick grid, So, very responsive, very quick grid, which is kind of why it's the name is of which is kind of why it's the name is of which is kind of why it's the name is of quick grid. quick grid. quick grid. So, that's the basics of quick grid. And So, that's the basics of quick grid. And So, that's the basics of quick grid. And if you wanted to stop there, cool. Go if you wanted to stop there, cool. Go if you wanted to stop there, cool. Go ahead and stop there. But, of course, ahead and stop there. But, of course, ahead and stop there. But, of course, I'm going to give you more than that I'm going to give you more than that I'm going to give you more than that because I think that there's other because I think that there's other because I think that there's other things you might want to do. So, let's things you might want to do. So, let's things you might want to do. So, let's make this a bit more. Right? We have make this a bit more. Right? We have make this a bit more. Right? We have five people. That's not really enough. five people. That's not really enough. five people. That's not really enough. So, So, So, what's a good demo without, you know, what's a good demo without, you know, what's a good demo without, you know, thousands of records? So, list of person thousands of records? So, list of person thousands of records? So, list of person model, and we'll call this samples model, and we'll call this samples model, and we'll call this samples equals new I'm going to say I'm going to equals new I'm going to say I'm going to equals new I'm going to say I'm going to start this off at 10,000 just to let the start this off at 10,000 just to let the start this off at 10,000 just to let the system know, "Hey, we're putting 10,000 system know, "Hey, we're putting 10,000 system know, "Hey, we're putting 10,000 items in this." items in this." items in this." And we're going to do a four. And we're going to do a four. And we're going to do a four. And we're going to say four I is less And we're going to say four I is less And we're going to say four I is less than 2,000, which I'll show you why.

than 2,000, which I'll show you why. than 2,000, which I'll show you why. Uh for each Uh for each Uh for each uh uh uh person person person Let's just say Yeah, person Let's just say Yeah, person Let's just say Yeah, person in people. We're going to say samples We're going to say samples {dot} add {dot} add {dot} add new new new first name first name first name equals equals equals uh person.first name uh person.first name uh person.first name last name last name last name equals person.last name age equals equals person.last name age equals equals person.last name age equals I. I. I. So, there's the There's a kind of tricky So, there's the There's a kind of tricky So, there's the There's a kind of tricky bit that I was going to throw in there. bit that I was going to throw in there. bit that I was going to throw in there. Um instead of Um instead of Um instead of giving the actual age of the person, I'm giving the actual age of the person, I'm giving the actual age of the person, I'm giving it the number the counter number. giving it the number the counter number. giving it the number the counter number. So, we'll have five records, one for So, we'll have five records, one for So, we'll have five records, one for Tim, Sue, Bob, Mary, and Greg Tim, Sue, Bob, Mary, and Greg Tim, Sue, Bob, Mary, and Greg respectively, but their ages will all be respectively, but their ages will all be respectively, but their ages will all be zero. And then we'll have five more for zero. And then we'll have five more for zero. And then we'll have five more for Tim, Sue, Bob, Mary, and Greg that will Tim, Sue, Bob, Mary, and Greg that will Tim, Sue, Bob, Mary, and Greg that will be age of one, and two, and three, and be age of one, and two, and three, and be age of one, and two, and three, and four, all the way up through through uh four, all the way up through through uh four, all the way up through through uh 1,999.

1,999. 1,999. Which means that instead of Which means that instead of Which means that instead of people.asqueryable, we're going to say people.asqueryable, we're going to say people.asqueryable, we're going to say samples.asqueryable. Now, just to show off a little bit, Now, just to show off a little bit, 10,000 records is not something you 10,000 records is not something you 10,000 records is not something you should be putting on a webpage, but you should be putting on a webpage, but you should be putting on a webpage, but you can do it, okay? I'm not saying you can do it, okay? I'm not saying you can do it, okay? I'm not saying you should, I'm saying it's possible. should, I'm saying it's possible. should, I'm saying it's possible. So, done. Like we can we can scroll So, done. Like we can we can scroll So, done. Like we can we can scroll through here and through here and through here and there's a lot of records here. there's a lot of records here. there's a lot of records here. But, that's that's not usable. And it's But, that's that's not usable. And it's But, that's that's not usable. And it's not something that you want the users to not something that you want the users to not something that you want the users to to be loading. It's not something that to be loading. It's not something that to be loading. It's not something that you want your database to have to load you want your database to have to load you want your database to have to load in every time or your API to have to in every time or your API to have to in every time or your API to have to send across every time. That's just not send across every time. That's just not send across every time. That's just not feasible. There's ways around this. Now, feasible. There's ways around this. Now, feasible. There's ways around this. Now, I'm not going to show you how to pull I'm not going to show you how to pull I'm not going to show you how to pull paging from your API. That's another paging from your API. That's another paging from your API. That's another demo demo demo for another day, but it is possible. So, for another day, but it is possible. So, for another day, but it is possible. So, you can say, "Hey, you can say, "Hey, you can say, "Hey, um you can put paging in this and say, um you can put paging in this and say, um you can put paging in this and say, 'Hey, API, I want the first page. Want 'Hey, API, I want the first page. Want 'Hey, API, I want the first page. Want the second page. Want the third page.'" the second page. Want the third page.'" the second page. Want the third page.'" But, let's just say you've pulled all But, let's just say you've pulled all But, let's just say you've pulled all your data. 10,000 is too much. But, your data. 10,000 is too much. But, your data. 10,000 is too much. But, let's say you've pulled all your data let's say you've pulled all your data let's say you've pulled all your data in. What do you do with it when you have in. What do you do with it when you have in. What do you do with it when you have this much stuff? Well, we're going to this much stuff? Well, we're going to this much stuff? Well, we're going to add a few things here to make this more add a few things here to make this more add a few things here to make this more interesting, okay? So, the first we're interesting, okay? So, the first we're interesting, okay? So, the first we're going to do is I'm going to add going to do is I'm going to add going to do is I'm going to add pagination.

pagination. pagination. And to do that, we're going to come up And to do that, we're going to come up And to do that, we're going to come up here to our code and we're going to say here to our code and we're going to say here to our code and we're going to say private pagination state. private pagination state. private pagination state. Let's call this pagination. Let's call this pagination. Let's call this pagination. >> [snorts] >> [snorts] >> [snorts] >> Equals new. >> Equals new. >> Equals new. And we're going to say items per page And we're going to say items per page And we're going to say items per page and I'm going to say eight, which is not and I'm going to say eight, which is not and I'm going to say eight, which is not a number you'd normally use. Normally, a number you'd normally use. Normally, a number you'd normally use. Normally, you'd use 10 you'd use 10 you'd use 10 >> [clears throat] >> [clears throat] >> [clears throat] >> or 20 or whatever. But, I'm going to use >> or 20 or whatever. But, I'm going to use >> or 20 or whatever. But, I'm going to use eight and the reason why is because I eight and the reason why is because I eight and the reason why is because I have five records. So, if I did 10 iOS have five records. So, if I did 10 iOS have five records. So, if I did 10 iOS per page, you would see Tim, Sue, Bob, per page, you would see Tim, Sue, Bob, per page, you would see Tim, Sue, Bob, Mary, Greg, Tim, Sue, Bob, Mary, Greg on Mary, Greg, Tim, Sue, Bob, Mary, Greg on Mary, Greg, Tim, Sue, Bob, Mary, Greg on each page you go through. Things never each page you go through. Things never each page you go through. Things never change. But, if I do eight, you'll see change. But, if I do eight, you'll see change. But, if I do eight, you'll see Tim, Sue, Bob, Mary, Greg, Tim, Sue, Tim, Sue, Bob, Mary, Greg, Tim, Sue, Tim, Sue, Bob, Mary, Greg, Tim, Sue, Bob. Bob. Bob. And the next page will start with Mary And the next page will start with Mary And the next page will start with Mary Greg, Tim Sue, Bob. So, it's always Greg, Tim Sue, Bob. So, it's always Greg, Tim Sue, Bob. So, it's always going to be changing. It makes it easier going to be changing. It makes it easier going to be changing. It makes it easier to visually see the pagination is to visually see the pagination is to visually see the pagination is working. working. working. Okay, but how do you add pagination to Okay, but how do you add pagination to Okay, but how do you add pagination to your quick grid? Well, that's not hard. your quick grid? Well, that's not hard. your quick grid? Well, that's not hard. At the top of our quick grid, you can At the top of our quick grid, you can At the top of our quick grid, you can say pagination equals pagination.

say pagination equals pagination. say pagination equals pagination. But, there's one more thing you have to But, there's one more thing you have to But, there's one more thing you have to do cuz right now, this adds pagination, do cuz right now, this adds pagination, do cuz right now, this adds pagination, but there's no way to go to page two. but there's no way to go to page two. but there's no way to go to page two. So, we have to come down here below our So, we have to come down here below our So, we have to come down here below our quick grid or above if you want it to be quick grid or above if you want it to be quick grid or above if you want it to be above, but usually below, and say above, but usually below, and say above, but usually below, and say paginator paginator paginator state equals pagination. Okay, and we'll self-close that. Okay, and we'll self-close that. Okay. So, now we have this additional Okay. So, now we have this additional Okay. So, now we have this additional control here. We can run this again and control here. We can run this again and control here. We can run this again and see pagination. see pagination. see pagination. So, all I did was add that that private So, all I did was add that that private So, all I did was add that that private pagination item, pagination state, and pagination item, pagination state, and pagination item, pagination state, and then attach to my quick grid and put a then attach to my quick grid and put a then attach to my quick grid and put a paginator down below, and now we have paginator down below, and now we have paginator down below, and now we have pagination. pagination. pagination. 1,250 pages. I can scroll through this 1,250 pages. I can scroll through this 1,250 pages. I can scroll through this as many pages as I want. I can go to the as many pages as I want. I can go to the as many pages as I want. I can go to the end, I can go to the beginning, and if end, I can go to the beginning, and if end, I can go to the beginning, and if we say, you know what, age, I don't want we say, you know what, age, I don't want we say, you know what, age, I don't want to sort that the other direction, now to sort that the other direction, now to sort that the other direction, now the last page is zero. Now, last page is the last page is zero. Now, last page is the last page is zero. Now, last page is 1999.

1999. 1999. So, So, So, that's another way that you can go that's another way that you can go that's another way that you can go through and through and through and kind of show your items. Again, 10,000 kind of show your items. Again, 10,000 kind of show your items. Again, 10,000 items right there. It tells us. This is items right there. It tells us. This is items right there. It tells us. This is This right here, all of this down here, This right here, all of this down here, This right here, all of this down here, is that paginator. So, again, if you is that paginator. So, again, if you is that paginator. So, again, if you don't show that, then you have the don't show that, then you have the don't show that, then you have the pagination, but you're on page one and pagination, but you're on page one and pagination, but you're on page one and you have no way of getting to page two. you have no way of getting to page two. you have no way of getting to page two. So, you only see eight records. So, you only see eight records. So, you only see eight records. All right, so that's pagination. But, All right, so that's pagination. But, All right, so that's pagination. But, let's take this even further. So, what let's take this even further. So, what let's take this even further. So, what if you wanted to create, oh, I don't if you wanted to create, oh, I don't if you wanted to create, oh, I don't know, a calculated column? So, instead know, a calculated column? So, instead know, a calculated column? So, instead of just having a a column that comes of just having a a column that comes of just having a a column that comes right from your properties, right from your properties, right from your properties, what if we wanted to create a column what if we wanted to create a column what if we wanted to create a column that came from two properties? that came from two properties? that came from two properties? Well, let's do that. So, what we're Well, let's do that. So, what we're Well, let's do that. So, what we're going to do is I'm going to going to do is I'm going to going to do is I'm going to um um um create a a sorting Well, let let's start create a a sorting Well, let let's start create a a sorting Well, let let's start with before sort. Let's create a with before sort. Let's create a with before sort. Let's create a template column itself. So, we're going template column itself. So, we're going template column itself. So, we're going to say template column to say template column to say template column and we're going to say title equals and we're going to say title equals and we're going to say title equals full name.

full name. full name. And sortable equals true. We're going to And sortable equals true. We're going to And sortable equals true. We're going to get to how to sort it in just a minute. get to how to sort it in just a minute. get to how to sort it in just a minute. Um Um Um but, inside of template column, we're but, inside of template column, we're but, inside of template column, we're going to say at context {dot} last name, going to say at context {dot} last name, going to say at context {dot} last name, {comma} at context {dot} first name. {comma} at context {dot} first name. {comma} at context {dot} first name. Now, notice I'm putting this comma Now, notice I'm putting this comma Now, notice I'm putting this comma because this is mixing our um our C# because this is mixing our um our C# because this is mixing our um our C# code and our HTML code. So, what I'm code and our HTML code. So, what I'm code and our HTML code. So, what I'm going to show is last name {comma} first going to show is last name {comma} first going to show is last name {comma} first name in this name in this name in this in this template column. But, I do want in this template column. But, I do want in this template column. But, I do want to add sorting. So, I want to create a to add sorting. So, I want to create a to add sorting. So, I want to create a sorting item or sorting element. So, sorting item or sorting element. So, sorting item or sorting element. So, down here, let's um down here, let's um down here, let's um minimize on initialized. Well, let's minimize on initialized. Well, let's minimize on initialized. Well, let's put our put our put our um um um thing below it first. thing below it first. thing below it first. Okay. We're going to say private grid Okay. We're going to say private grid Okay. We're going to say private grid sort sort sort and we're going to say uh person and we're going to say uh person and we're going to say uh person model. model. model. So, we're going to grid sort on the So, we're going to grid sort on the So, we're going to grid sort on the person model and we'll say full name person model and we'll say full name person model and we'll say full name uh sort uh sort uh sort equals grid sort equals grid sort equals grid sort person model person model person model {dot} {dot} {dot} And we can do this on a second line. So, And we can do this on a second line. So, And we can do this on a second line. So, do it on a second line. Uh dot by do it on a second line. Uh dot by do it on a second line. Uh dot by ascending ascending ascending and say we're going to sort by Well, and say we're going to sort by Well, and say we're going to sort by Well, let's sort by p.last name.

let's sort by p.last name. let's sort by p.last name. Just sort by last name. Just sort by last name. Just sort by last name. And then And then And then by then ascending by then ascending by then ascending by p by p by p p.first name. p.first name. p.first name. That way if you have two last names are That way if you have two last names are That way if you have two last names are the same, you would have the ability to the same, you would have the ability to the same, you would have the ability to sort by the first name after that. So, sort by the first name after that. So, sort by the first name after that. So, this is what we're doing is we're this is what we're doing is we're this is what we're doing is we're creating a sorting system that says, creating a sorting system that says, creating a sorting system that says, "Here's how you would sort a full name "Here's how you would sort a full name "Here's how you would sort a full name item." So, you sort of the last name item." So, you sort of the last name item." So, you sort of the last name column and then the first name column. column and then the first name column. column and then the first name column. Because that's what the combination is Because that's what the combination is Because that's what the combination is here in our template column. here in our template column. here in our template column. But you can sort by anything you wanted But you can sort by anything you wanted But you can sort by anything you wanted to, but this creates a sorting system to, but this creates a sorting system to, but this creates a sorting system that works based upon our template that works based upon our template that works based upon our template column. The last thing you do is come column. The last thing you do is come column. The last thing you do is come here and say, uh sort by full name sort. full name sort. So, that's that full name sort we So, that's that full name sort we So, that's that full name sort we created. created. created. And notice it says by ascending. This And notice it says by ascending. This And notice it says by ascending. This will flip. So, if you push the second will flip. So, if you push the second will flip. So, if you push the second time, it's going to flip that into the time, it's going to flip that into the time, it's going to flip that into the opposite.

opposite. opposite. So, let's run this now and we should So, let's run this now and we should So, let's run this now and we should have a template column, an additional have a template column, an additional have a template column, an additional column we didn't have in our model column we didn't have in our model column we didn't have in our model that's going to be a combination of last that's going to be a combination of last that's going to be a combination of last name and first name. name and first name. name and first name. There we go. Last name first name. And There we go. Last name first name. And There we go. Last name first name. And if we click on full name, now it sorts. if we click on full name, now it sorts. if we click on full name, now it sorts. Corey Tim all the way through Storm, Corey Tim all the way through Storm, Corey Tim all the way through Storm, Sue. Sue. Sue. And if we do the opposite, now Corey Tim And if we do the opposite, now Corey Tim And if we do the opposite, now Corey Tim is the end and Storm, Sue is the is the end and Storm, Sue is the is the end and Storm, Sue is the beginning. And if we beginning. And if we beginning. And if we move through here, move through here, move through here, well, it's going to be a long time well, it's going to be a long time well, it's going to be a long time before it can get to before it can get to before it can get to um the next person because of how much um the next person because of how much um the next person because of how much is in this list. is in this list. is in this list. So, So, So, that's how you would do a template that's how you would do a template that's how you would do a template column and create a custom way of column and create a custom way of column and create a custom way of sorting things. But you know what? Why sorting things. But you know what? Why sorting things. But you know what? Why finish there? Let's add another wrinkle finish there? Let's add another wrinkle finish there? Let's add another wrinkle here. What if you want to filter by here. What if you want to filter by here. What if you want to filter by something? Maybe you want to have a something? Maybe you want to have a something? Maybe you want to have a filter for last names. Okay, I think we filter for last names. Okay, I think we filter for last names. Okay, I think we can do that. can do that. can do that. So, let's start with just capturing a So, let's start with just capturing a So, let's start with just capturing a string. We're going to do this as simply string. We're going to do this as simply string. We're going to do this as simply as possible. So, private string last as possible. So, private string last as possible. So, private string last name filter.

name filter. name filter. And we'll say last name filter equals And we'll say last name filter equals And we'll say last name filter equals um I'm going to um I'm going to um I'm going to make it equal to an empty string because make it equal to an empty string because make it equal to an empty string because of the of how filters work and instead of the of how filters work and instead of the of how filters work and instead of trying to do a a nullable here. But, of trying to do a a nullable here. But, of trying to do a a nullable here. But, this is our last name filter. And then this is our last name filter. And then this is our last name filter. And then in the last name, instead of being in the last name, instead of being in the last name, instead of being closing like this, so I'll close it. closing like this, so I'll close it. closing like this, so I'll close it. We're going to come down here and close We're going to come down here and close We're going to come down here and close it it it like so. And then in the previous inside like so. And then in the previous inside like so. And then in the previous inside of this, we're going to say column of this, we're going to say column of this, we're going to say column options. options. options. And we're going to say let's create an And we're going to say let's create an And we're going to say let's create an input. input. input. And the type equals search. And the type equals search. And the type equals search. And we're going to bind And we're going to bind And we're going to bind equals the last name filter. This is equals the last name filter. This is equals the last name filter. This is what we're binding to. So, again, that's what we're binding to. So, again, that's what we're binding to. So, again, that's why we created empty string here. We're why we created empty string here. We're why we created empty string here. We're binding to our last name filter on our binding to our last name filter on our binding to our last name filter on our input. input. input. And then we're going to say at bind And then we're going to say at bind And then we're going to say at bind uh event uh event uh event is going to be equal on input.

is going to be equal on input. is going to be equal on input. So, what this does is it makes sure that So, what this does is it makes sure that So, what this does is it makes sure that every time you type, it's going to call every time you type, it's going to call every time you type, it's going to call this binding event. this binding event. this binding event. And then we're going to create on the And then we're going to create on the And then we're going to create on the next line here uh placeholder next line here uh placeholder next line here uh placeholder that says uh filter by last name. that says uh filter by last name. that says uh filter by last name. Something like that. And then we're Something like that. And then we're Something like that. And then we're going to self-close our input. Okay. So, going to self-close our input. Okay. So, going to self-close our input. Okay. So, now we've created we've expanded our now we've created we've expanded our now we've created we've expanded our property column. We put inside of it a property column. We put inside of it a property column. We put inside of it a column options, which inside of that is column options, which inside of that is column options, which inside of that is an input, a text input. It's a search an input, a text input. It's a search an input, a text input. It's a search input and it's going to say, "Hey, I I input and it's going to say, "Hey, I I input and it's going to say, "Hey, I I want you to search uh based upon last want you to search uh based upon last want you to search uh based upon last name filter." I'm buying to last name name filter." I'm buying to last name name filter." I'm buying to last name filter. filter. filter. But, that doesn't do anything quite yet. But, that doesn't do anything quite yet. But, that doesn't do anything quite yet. Which is what we're going to do is we Which is what we're going to do is we Which is what we're going to do is we come down here after our our grid sort come down here after our our grid sort come down here after our our grid sort here. here. here. We're going to say private IQueryable We're going to say private IQueryable We're going to say private IQueryable of type person model. If that sounds of type person model. If that sounds of type person model. If that sounds familiar, that's because that's what the familiar, that's because that's what the familiar, that's because that's what the the quick grid takes. We're going to say the quick grid takes. We're going to say the quick grid takes. We're going to say filtered people.

filtered people. filtered people. And we're going to create not a method, And we're going to create not a method, And we're going to create not a method, but we're going to create a a read-only but we're going to create a a read-only but we're going to create a a read-only property. So, get. property. So, get. property. So, get. And then in here, we're going to say And then in here, we're going to say And then in here, we're going to say var, we'll call it query, equals var, we'll call it query, equals var, we'll call it query, equals results. That's the starting point. So, results. That's the starting point. So, results. That's the starting point. So, results here is our IQueryable that's results here is our IQueryable that's results here is our IQueryable that's currently displaying all of our records. currently displaying all of our records. currently displaying all of our records. And then we're going to say And then we're going to say And then we're going to say um um um if if if string is Oops. string is Oops. string is Oops. String is null or white space for last String is null or white space for last String is null or white space for last name filter name filter name filter equals false. So, if there's something equals false. So, if there's something equals false. So, if there's something in in in the the the um last name filter, then we're going to um last name filter, then we're going to um last name filter, then we're going to do something. do something. do something. But, otherwise, either way, I guess you But, otherwise, either way, I guess you But, otherwise, either way, I guess you could say, we're going to return could say, we're going to return could say, we're going to return query. So, if there's nothing in last query. So, if there's nothing in last query. So, if there's nothing in last name filter, we're going to skip this if name filter, we're going to skip this if name filter, we're going to skip this if entirely and just return query, which entirely and just return query, which entirely and just return query, which remember, query is just the results.

remember, query is just the results. remember, query is just the results. But, what we'll do is we'll then bind But, what we'll do is we'll then bind But, what we'll do is we'll then bind this this filter people here and we're this this filter people here and we're this this filter people here and we're going to come up here to our items. going to come up here to our items. going to come up here to our items. Instead of results, we're going to bind Instead of results, we're going to bind Instead of results, we're going to bind to filtered people. So, if nothing's in to filtered people. So, if nothing's in to filtered people. So, if nothing's in the filter, then we just put the whole the filter, then we just put the whole the filter, then we just put the whole list there. But, if something is in our list there. But, if something is in our list there. But, if something is in our last name filter, we're going to do last name filter, we're going to do last name filter, we're going to do something with it. What are we going to something with it. What are we going to something with it. What are we going to do do it? Well, we're going to say, do do it? Well, we're going to say, do do it? Well, we're going to say, query, query, query, which is our our new variable here. which is our our new variable here. which is our our new variable here. Query equals query Query equals query Query equals query .where and we'll say, p arrow p.lastname and we'll say, p arrow p.lastname .contains and we'll say, lastname filter. and we'll say, lastname filter. And we're going to say, string And we're going to say, string And we're going to say, string um comparison um comparison um comparison .uh .uh .uh ordinal ignore case. ordinal ignore case. ordinal ignore case. So, we're going to ignore the casing for So, we're going to ignore the casing for So, we're going to ignore the casing for this, but we're going to this, but we're going to this, but we're going to um um um filter this query. So, this is why we filter this query. So, this is why we filter this query. So, this is why we put it into a new variable. If we had put it into a new variable. If we had put it into a new variable. If we had this results variable, we could have this results variable, we could have this results variable, we could have just used this, but we're now filtering just used this, but we're now filtering just used this, but we're now filtering the the query down to just a subset of the the query down to just a subset of the the query down to just a subset of the original results, which is why if the original results, which is why if the original results, which is why if you ever cleared it out, you'd want you ever cleared it out, you'd want you ever cleared it out, you'd want those results back, therefore those results back, therefore those results back, therefore this is what happens.

this is what happens. this is what happens. Okay, so now we have a filter. So, let's Okay, so now we have a filter. So, let's Okay, so now we have a filter. So, let's run this. Wait for it to load. Wait for it to load. And what it's going to do is it's going And what it's going to do is it's going And what it's going to do is it's going to give us a little option right here to give us a little option right here to give us a little option right here next to last name. Notice this little um next to last name. Notice this little um next to last name. Notice this little um column options, which is why we're not column options, which is why we're not column options, which is why we're not fully left aligned. There's a space for fully left aligned. There's a space for fully left aligned. There's a space for this element. this element. this element. If it's going to be there. If it's going to be there. If it's going to be there. So, this little element right here says, So, this little element right here says, So, this little element right here says, "Hey, filter by last name." Well, if I "Hey, filter by last name." Well, if I "Hey, filter by last name." Well, if I type in here, let's type l a m b, now I type in here, let's type l a m b, now I type in here, let's type l a m b, now I have 250 results or 250 pages, 2,000 have 250 results or 250 pages, 2,000 have 250 results or 250 pages, 2,000 results that just have Mary Lamb. Now, I results that just have Mary Lamb. Now, I results that just have Mary Lamb. Now, I go to page 250, and I would say, "You go to page 250, and I would say, "You go to page 250, and I would say, "You know what, clear out Mary Lamb." Now, know what, clear out Mary Lamb." Now, know what, clear out Mary Lamb." Now, I'm 250 of 1250 I'm 250 of 1250 I'm 250 of 1250 and I'm a thousand I have 10,000 items. and I'm a thousand I have 10,000 items. and I'm a thousand I have 10,000 items. That's not quite ideal, cuz every filter That's not quite ideal, cuz every filter That's not quite ideal, cuz every filter something, you probably should go back something, you probably should go back something, you probably should go back to the beginning. to the beginning. to the beginning. Back to here. Back to here. Back to here. Because what if you're on page 300 and Because what if you're on page 300 and Because what if you're on page 300 and your filter only has 250 pages? In fact, your filter only has 250 pages? In fact, your filter only has 250 pages? In fact, let's do that. Let's let's do that. Let's let's do that. Let's um sort by, I don't know, last full um sort by, I don't know, last full um sort by, I don't know, last full name, which is last name, Sue Storm. And name, which is last name, Sue Storm. And name, which is last name, Sue Storm. And we're going to say, "You know what? I we're going to say, "You know what? I we're going to say, "You know what? I only want to see Corey."

only want to see Corey." only want to see Corey." Well, it moved me from page 1250 to 250. Well, it moved me from page 1250 to 250. Well, it moved me from page 1250 to 250. Which Which Which that that's good. I'm not on empty page, that that's good. I'm not on empty page, that that's good. I'm not on empty page, but it's not good in the fact that I but it's not good in the fact that I but it's not good in the fact that I really should be here on page one. So, really should be here on page one. So, really should be here on page one. So, we can adjust that as well, if you want. we can adjust that as well, if you want. we can adjust that as well, if you want. So, I'm going to create one more So, I'm going to create one more So, I'm going to create one more element. I'm going to create a private element. I'm going to create a private element. I'm going to create a private task of type reset page. And I'm just going to do a simple arrow And I'm just going to do a simple arrow function here that says pagination function here that says pagination function here that says pagination .set current page index async to be .set current page index async to be .set current page index async to be zero. Push to the zero page. zero. Push to the zero page. zero. Push to the zero page. And what do we do to use this? Well, And what do we do to use this? Well, And what do we do to use this? Well, we're going to come up here to our um we're going to come up here to our um we're going to come up here to our um our column options. And after place or our column options. And after place or our column options. And after place or before place, or you know what? I'm before place, or you know what? I'm before place, or you know what? I'm going to do before because we have all going to do before because we have all going to do before because we have all of our events in in line. So, I'm going of our events in in line. So, I'm going of our events in in line. So, I'm going to say at to say at to say at and then we're going to say bind and then we're going to say bind and then we're going to say bind after equals reset page.

equals reset page. So, after So, after So, after you do something. So, bind after. So, you do something. So, bind after. So, you do something. So, bind after. So, our event is on a input. We're going to our event is on a input. We're going to our event is on a input. We're going to do that first. And then afterwards, do that first. And then afterwards, do that first. And then afterwards, we're going to call reset page, which is we're going to call reset page, which is we're going to call reset page, which is going to set the page to be zero. going to set the page to be zero. going to set the page to be zero. So, now, if we run this, So, now, if we run this, So, now, if we run this, what's going to happen is, no matter what's going to happen is, no matter what's going to happen is, no matter what page we're on, when we do the what page we're on, when we do the what page we're on, when we do the filter, it's going to move us back to filter, it's going to move us back to filter, it's going to move us back to page one. This is up to you, but I think page one. This is up to you, but I think page one. This is up to you, but I think this makes the most sense. So, I'm on this makes the most sense. So, I'm on this makes the most sense. So, I'm on the last page, 1250 out of 1250, and I the last page, 1250 out of 1250, and I the last page, 1250 out of 1250, and I want to filter and say lamp. want to filter and say lamp. want to filter and say lamp. Notice I'm on page one now of 250, not Notice I'm on page one now of 250, not Notice I'm on page one now of 250, not page 250 of 250. So, that is kind of page 250 of 250. So, that is kind of page 250 of 250. So, that is kind of gives you a better experience. You do gives you a better experience. You do gives you a better experience. You do have to think through what do we expect have to think through what do we expect have to think through what do we expect to happen? Because maybe you expect to to happen? Because maybe you expect to to happen? Because maybe you expect to be on the last page or maybe you expect be on the last page or maybe you expect be on the last page or maybe you expect to be on the first page but only if, you to be on the first page but only if, you to be on the first page but only if, you know, certain things occur. That's up to know, certain things occur. That's up to know, certain things occur. That's up to you to figure out but you now have the you to figure out but you now have the you to figure out but you now have the tools to figure that out. So, that's tools to figure that out. So, that's tools to figure that out. So, that's QuickGrid. So, you can put things on QuickGrid. So, you can put things on QuickGrid. So, you can put things on very easily. You can add sorting very very easily. You can add sorting very very easily. You can add sorting very easily. Pagination is very easy.

easily. Pagination is very easy. easily. Pagination is very easy. Filtering is very easy. Filtering is very easy. Filtering is very easy. Template columns is very easy. Working Template columns is very easy. Working Template columns is very easy. Working with events, very easy. Lots of stuff with events, very easy. Lots of stuff with events, very easy. Lots of stuff you can do here in QuickGrid, which is you can do here in QuickGrid, which is you can do here in QuickGrid, which is why it's called QuickGrid because it's why it's called QuickGrid because it's why it's called QuickGrid because it's just so easy to do. All right? If you just so easy to do. All right? If you just so easy to do. All right? If you want the source code for all of this, want the source code for all of this, want the source code for all of this, um there's a link down in the um there's a link down in the um there's a link down in the description to download that. Just go description to download that. Just go description to download that. Just go ahead and get that. All right? Thanks ahead and get that. All right? Thanks ahead and get that. All right? Thanks for watching. As always, I am Tim Corey.