Blazor - Easy Grids with QuickGrid - Filtering, Paging and Sorting!

in this video we are going to see a Blazer component that makes our life easy when we have to work with grids the idea is that sometimes we may want to present data in a table format and we may want to filter sort and paginate in a very easy Manner and for that we can use the quit grid component this is a component that was created by Microsoft and as you can see here we have an example I can easily order by name or by this column or by the silver column or the bronze column and also we can page in it as you can see here so the first thing that we're going to do in this video is that we're going to see an example of how to use this component with data in memory after that we are going to use the same component but with data that comes from a web API so let's get started let's go to visual studio I will create a Blazer webassembly application this component also works with blazer server but in our case we are going to use it with blazer webassembly so let's click on next I'll say Blazer grid demo Eng next I'm going to be using the S7 and aspironet core hosted and I'll click on create the first thing that we're going to do is that we're going to install the package so let's go to the client project let's go to manage nugget packages I'll go to browse and I'll paste the name of the package which is Microsoft SB net core component squid grid make sure you check include pre-release because this component is only in pre-release mode so let me click on install accept and also just so that we can have test data in a really easy manner we are going to install the faker.net package so let me install this accept now let me create a model that we're going to use for our first example it is going to be a personal model so we're going to go to the share project and we are going to create a class person and I will paste this here as you can see we have several properties like ID first name last name score active and date of birth and now what we want to do is to have some test data so that we can show it in a grid so for that we're going to go to the index component so let's go to Pages index and in here I will create a code section so that we can write this our code I'll just say public list person get people this is going to be a method for getting test data of a person or a list of people by result equal to new list of person and then we're going to return that and in here we are going to create 100 people and as you can see here we are doing just that we're creating 100 people and we're using the faker.net library to get a random first name a random last name a random data birth a random Boolean and also a random number that goes from 0 to 100 now after that I'm going to come here and I'm going to create two properties which are going to store our collection of people I'm going to use aquarable because that is that data type that a quick grid component has to use have to receive so let's say here person I'm going to call this one original people which is going to have the original list of people and also I will repeat that and I will have a aquarable of people which is the one that I'm going to pass to the quickery component now let me say Protect it override or initialize and I'll say original get people and ask variable asquarable because this returns a list of person and then after that I will say people equal to original people again as we said we're going to do a first example with data in memory so now let's get to use our component so let's come here I'll say quick grid control dot to import this namespace and then after that I want to say items and I'm going to pass people let's make a first simple example I'll say property column a property column component allows me to put a column in the quick grid with the data of one of the properties in this case of a person so I will say property I have to use a land expression here and say for example ID so let's see what we got let me press Ctrl F5 to run our application and as expected we have this simple table with a single column with the ID value and as you can see it goes from 1 to 100 now this is really boring so let's see what we can do something simple that we can do is to say here sortable equal to True which is going to allow me to sort by this column and also since as you can see it is ordered by default in an ascending manner I should say here is default sort sort Direction ascending now let me put this in another line so that you can visualize everything better let me compile and let's go back here and as you can see we can now sort by this column as you can see here now it is in descending order and now it is in ascending order now let's add the rest of the columns now as you can see we have the rest of the columns from first name all the way through active and also I'm marked all of them as sortable now let's see what we got let me compile and let's go back to Google Chrome and as we can see here we have all of the data and we can also sort by the different columns that we have of course as we may imagine if I don't want to sort by a column I can just put this as false but in my case I'll just leave it as true we can also control the title of a column for example here we have first name but I want to have it into words first and name so I can do the following I can come here and say title first name compile and let's go back here and as you can see we have first name another thing that I can do is to align the content of a cell for example this is a number and I want to have it so that it is aligned at the right of the cell so let's do that let's go back here and let's go to a score and let me say align align right I want to have it at the right so let's compile let's go back here and let's see that indeed now the score is aligned at the right also I can control the format of the content of Excel for example I want to control the format of this date of birth I can do that let's come back here and let's go to date of birth and let's say format and I can choose whatever format I want for example I can use DD mm and a year now let's compile and let's go back here and as you can see we have modified the format we can also use Expressions to transform the data of a cell for example let's say that I want this last name to be uppercase so let's do that let's come back here and what I can do is to say here in last name to oper so as you can see I can use arbitrary c-sharp code to transform the data of a cell as you can see here but if you do that keep in mind that now I have to put the title explicitly so let's go back here and let's do it let's say here title last name and that will fix this issue if I need more freedom I can use a template column so far we have been using property column which allows me to present a simple value but what if I want to put for example a checkbox or a button for that we can use a template column so let's see an example of that let me say here template column and I'll put a Title Here actions and then I will say button I'm going to put here a bottom let's say that it is an edit bottom let's say class bottom bottom primary and then I will say on click and I will use a land expression so that I can say edit and I will pass contacts where context just means the data of the person now let me create this method let's come here I'll say private void 8 person p and what I want to do is to put a message in the screen so let me say here prop a string message I'll make this nullable and let's come here paragraph message and then I'll come here and I'll say message equal to editing P DOT first name semicolon here and of course I need to concatenate this now let's compile and let's see what we got let's come back here and as you can see here we have an edit button and if I click on here for example we have editing Francesco or for example Alfonso or whatever person I click now let's work on filtering let's suppose that we want to filter if the person is active or not so for that we're going to go back here and first I need to have a reference of the query component because after we filter the I queryable I need to refresh the quick grid and for that we need to have it in a variable so let's come here and I'll say quick grid of person and the name of the variable is going to be grid and in here I will use the ref Parts reviewed and I'll put here grid so that now we can have a reference of the quick grid instance in this variable and then we're going to put a pop-up in this active column so let's come here I will expand this property column I'll say column options I'll put a label input type checkbox I'll use a bind active only we're going to create that variable in just a moment and also we're going to use bind after because I want to execute an asynchronous function every time we click on this checkbox so I will say filter and let me say here active only now sadly at the moment we're recording this video there is a bug with mine after which is why we have this red squiggly lines as if they are indicating that we have an error but we don't have any errors this is because of a bug hopefully in the future this will be fixed for now we just have to tolerate it so let's go to here and I want to create a private wool active only and also let's create this filter method so let me copy this and let's come down here and let's create this filter method and I will say if active only here is where we're going to use our original people I queryable because I'm going to say people equal to people original dot where active so we're filtering out the inactive people and also I will say else people equal to original people because in this case we don't occur if the person is active or not and now we have to refresh the grid so we're going to say await grid refresh data async remember that this grid variable holds a reference to the instance of the quick recomponent and now we're ready to test let's compile and let's go back here and we're going to see that I can click on here and I can say only active and let's see that for example we have Dave which is false here and if I click on here now we don't have Dave anymore and if I uncheck this we have Dave back in So as you can see it is really simple to filter using this component another thing that it is really simple is to paginate let's see that let's come back here we need a pagination state which is going to hold how many items per page we want to show and now I have to copy this and come here to the query component and say pagination pagination and below the component we can put the pollinator component which is the one that is going to allow us to navigate through the different pages of the component and that's actually it with this we're good to go let me compile and let's come back here and as you can see we are only displaying 10 items per page I can go forward in the list of pages and I can also go back and we have that we have 100 items and if I click on here and filter now as you can see we only have 69 items and only 7 pages and of course if I remove the filter then we are about to have 100 items and 10 pages now so far we have only been using data in memory but this may not be realistic in some scenarios for example if we only have say something like 500 records it is fine to use data in memory but if we have thousands of Records then it may be wise to use a web API so let's see that in face data we have an example of data being retrieved from a web API so what we are going to do is that we're going to take this data from the web API and we're going to use our quick recomponent so let's see that let's come back here let's go to the fetch data component fetch data and I will delete this because I don't really need it for this example I will also delete this and I don't need this method to be asynchronous so let me delete all of this and let me use here void and let's get to work the first thing that I need is to use this grid items provider delegate that is the one that is going to pass the data to the query component now I will also have a bull here loading equal to True by default and then in here I'm going to say weather forecast provider equal to async rec and here as we mentioned this is a delegate so while we're assigning to it is a function let me put a semicolon here this rack comes from the query component and it has some data for example it has over what column the user wants to sort we're going to see an example of that in just a moment for now let me cut this and paste it here and I'm going to say here bar response equal to and then I will say loading equal to false I need to use a state has changed so that I can update the UI and then return with e times provider result from items response which is the data from the web API and also I have to pass the total item count and for that I can say count semicolon here now let me come here and let's say the following I need to have a div that is going to show if loading is equal to true and I'll do the same for the div that is going to show the grid so if loading is false then we are going to show this div and we're going to hide this one and then I will use our quick recomponent here I have to say items provider and we are going to pass our weather forecast provider and now I will pass the four columns date temperature temperature in fahrenheit and summary now let's make a first test let me compile my application and let's come back here and you are going to see that we are going to get a different UI for the data which is the create great UI this is great this is working but now let's say that I want to sort by this column that we have here so how can we do that well now it is a little bit harder because I need to go to the web API and I need to implement that sorting logic so let's see that first let's come back here and let me say that I want to sort by these column so I will say sortable equal to true and also because this is in ascending order by default I have to put that here is default sort sort Direction ascending now as I mentioned before here in this delegate we have this Rec parameter which contains data about the quick grid and with this we're going to be able to see over which column the user wants to sort in our case we are only allowing the data to be sort over the date column but the code that I'm going to show you will work even if you you have the ability to sort over multiple columns so let me come here and first let me say Sorry by ascending this is going to allow me to know if the user want to sort in an ascending manner or a descending Manner and also let me say column over which column does the user want to sort so let me say Rec store by column title semicolon here and now I can pass this data over to the web API by using query strings so let me come here and let me say I want to make this I want to use stream interpolation query strings I'll say sort by ascending here equal to this Ampersand column column all right with this we're passing the data over to the web API now I have to go over the weather forecast controller so that we can implement the fact that we want to sort by the date column so here I'm going to do the following I'm going to paste these parameters and then I'm going to put this in a variable result equal to I'll delete this return result and here in the middle I'm going to say if column is equal to date to the date column then we're going to say if sort by ascending and of course here is where you can use either Entity framework or ado.net or Dapper to modify the query so that you can go to the data store to your data table and do either the filtering or the Sorting or whatever in our case we are working with data in memory in our API so I only have to do this using linkq so let me say here result equal to result order Y and I want to order by date otherwise if sort by ascending is false then I want to order by descending so let me say order by descending and let me say that here also and that's actually it with this we're good to go let me let me press Ctrl F5 to run our application and here as you can see we have that we can sort by this column of course you are seeing these numbers change because this is data that That Is Random so it is randomly generated every time we hit this end point but that doesn't matter what matters is that indeed we were able to implement sorting by using the quickly component and also of course as we saw if you have data in memory then it is very easy to do this because everything is done for you only if you are using a web API you have to work more because you have to implement all of the logic yourself if you want to learn more about Blazer please buy my udemy course today I also have courses about Entity framework or concurrency in c-sharp and more link with a discount in the description of this video thank you

Channel: gavilanch3

Views: 8,372

Keywords:

Id: sVrWK5GAPgU

Length: 20min 25sec (1225 seconds)

Published: Sat Jan 21 2023