Intro to Blazor Controls in Syncfusion

the blazer controls in sync fusion are pretty impressive in this video we're looking at the data grid charts a kanban style board a dashboard autocomplete text boxes context menus signature pads menu bars toast messages and more there's so many controls to look at in fact we're gonna purposefully ignore the office file creation and display controls as well as reporting that way we can spend more time on the other controls today and then focus in on office files and other video and the reporting will actually take two different videos dedicated to it to show you so lots of stuff to show you now this video has been sponsored by syncfusion i cover the details of a sponsorship in the intro to sync fusion video as well as how to get the sync fusion controls for free i encourage you to check out that video if you haven't yet download the controls or if you want more information about syncfusion i appreciate it if you use the link in the description that will let syncfusion know that people are interested in their products because of this sponsorship which will encourage them to continue sponsoring community content all right let's jump right into the code now we're gonna start with visual studio but i do have the sync fusion controls installed which does give me some additional features so let's create a new project and in this list but also over here my recent usb i've done it recently is the sync fusion blazer template studio now if you notice you type syncfusion here you'll notice that there's a lot of different controls so it's asp.net core asp.net mvc which by the way that's not.net core that's the original asp.net.net framework version this is the net core version there's blazer template studio there's windows form application and wpf application these get installed by default when you install the complete sync fusion package so i'm going to choose the sync fusion blazer template studio i really love this particular template now i don't necessarily use this for production but this is a great one to create your practice projects with and your demos with and the reason why is because it's going to build for us demos of the various things we need then we can create our own project and just use the code that we played around with already it encourages that idea of practice and if you know me at all you know that i really focus in on practice because until you build something yourself you won't understand the intricacies of actually using it you may think you know it until you actually go use it and you find that something breaks this way you can actually get your hands dirty get working on the template studio to try things out before you put it into a real project so let's create a template studio today and we're going to call this sync fusion blazer template demo and we'll call it demo app and i guess the temp directory is fine we're gonna hit create i will give you this code if you want to try it out but really it's just the temple studio now here i have my first set of options do i want blazer server or blazer web assembly now we're going to choose blazer server because the fact of all things blazer server can do that are both client side and server side whereas webassembly only does uh client-side stuff but you can choose either next up you'll notice that yes https is configured it is net six but you can choose other versions and then there's theme now this is where some confusion might come in and you may say oh this is using fluent well no it's using bootstrap because the blazer uses bootstrap 5. so so will syncfusion however you can style your web app any way you want do you want to style it in the fluent style or in the bootstrap 5 style or tailwind style and so on that doesn't mean you're going to get tailwind installed if you choose tailwind it's just the styling that comes with tailwind by default so we're going to choose bootstrap five just to be consistent with what we already have installed but again it does not matter what you choose here you're still using bootstrap for the actual uh ui framework for the web just to be clear there and then we're not going to choose authentication hit next and this is where we get a list of controls and this is how we can set up demos for the various things we want to look at so we're going to choose a few of these so we're going to choose data grid let's choose chart i'm going to choose all of these because that'd be overwhelming and you can explore all these yourself if you want so data grid and chart and then let's come down here and we're going to choose we could do a barcode generator that's kind of cool but you can see yourself there's a kanban board this shows you things like drag and drop i want to show you that so we're going to go there ric rich text editor we're going to try that as well that allows you to create uh what's called wysiwyg which is what you see is what you get when you type out your your uh text so you can do things like bold words and highlight words and have bullet lists and so on in a text editor on the web pretty cool stuff we're going to skip the pdf viewer and word processor because the fact we're going to come back to those later like i said now there's a lot of stuff in here we could choose we're going to choose just a date time picker as opposed to all these different types of date and time range well let's do the range one well so you can see the range and that's pretty cool um auto complete let's um let's also select dialogue i'm gonna give you a caveat here though we're gonna show you dialogue but i'm not a huge fan of dialogue not because it's a fusion problem but because of the fact that it's not terribly friendly to all devices so for instance if you're on mobile it's not a great experience it still can work but it's not a great experience so i'm not a huge fan but at the same time especially if you're using blazer web assembly and create a progressive web application one that installs a desktop application well then the dialogue makes sense in a lot of ways so there is room for using it but it's just not every application should have a dialogue kind of thing all right we're also going to look at the dashboard layout that's another drag and drop option here um we're going to look at let's keep looking down here um let's do the the color picker just so we have one file upload there's some cool stuff you can do there with drag and drop but you can do the same thing with blazer so we're going to skip that for now signature is in preview but i do want to show that off uh context menu and menu bar we'll show the difference between those two things context menu is when you right click on something the menu bar is just the bar at the top you drop down all right and we could do sidebar i think we can ignore that file manager same thing breadcrumbs um let's do chips progress button those are pretty interesting uh toasts this is the the better way in my opinion for web projects to show some type of of pop-up as opposed to that dialog box this is a better way in my opinion to show off those kind of things that that makes sense and let's grab a spinner as well just so we have that so again we're gonna ignore excel pdf word and powerpoint we'll come back to those in another video so what this has done is we've said these are things we want to see samples of so those are controls we can hit next and we could do some configuration but by default everything's turned on we're going to leave that as a default and then just move on so you could change it to say i don't want to see paging for data grid i just want to see grouping or whatever we hit next so here's kind of a wrap up of our configuration where we've got net six bootstrap five theme again that's just the style not the uh changing from bootstrap to tailwind or something else that's just the the look of it no authentication yes to https and we're not going to include localization here but that would allow you to localize the controls for various languages and cultures so some cool stuff there as well but we're not going to get into that today we've got enough to cover in this video let's hit create this will take a little bit first to create the project but then it's going to have to download a lot of controls to make sure that they're installed using different nuget packages so just note that even as it it kind of locked up a little bit here no problem just wait for it it's doing a lot of work behind the scenes to get this whole demo set up for us okay so the demo is set up mostly and you'll notice over here in the bottom there is background tasks going on low priority background tasks that can run to get more things like the nuget packages installed this does show us an overview what's what's going on some more learning resources and so on we can close that out as well as the the starter page from blazer itself and then if we open up pages there's a lot of pages in here even more if you chose more options because it's a page per option you've chosen now if we hit build let's make sure this thing builds first because this may involve again downloading new get packages if we go to dependencies and look at the nuget packages we'll see there's a lot of new get packages installed and again don't get don't get caught off guard by this yes there's a lot of new get packages installed that's a good thing not a bad thing and here's why we could have installed just syncfusion.blazer which would install 70 plus controls in one nougat package it makes you feel good that you have one nuget package but the reality is you're still installing all the same stuff but by having different nuget packages if you don't need let's say for instance the calendar well then you could uninstall that nougat package or not install the first place and then you don't have that extra code in your project so just note that there's a lot of stuff in here but that doesn't mean it's all that it's excessive in fact what they've done is they've taken one big thing and broke it down to parts and only given you the parts that you need there's actually more parts that we could have installed that aren't installed but because of the fact that we don't need them they're not installed all right so it's a good thing not a bad thing now because of the fact that of what's installed right now if you go and look at the packages also another way of looking at the packages just going to your uh your project notice that they are version 20.1.0.52 this is the the latest cutting edge version but it's not the the main branch version it's actually ahead of that so the kind of official release the one that's the the one we should be using is actually dot 47 and this is gonna cause a little bit of a problem in the future where we have to roll back to version 47. just note that you can look on the syncfusion site and see what's the what's the version number that i really need since these are nuget packages you can roll them back very easily in fact if because they're just 52 and i know it's 47 i can do a ctrl h here and place 52 with 47 in this document only replace all those 15 changes so now all these have been changed with the new version i hit save and that's going to restore the nuget packages if we go back to dependencies and say manage nuget packages you'll notice they're all version 20.1.0.47 they could be upgraded but i know that's the the latest main version there's new versions after that but they're minor versions they're they're supposedly best for bug fixes and tweaks but i have found some changes that cause some problems on my machine with the fact that i have the preview version of net 7 installed and that caused some issues in dot 52 i found that the main version.47 works just fine so you could leave yours at 52 and see if it works just fine um just note that on my computer because of the fact that i have some pre-release stuff installed including the dot net 7 preview bits that caused some problems with the dot 52 release so you may have learned something new already you just change your project file the version and it just updates nougat so really helpful stuff there okay let's just hit build that's gonna build our entire application and launch it all right now it's launching supposedly there we go it's up to that screen so it was it went on and off very quickly but there was a message up here a red message that said hey you're using the preview you're using the version that's not yet licensed now i have a license for this it's just that i need to install in this web project in order to say yes i am licensed for this and we'll cover that in the future but for right now don't worry about the licensing it will still run it's just it's in a unlicensed state which is fine for for demos okay now we have over here the um it kind of it collapses and open back up not a huge fan but whatever this is a list of all the controls that we said we want a demo of you can also get them from the main page just by looking through this list so let's start walking through these demos again these are demos on my computer that i've created based upon that template studio so let's start with data grid and the data grid it looks a lot like we saw in the online demo although it isn't as pretty remember i said in the previous video the interesting fusion that the demo's purpose is to be a sales tool not just to show off the code well this is just showing off the code it's not as much a sales tool so it's not as pretty or flashy but it still has all of things that we're used to here so let's look at what it does we have the the filtering or that sorry a sorting we can do filtering so we say you know let's look for bullet and there you go there's just the bullet and we can clear that out and now as all of them notice we have the paging here we have again sorting by order date country we can also drag this up to the top and now we're grouped by country so there's the various countries and what's inside them and we can cancel that and have all of them now and we can say you know what and this is where again we'll get into more of this in a future video but there's this really cool button here we can say excel export if we do that i'll open this up wait for excel to open here is the excel file of those 75 76 75 records as well as um in the order we had them in so actually i'm not sure it does nope it didn't order them um it sometimes orders in the right way other times i think it just oh no you know what it does watch we're on page one there we go so yes it does so we've got usa first there's usa 2010 cents 2010 cents so it has ordered them based upon whatever i selected so the stuff i do on this grid when i export it it shows up that way in excel so even that is some pretty cool stuff and if we go back and look let's close this out and go over at cause i'm just moving it over let's go over here to our pages and this is the data grid features page we can see exactly what's going on with our setup so there is some styling again not a huge fan of doing this way um not a huge fan of of the brakes now using the the html either but that's okay this is a demo we can get the things we need out of it and then down here here's some code there is some generation of just the random data as well as what's gonna happen we export the data that's just excel export it's what it does um and that's just part of the grid so here's the grid here's how you lay it out it's called sf grid we have the data source which is just from our code down here that's just a list of order and then you we specify the grid columns if it's a primary key validation rules edit types and so on so there's great demos here for you to say okay i want to do this or i want to do that now you can cut this way down because they're doing everything on this demo you probably don't want everything but by seeing everything you can say okay these are the things i do want and then you can play around the other things you might or might not want so this is a great way to try something out see how it works see what you want and then put it into your own application after you have practice with it try different things maybe turn off this whole bar here turn off the the column grouping or you know turn off the filtering or sorting try different things try different page sizes and so on just to see how it might look and figure out what you like and how you want your grid to work before you put it into a real application this gives you again that practice so that's just the grid let's keep going because i'm going to give you a high level overview of these various tools and how to work with them but we're not going to get into the actual coding of it because of just how much there is rich text editor this is pretty cool stuff so if we say you know what i want to see bold no problem there it's bold you know what that font is way too small let me get 24. done this is a rich text editor this is right inside of our our our blazer page we can create a really nice ui for seeing this editor and if we go to the code of it which that shrunk it down way too small but you can see this actually there we go if we can zoom in here it actually writes html which is what most wysiwyg editors do is they write html for styling this stuff on the web so it's a pretty common thing to do um but let's not do that let's do this reset there we go but well now i'm outside that page awesome now we can go to another page and get back to it but um by doing this you allow your your visitors your viewers to be able to create a a stylized design while not hurting anything okay so you can use markdown you can also use html so cool stuff there you can do um you can show things like character count you can enable resizing of this you can move it around and so on so some great stuff there date range picker this is a fun one so they have a date picker and it works pretty cool but then there's date range so if you say you know what i want to go from the 10th to june 12th kind of like if you're you know fly on airline you say i'll fly out this date and come back this date or if you were staying in a hotel and say i want to check in this day and check out this day that's the kind of control you can do you can use in certain circumstances well there you go you apply there's that range now you also say have different quick links like this month or this week or again that custom range to pick whatever you want and there you go so date range picker there's also a date time picker i thought that's a pretty interesting approach to this problem and that is we have a the concept in c-sharp of date time now i also have the date and the time objects but date time has been around forever and it's the one we commonly use so what if we do want to choose both a date and a time how you do the drop down well you put two icons here let's pick the date first and they've locked into a certain date range in 2020 whatever but notice it shows 6 pm but i can go over here and say actually wants 8 30 am so date and time picker so there's the time there's a date pretty interesting implementation i thought autocomplete so if you want to give the user the option to type something in but you also want to kind of guide them in possibilities well we could type in ball and notice how it filters down to all things that have ball in the name american football basketball and football so you choose the one that most interests you and there you go you can also if you're typing ball notice you hit the down arrow and hit enter and it chooses it for you so some pretty cool interaction there again it just makes your user experience better on the web where if you have certain things they can choose from especially from a dynamic list instead of giving a drop down you can let them filter based upon just ball or let them select from one of the possible options that you have in the list dialog again this is one that before i show you on make sure that we're on the same page this is not a common thing you should do on the web this is more for your progressive web applications but even then i'm not necessarily a huge fan there's it's a limited circumstance thing don't go crazy with this but there is a possibility of having a dialogue so you click open and there's a dialogue you can move it around you can have a scroll bar inside you have buttons inside you can resize it you can close it out you can also click the learn more button and have it do other things so this dialog right here the purpose of a dialog is to take the uh the focus of a window and say no you have to focus on me you have to deal with me before progressing so in a desktop application that makes a lot of sense you can say hey you know are you sure how yes or no and you don't allow them to do anything else until they say yes i'm sure i'll delete these files or no i didn't want to delete those files but in the web it's not as great of an experience in most cases however when you have that need here you go done okay so there's the dialog dashboard layout this is kind of fun notice all the panels they're numbered well we can add a panel if you want but let's leave these panels as we are let's say panel six i want six and seven on the other side of panel three i can drag six over here i can drag seven below it and there we go i can say actually i want panel three and five to switch places there we go i've now switched them around so some cool stuff that you can also say let's resize let's say panel two is too big uh which i can't i can't see it actually bummer um so let's move this over for now let's resize panel two and let's bring it back down like this so now we've kind of rearranged this page and said let's bring us down and so on now you need to add a scroll bar here so you can scroll down and see the bottoms of these things otherwise you come into this problem where you can't see what's going on underneath and so you can't change things around but but yeah there's there is a dashboard layout you can have different things in each panel you can have them close or open you can have them resized you can allow the user to figure out what layout works best for them so this is a really powerful feature if you want to create a dashboard or maybe you have reporting eyes maybe you have various bits in the different windows and you allow the user to say this is what's most important to me this layout so there you go dashboard layout color picker you want specific color cool let's look over here let's go into the the red range and say i want that color also known as the hex and the rgba hit apply there you go there's that color we can also change to say 50. on that noise is halfway transparent that's what the a rgba stands for is the ability to make it transparent or or how transparent it is with 100 percent being no transparency zero being you don't see anything so there's a color picker you can add your site you can also notice down here there's the standard colors you could pick from and say that's what i want signature this is a in preview one it's still being worked on but let's just say you want to add the ability to allow someone to sign for something on your site well there you go so now is that a great signature no is it my signature no so don't worry i'm not giving you my signature what might look like but um you can make your mark on the web using a signature tool in blazer and again not that hard to do if we go back over here to our solution explorer and look for signature feature so there's the control right there and that's it that's all there is to it is that control right there we give you a size with a height and width again if you're doing this in real life you wouldn't be putting these in that probably you'd probably use your css to style where it fits in the page but for a demo that works just fine so pretty simple stuff and yet something really really powerful context menu if we right click or notice touch hold so if we touch and hold if we're on a mobile device or if we right-click we get this menu this menu is not the common menu we get with a website normally we get something like this which is hit back or refresh save the page which doesn't really work uh print not great but in here we can control our own menu and have our own actions on a a list so you can say things like hey send this to accounting or you know whatever you want to do with this this data based upon the context of where you're at again this is the concept of bringing more and more things to blazer that make it more and more desktop-like even though it's on the web this is great both for blazer server where we have one foot in the server and one foot in the client side because it allows us to be more like a single page application more like a desktop application but also for blade web assembly where we are fully in the client and we are potentially even working offline this can be a really great feature because it makes our our single page application into a when we do a progressive web application it looks like it acts like a full desktop application even though the reality is it's a web application behind the scenes so some really cool cool stuff there menu bar so you want to have that that concept of a bar at the top where you have again just a desktop app would you have different things with drop downs and and buttons and so on you can do that with the menu bar control these i think are just fun and the reason i put this on here is because i thought it was just a whole lot of fun to see and i think that this is something you should at least check out um with the web one of the things that we do more of is wait because the fact that it's not just instantaneous we're talking across the world sometimes we are waiting for things to process and so on so the concept of telling the user giving us some kind of feedback to say hey we're doing something hang on is pretty important because you want to let the user know what's going on so they don't become impatient unless they click a button repeatedly hoping to get to actually work when in fact it is working it's just not done working so we have the option in uh in syncfusion to have spinners in our button so let's say spin right left top and bottom is where it puts the the spinner in the button so let's just say spin right click there notice the spinner to the right and that goes away so you can control how long that spinner lasts for so obviously as you're working you keep that spinner rolling and then when it's done it goes away but there's also some fun things here for example download notice the little line right there it's pretty subtle but there's a line that is telling you yes we're working or zoomed out notice it replaces the whole thing with a spinner and a progress filler it's a little hard to see let's zoom in here so we can get a better view of this notice it filling up or zoom in same thing but the way the words leave notice they zoom it zooms past them to the spinner but then i think my my favorite is slide right like that that's pretty cool i i like that user experience it just feels fun interesting and yet not um not crazy stuff it's not going all over the page it's not it's subtle it's just subtle but at the same time it makes for a nice interactive experience so there's some cool stuff here you can do if you want to try different ways of of doing this but again my preference is that slide right where it slides the words right and then that that spinner is there but also fills up the box again based upon what you're doing and how long you want that to run so some cool stuff there with progress buttons again that's just my favorite fun little thing chips are these ideas of little they're button-like things that can either be just static like these are they're just just there there's little indicators for various things like maybe you have a person's uh resume and you kind of tag on there oh they worked at microsoft they work in google and so on or you can have little things like this where newest let's zoom in again notice how there's actually a little uh image here and a word or a name and x well if you hit the x it goes away so you can interact with these little things also you can have check marks on them you can have maybe change colors let's go down the next one change colors as you click on them so some fun stuff there as well so with that those are nice little subtle things you can put in your your site to your application to make it uh better looking make it pop out a little bit more than just a plain black and white okay let's reset the view here let's go on to toast this is if you're gonna have to pop something up to show the user it's not the same as a dialog it's not take preference it does not take away the the focus of the page but this is the more web friendly way of doing a type of pop-up and that is toast so you show toast notice how a little message over here i can mouse over it and it keeps it there if i mouse away from it notice that the timer for going away but i can also manually close this like so i can show multiple at the same time but i can also say hi to all they all go away but a toast like this allows us to be able to interact with and see various things like i've got a meeting coming up or hey you got five minutes left in this or whatever the case may be for showing the user external information they need to see that might not be right in their flow of what they're doing but they need to be able to see and possibly interact with so this allows you to do both those things and you can put other things in here like buttons so toast is a great option there and finally let's look at spinner spinner uh we can choose different types and we can show that it shows it right in the middle of text which i'm not really a big fan of but um there you go so there's the the material spinner you can change the bootstrap spinner bootstrap 4 fabric high contrast and then the regular old bootstrap with the the bubbles so they have different themes for it you can you can hide it and show it um but that's a spinner in case you wanted to again inform the user we're doing something hang out here just wait i'd probably put that not on top of text but probably put that in in the text section where the text is coming but it's not yet available so think if you're loading uh data from a database but you're not there yet put a spinner up there and say hey we're doing something so it knows and then you replace a spinner with the actual data so that's the spinner okay so i've gone through a lot of controls here showing you what the things that that boost or that sync fusion can do with our blazer studio most of these if not all of these can be done in asp.net core or asp.net mvc or in javascript or even the the desktop controls so these things can be done across all these different types of applications and in the same way meaning they look the same to the end user now the code behind will be different but the actual how they appear to the user will be the same which gives you a uniform experience across the different types of user interfaces which is really important so let's take one final look at the code here again i just want to show off that there's not a lot of stuff here in program.cs there is a couple of tweaks here where we'll see um i believe actually no there's no tweaks in here right now we're gonna add a couple of tweaks later for um changing this for adding our own controls but the way it does here is pretty much locked and adjust these pages so we have our our nuget packages which we got a lot of because we have a lot of controls but on the actual page you'll see that it shows off the various ways remember chips we have different styles well this shows up how to do this and it shows off here's the code for that what's the code or we could we could close out those chips not a lot of code there okay um so there's some really cool stuff you can do here but the best thing is you get to see the code in action you need to see what it does and then you need to modify it that's what i encourage modify this try it out and say hey what if i did this instead and try it see if it breaks if it doesn't break keep working on it until it does break um keep working on until you get what you look or you're wanting out of this control and say yes this is the control of the end result control i want but still in a demo environment now you can take just that control and put into your actual application and the only thing you're going to need to make sure of is that you get the right package with it but the documentation will tell you which package you need for which control so great stuff there there's a lot of good stuff in here you can play around with it work the i will say that the blazer controls are probably the best controls the best best designed most modern controls they have in sync fusion i haven't worked with the flutter or the javascript ones but the older mvc ones or even the asp.net core ones are a little harder to work with and they don't have this nice template studio to show you the demos of there's a little more work there but they do have those github resources to help you out and they do have the forums they do have faqs and a lot more things to to help you show off what you can do they also have the demos which you can see more of on the website itself so some cool stuff here with sync fusion controls there's a lot more to cover we didn't do even every control because there's 70 plus controls you can do in blazer but um we did a lot just to show off the various parts and i'm kind of interested now in which ones are the ones you're like yes i i need to have that in my project there are some that when i look at them and go yep i want that i want that feature so i'm interested in seeing which ones you look at and say yes those are the ones i want to see let me know down in the comments and let me know which ones you're like yeah i want to know more about that or i'm interested in how this might work in this scenario i can't do every video i can't cover everything because there's just so much to cover but i would be interested in at least knowing which ones you're thinking about and which what hurdles you might be thinking about overcoming with these controls all right thanks for watching thanks for sync fusion for sponsoring this video and as always i am tim corey [Music] [Applause] [Music] you

Channel: IAmTimCorey

Views: 14,192

Keywords: .net, C#, Visual Studio, code, programming, tutorial, how to, tim corey, C# course, C# training, C# tutorial, .net core, vs2022, .net 6, syncfusion, syncfusion blazor, syncfusion blazor datagrid, syncfusion asp.net core, syncfusion grid, blazor components, blazor ui components

Id: eQ9S9rt-rKc

Length: 41min 38sec (2498 seconds)

Published: Wed May 11 2022