Radzen Blazor Component Library for Blazor WebAssembly & .NET 6 🔥 Intro / DataGrid / Line Chart

hello my friends patrick god here welcome to my channel thank you very much for clicking on this video and today it is about another blazer ui component library some of you mentioned ratson blazer in the comments and told me about reds and blazer and then i thought well maybe i should have a look into reds and blazer and now i did so in this tutorial we will create a blazer web assembly project asp.net core hosted because i wanted to get a lot of weather forecasts you know the drill the example application from microsoft in.net six well also in the other.net versions but anyways in blazer webassembly when you create an example project then you get the weather forecast controller with some data and this is what we will use because then we can display all these forecasts for instance in a data grid so we will have a look at the data grid of reds and blazer and then also i wanted to have a look at the charts because i think they look pretty nice and this is what we're going to do in this tutorial and that's pretty much it and if you like this tutorial and learn something i would really appreciate it if you click the like button maybe even subscribe to my channel don't forget to hit the bell icon to get a notification for new videos and also if you want to get these videos here earlier in your inbox and maybe also early access to the upcoming.net web developer bootcamp and other courses i create then maybe you want to have a look at my newsletter please check out the links in the video description and then just sign up i promise at max i send an email once a week and then well you get some information and free stuff regarding.net and blazer web assembly and last not least of course everybody thank you so so much for all your support for all the coffees teas hot chocolates whatever it is i love you guys forever and if you want to support me as well then please have a look again at the video description for the links for kofi and buy me a coffee great stuff so thank you very much already for all that and thank you very much for watching and now i stopped talking enjoy the tutorial all right here we are visual studio 2022 we create a new project let's create a blazer web assembly app and let's call this redson blazer first look maybe because this is what it is a first look at reds and blazer and we use certain tx no authentication https and i want to use asp.net core hosted here not necessary at all for this little test or a little example application but i want to use the weather forecast example of microsoft and with that when we use the asp.net core hosted version we can well add more than just five forecasts so maybe this this might be interesting for the components of red zen blazer all right here we are we've got our client project the server project and the shared one and the very first thing we have to do is install reds and blazer of course and for that i would say we just have a look at their websites so here it is just google for reds and blazer or go to blazer.redson.com and then you already find the components here and when we go to get started here we see how to install this thing so i would say let's do that together i want to use the package the nuget package manager here so back to visual studio we right click the client project manage nuget packages and on the browse tab let's have a look for ratson and there it is 1.35 million downloads not bad at all all right and when this is installed the next step is we import redson and retzen blazer in our imports eraser file so let me close this and this yes we save this and here now we add this thing and what was the rest of the laser it was what's the name space here all right okay now with that we have to include a theme and now for blazer rep assembly we go to our www root folder and then the index.html there it is and this is actually actually pretty similar to modblazer or at least the installation of mudblazer so if you want to have a look there i've got a video about mudblazer as well and whoops that was wrong got this diet sheet no don't see talking and copy pasting this stuff is not that easy i wanted to use this thing here the js file now that's correct and uh regarding this thing here we don't have to include bootstrap actually do we because it is already here as well so i guess this is sufficient here so if you still want to use bootstrap make sure to to add this line or just keep it there or if it doesn't work you can also use this line here so not the base css file but just the default css file after that then the js file and then we have to don't want to use a component yet we can also add these here so if you want to do more let's just add them dialog notification context menu and the tool tip so this has to be added to the main layouts shared main layout they there they are and then in our now program csmith.net6 we also register these services okay and we have to add the namespace here of course using redson and then this should work so i would already say we test this we shouldn't see anything regarding reds and blazer but we will in a minute but first let's let's see if the application starts just takes some time but this looks good i guess okay here the weather forecasts see that only five forecasts and we can change that in the controller for instance let's add 50 yeah why not so let's restart this thing okay so now we've got 50 forecasts here and why did i do this well i want to test the data grid of reds and blazer and well it's nice to have some data here instead of just five entries right so regarding the forecast let's go back to this page here with the fork is the data grid we can go to explore demos and there you see it already this is the data grid for instance of redstone blazer and now i would say we just implement this thing a simple one really for this first look here so we can go to our fetch data page and here we see the table let me close the other ones maybe so we see the table here and here's the call to our forecasts and now just on top let's add the data grid all right and the component is called redson data grid so pretty simple i guess and the first thing we have to add here is the actual data not like that like that this is the parameter here and these are our four casts yep and there they are all right so these are our forecast we can also add the type for each item this is now our weather forecast class and for now this is okay but we have to also add the columns because when i just save this and refresh the page we don't see anything almost i think isn't this the data grid let me let me double check i really have to test this here yeah this seems to be the data grid okay so we don't see anything now this is different to other component libraries already for instance if you use devexpress or devextreme never know what the correct name is then i think you can already use just that and put the data so there is a data grid and when you put the data source here it already works out of the box takes all the properties and displays the columns then there but you know every library is different and i just want to have a first look here and then you decide what's the best for you so let's just continue with the redstone blazer here so columns now this is necessary if you want to display the columns and for the weather forecast we've got i guess four columns here that make sense so we add redson data grid column again we add the class weather forecast and the property here is the date and let's also use the title dates and only for the date in this specific case here i want to use a template that's nice that we can do that but we have to define the context not the context menu the context and the context now is called data and here now we can say data date so the data is actually our forecast we can also call this simply forecast maybe makes more sense and from the date i want to use or display the short date string like that so this is now already our data grids with the date there they are and you see got lots of entries here so maybe we can use something like paging let's have a look but first let's add the other columns so again ratson almost ratson data grid column close this one already because now we only say this is our type and the property now is temperature celsius title temp c and this is actually exactly the same stuff you see down here in the in the table and now the last thing no that's already it that's already it okay so this is temperature celsius then we've got fahrenheit and the last one is the summary and now let's have a look again [Music] already works hot reload at its best so now we see the temperature and the summary so this is actually done pretty fast and when you compare this to the old school let's say table codes yeah of course a bit smaller and this also works with mudblazer for instance dev extreme i don't know whatever you've you want to have a look at blazerize maybe and if you want to use or see another component library here on my channel please write it down in the comments and i would be happy to test this and have a first look there but i'm not done here i want to test some stuff so the first thing is filtering for instance so when we say allow here allow filtering to true let's already test that we should see yeah now we see already this icon here and let's say a complex filter less than one for instance yeah now we see all the temperatures in celsius below one isn't that already nice i think this is great so this works pretty pretty pretty nice and fast you really have a nice filter design is a bit different to the data grid itself maybe so maybe we can fix that but i guess this is already a great feature but from that what you can also do is allow column resize this is something [Music] they use in the examples and also allow sorting we can do that and set this to true [Music] and now we can yeah see that we can resize the columns and sort this so this also works pretty pretty great so this is the default and then ace ascending ascending and descending so yeah that's nice but now last thing i wanted to i want to use here in the data grid is the the what is what's called the paging or page nation so here you see that page size and allow paging [Music] page a horizontal line and so on but let's try page size and allow paging and back to visual studio maybe in a new line and now here we add these two and yep already works nice and this is great so now we've got five entries per page and here we see okay page five and then it moves on all right nice and that's really really quick that's done really really fast and we can use 10 here nice i like that that's that's really really quick and again we can of course sort this and maybe also filter this to less than one no page anymore only these entries and we can clear the filter and the sorting and we're done all right so this is the data grid a pretty pretty quick look short look and uh i'm pretty sure that it can do much much more as you can see here in the example you can add more templates for images i don't know pagings here about the colors you can change them and so on so this is already nice but one more thing i wanted to i wanted to show you and test also is the charts because here in data visualization this is something i haven't had a look into with the other components yet are all these charts and i think they look pretty nice clean and just nice so i want to test this line chart here with the weather forecast data so i would say below the data grid we just add our chart right so back to visual studio here now we add redstone chart and now when you want to use the line chart we just add a redstone line series where we say for instance smooth true and then again the data which is our forecasts and then we've got a category property in our case this would be the dates and then we set a title which is first the temperature in celsius and then in the new line we can also define the line type so we've got different line types here line type dashed dotted and solid so let's use solid here and now the value property and then the title makes sense is the temperature again in celsius right so the date from the forecast and the temperature in celsius and [Music] i would say we test this already let's see how this looks okay this looks interesting well this is a random data right so this looks really really crazy but it works it works already i'd say and maybe we can still add one more thing [Music] and that would be the marker so with redstone markers we can actually we can actually say marker type is marker type circle and we close this and with that we should see the dates here okay and now it does make more sense still crazy crazy graph but yeah we see our values right with the dates the temperatures and so on and we can of course add another line here maybe for the fahrenheit values and in this case we just changed that and this thing here maybe we can say okay all right let's let's keep this also solid or use the solid line and yeah looks pretty similar right okay so this works and the last thing i wanted to use is the value axis we can change the text of the value axis because as you can see here we see for instance in the example revenue and us dollars and we can do the same here as well this is simply retzen value axis there's also the category axis and we can do some stuff with this thing but here now let's say i wanna see the grid lines so let's put this so set this to true all right close this already because here by default we don't see any lines but this will change in a minute or in a second rather and also let's say the axis title is text temperature all right save this and it is rebuilding and we're done we see the temperature and we also see the grid lines all right again pretty pretty quick and in just i don't know under 20 minutes with talking we see a completely functional data grid and also a line series graph here or chart and this is pretty nice i guess so reds and blazer maybe you want to have a look i will push this to github although you can get the code from the example pages but still check out the video description for the code and then have fun with that there you have it a first look at reds and blazer pretty nice i think you see installation is done pretty quick and then really quick we can create a data grid and also charts and of course this component library has lots and lots of stuff into it and this is not sponsored by the way by reds and blazer i just wanted to have a look and recommend that stuff to you additionally to mudblazer and blazer rides and devexpress and whatever you want to use here sync fusion maybe as well so there are lots of component libraries out there and mod blazer reds and blazer are three component libraries open source so maybe this is something for you then yeah please use it and if you want to see more of reds and blazer please tell me that in the comments and apart from that if you liked this video and learned something again i would really appreciate it if you click the like button maybe subscribe to my channel don't forget the bell icon for a notification for new videos also maybe consider subscribing to my newsletter for these videos here earlier in your inbox and also upcoming online courses regarding.net and blazer would really appreciate that and last not least of course thank you so much again for all your support guys really can use that you know the drill the nights are short days are even longer and to create these tutorials we need some stuff like coffee of course all right and if you want to see more videos about net and blazer then here they are maybe you want to have a look at these two videos this is interesting for you then just click on that thing and then enjoy the next tutorial and then the next one and the next one and so on and please tell me in the comments what you want to see in future videos so again thank you so much for your time thank you so much for watching and i hope i see you next time take care

Channel: Patrick God

Views: 14,671

Keywords:

Id: TcH87xJVylw

Length: 23min 45sec (1425 seconds)

Published: Tue Jun 07 2022