Blazor DataGrid in .NET 8 🔥

hey friends thank you so much for dropping by now with net 8 coming up we have a data grid included built in within.net 8 and Blazer so this is what we want to have a look at today the quick grid it is and just so you know my birthday was recently and I got a Spider-Man cake from my beautiful wife with this little guy here so maybe Focus Spider-Man might be able to help us today let's see so now let's start with the tutorial here I am with the preview edition of Visual Studio to be more exact it is version 17.6.0 preview 7.0 this is what you need if you for now want to use the preview Edition of.net 8 so that's the right one looks a bit differently right so we just open a new project a Blazer webassembly app it shall be and we call this Blazer grid.net eight maybe I will also push this to GitHub but please keep watching would be very nice of you if you just still keep watching and not go directly to the video description but if you want of course just grab the code and you're done dot net 8 preview right not at 567 it is.net 8 now and I also want to use Aspen co-hosted because with that we get the weather forecasts by default from our web API and this is what I want to use actually in this little quick grit example typical stuff I think you know the drill here our pages and this is what I wanna use actually please go away and here you see the weather forecasts right from our controller down here great stuff and for now we have a table but I want to use Quick grid now now the thing is that I don't know why maybe you know more than I do but still I had to add the nuget package I was just looking for it and there it is right Microsoft ASP and core components quick grid but you see it here version 8.0.0 preview three it is so what you can do is we can actually grab this and add the nuget package with the CLI or since I want to click now right click the clients project and manage nuget packages and then we go to browse and in here we enter quick grid and if you don't see this entry here let me just try to okay quick rid not the Entity framework adapter just quick grid make sure to select this little checkbox here I don't know what that is sorry about that I'm sure it's great stuff but I want to use Microsoft aspin core components quick grid 60k downloads not that much but I think we will get way more with the release of.net 8 so that's the one also again pre-release 8 just install this thing and then we are free to use this and let me close that here we are all right the first thing is we need an IQ variable as our for our list of items that we can use and we can actually do this a bit dirty so we use Quick grits the component and let me adjust with control period at the using directive here so you see it here Microsoft Aspen components quick grid it is we open that and here now doesn't like that because we have no items right so what we now have to do is we set them in our case these are again the forecasts as variable all right and that's it this is how it's done when we run this well let's let's have a quick look right we just start this and then I think we should definitely see our our table there it is fetch data but that's not the quick grid right so we have to define the columns we want to see all right so it doesn't work completely out of the box there are other data grids that will just grab everything from the objects that it receives and then just displays all the columns all the properties but not with quick grid here you have to Define every column I think this is not a big drawback really because in the end you want to do that manually anyways I think because lots of times there are properties you don't want display in a grid but anyways this is just my opinion here so what we want to do is we add a so-called property column and Define the property and the first thing is the date so now f for forecast we say please show me the date and we can already format this but let's just continue like that and make the adjustments then a little later so the date it is and we also got you see it here the temperature temperature not bad Celsius Fahrenheit and the summary all right so now here we say this is the temperature C this is the temperature f and you know the beautiful summary we save that I don't know why I have to do this but I have to restart the application sometimes Visual Studio is giving me a hard time and here you see that now this is our data grid well about the looks debatable right but you can fix everything really when we have a look at the page of the quick grid there it is actually you see the samples and here now down there you see styling and you see you can just this is awesome right so now here you can Define of course your CSS stuff when you want to use Tailwind CSS I think with that I definitely will um create another video about Tailwind so if you want to see one please give me a like and write it down in the comments then maybe I will prioritize Tailwinds a bit more uh but anyways you can just change the complete looks here The Styling and you also see what you can actually do with quick grid like paging filtering sorting and so on and we will have a quick look at some of these features as well in this video here so this first the data right what I don't like of course is also the title of the column so maybe we can fix that well this is pretty simple we can well that is actually alright but here now we can say the title is temp and then C maybe a Capital C and same thing just copy and pasting here for Fahrenheit save this did it change nope see that although I checked that I'll reload on file save doesn't really work I don't know why maybe you know it please tell me why in the comments now it is rebuilding and here we have the other titles okay so this is already nice then I promise to change the format of the date so let's have a look here we can also do that with format and then for instance we want to see the actual name of the day so that would look like that all right we save this reset our application and there we are this is great another thing I really love is sortable and with that I know I'm rushing through this here but this just demonstrates that it's really really easy to do that and in just a couple of minutes you have a fully functional data grid included into.net 8 and this is really nice so as you can see now we can actually here not here because I haven't added this I don't know why but I didn't and with that now we can sort this isn't that nice now there are two or three three more things I wanted to show you these are just the default property columns but of course you can do more for instance if you want to add a filter in a certain column then what you can do is we can just open this little component here close it and then in here now we say column options and here now we add a little input like that and when we now have a look then you see this little menu here and we could now do something in here maybe this is something for another video again please write it down in the comments if you want to see that a filter for instance needs a bit more code but I think get the idea the idea here that you can do lots and lots of stuff anything in essence with the data that is provided here you can add a filter you can add min max values you can I don't know show some additional information about the data whatever you want to see and the next thing if you for instance want to use a button to open a modal dialog to edit an entry for that you don't need the column options you need a template column and this is done like that so here we just add a completely new column with this template column and in here now we could for instance do something like that which is pretty simple stuff like just add another span with some more information so maybe you want to want to add some nested information you have a project Row for for instance this project then has some project details that is nested to that object I think you get the idea then you can access this here because the data grid by default wouldn't show it here maybe of course you would just add the nested object here as well and maybe I don't know for some reason you just want to change that then we say for instance it's really and then context because with context this is the actual object we get in this row so you see no for each or something like that necessary no virtualized component necessary here this is how it's done with quick grid we have our context and then here we can access the summary and we just assume There's a summary and it's not now that's why I added the exclamation mark here and with to lower we say it's really so and so today we restart the application and with that we can edit or do something with every single entry here and now if we sort this then it's Milt balmy warm freezing and sweltering today right and another thing again if you need more options like adding a button and do something then with the complete context you can do this as well of course really like that because I get asked this a lot how do you use a button to do something with a row with an entry in a data grid so here we use bootstrap for our little styling button primary and now we use the on click event to call the function and we will add the function in a sec so we add a little Lambda expression because we need an argument here function show it to me why not and here I just want to display something from the weather forecast in the console so that's the function yes we will add it in a sec and maybe we can just add a little icon that should be enough so I and then class o i o i cloud funny right the cloud that this works now with the weather stuff but I think it is actually in tenants the use for this stuff is there's another intention there behind the cloud icon anyways so this is our button and now the function down here let's say public void show Almost show it to me we get a weather forecast entry and here now we just say console right line and now here we say it will be forecast summary to lower something like that I hope so let's restart the app again and we need the console now all right so this is really big and here now we see our beautiful Cloud buttons and we can say it will be sweltering it will be again sweltering for me it will be hot and racing isn't that nice so this already works and again if you now want to open a dialog and transfer the data or provide the the data off this entry here in this dialog you can do that as well pretty much the same way another last thing I want to show you in this quick demonstration to spread the word really for the quick grid is pagination all right how would you do that well first we need more weather forecast so we go to the weather forecast control line instead of just um generating five entries we actually want to get 50. it's not rebuilding Jesus and here now okay this looks this looks better real quick thank you so much for watching my tutorial so far but if you want to support me even further for free totally please hit the like button and maybe even subscribe to my channel it would help a lot it really does make a difference so thank you very much for considering and now let's continue with the tutorial and what we can do is we need actually a paging nation state all right so this comes also from the quick grid so page nation state there you have it see it here make Microsoft Aspen core components quick grid pagination state which is called as page Nation this is a new pagination state and by default we can say items per page is 10 and of course I got this from their website so please have a look there if you want to read this as a tutorial so items per page is 10 and then up here we save pagination is pagination all right well question is is this enough well let's see almost we have 10 entries but where are the buttons to well run through the pages and switch them right so we have to add one more thing and this is another component called paginator I love that name and the state here now is at almost at pagey Nation all right and now restart the app there it is and we see our paginator 50 items are there and we can run through them of course again we can also sort everything for instance regarding the temperature and now we get all the entries isn't that nice so this is a really cool quick demonstration of the quick grid quick demonstration of the quick grid hope you liked it and learned something if so please hit the like button and subscribe to my channel does make a difference maybe you also want to check out my newsletter thank you very much for that and thank you for watching and I see you next time take care

Channel: Patrick God

Views: 11,729

Keywords:

Id: ryA2r1m5f8M

Length: 16min 25sec (985 seconds)

Published: Tue May 16 2023