Building an app with .NET MAUI and Telerik Components - Part 4 - Exporting to Excel and PDF

foreign welcome to a new video with me Donna hindicus and today we will talk about net Maui so this is the fourth video about Dr Maui and teleric components if you like this video please the like button and if you don't do so already subscribe to my channel and if you want to support the channel a bit extra you can click the super thanks button before we start I will say thank you to telework for supporting this channel by sponsoring this video today we will export the data from the use that's app that you maybe are familiar with if you watched the earlier episodes that I did about the tailoring components so we will use the document processing that comes with telrick and that's available for all their platforms not only for net Maui so what this video will cover is exporting Excel and exporting a PDF but the process will be similar for other formats as well for example exporting to word so let's open Visual Studio and go and create some documents so here we have application we have the data grid that we built in one of the previous episodes and here in the toolbar I have added Excel and a PDF button so if you click this you should be able to export this to a spreadsheet and this to PDF document so let's start with the Excel document what I have done before I recorded this video is that I have prepared a bit I have created a document service that have one method saved Excel and saved pdf and those method will be triggered when you press the buttons in the toolbar so we should start with Excel and the first thing here is that we of course want to have the video with most views at the top so we just going to make sure we have some sorting so we just order by descending X or X column views dot to list okay simple link spin so what we first need to do now is that we need to create a workbook so we do that by creating a variable work book is equal to a new workbook and here we can see the namespace we need teleric Windows document spreadsheet dot models so yes let's go with that one and add using for that and a workbook is built up of worksheets so what we need to do then is to create a worksheet and we do that by using the workbook so we create a worksheet variable and say workbook Dot worksheets Dot add and here if we don't want to have a variable to work with we can also do it like this workbook DOT active sheet and that's the current sheet we are in but I prefer to have it in the variable because it's less to write so now when we have a worksheet we can go and add some data to it and you know that worksheets are built up of rows and columns and we have cells so the first thing we need to do is to get the cells that we want to add content to and we will do that by using the cell property on the worksheet so we have cells here and here we can see we can add a cell index we can add a cell range you can have a memorable of cell ranges we can have a cell index from and cell index 2. and we can specify an row index and a column index from from row index from column index to row index into column index so part what we can do here now is that we just say o.o and you can call that one first cell just to demonstrate that and now we can do first cell dot set value and here we can see we have a bull we have a Time double I sell value and three so let's just try with the string first so hello and now we need also to save this worksheet if we should be able to show if this code works or not so we are going to do that and for that we need a path and a file name so first we give it a file name let's say you use that dot xlsx then and then we create a path and then we use python.conbine and the best place to store data when we're using an app is file system if we write it to disk and we will run this app in this demo as a Mac app because it's easy to show it because you can just open it in Excel but everything I show works exactly the same on all the platforms that tellery components supporting so we use file system and of app data directory and then we pause the file name like that and then we need a format provider so we create one and we will use xlsx format provider when you up that one so and now we're going to create a stream and we can write that one to this so what stream is equal to new file stream pause the path and we set file mode to create like that so and actually we don't need those brackets we can just do like this now with them newer versions of C sharp so then we do format provider dot export and we pause the workbook and the Stream and that's everything we need to create a workbook and save it as an Excel file and we also added some content to it so let's run the app and see if this works so here we have the app and now we go and click Excel and now we can see that it's working and now it's done so now we can open finder and we go to the library folder if you don't find this one you can just use the debugger to get the path to it so here's the stock xlsx let's open that one in Excel here we have Excel and here we have in the First Column hello so now we can continue to add actual data that we want so close the app and we and we remove this test code and we will create a loop to Loop through all the videos and we do a for Loop for that because I won't have index and I is equal to 0 and a is less than videos dot count I will increase the number for every time and loop so and then we need to get the video so video is videos and we will use the index up from the loop just like that so and now we go and create a title cell because we want to show the title of the video in the First Column and the number of views in the second so we create a title cell or actually we're getting a cell from the worksheet so say work sheet dot cells and you can create a cell index or you can add them directly here but this time we can create a cell index this and we'll add index variable and this is always the first column like that and then we say title cell dot set value as text because this is text you can we can use that to state that more clearly to the documents the video dot title like that okay now we have the title set to the document and now we also go and set the views so we can copy this code and we change to views cell and in this case we will add one here instead because it will always be the second column the column with index one so this is save view slot here too and then we only use the set value because this is not text it's an integer so your cells set value and we pause video views okay let's try it around this and see how this looks in Excel okay so now we have the Excel here but as you can see this column is too small if we do it like this we can Auto fix the width but we can also do that with code so let's go here and do that so close the application and we go and say that we want the first column by worksheet dot columns pause zero as index and then we say column dot out of fit with call that method and now it will looks much better when we run this app and now we can see here that we have this width fixed directly if we for example want to add bold text to all these cells we can also do that and then we can use a cell arrange so let's go and do that so here we say War view view cells is equal to worksheet dot sales and now we pass a cell range here instead cell range from row index 0 and from column zero and two row index will be videos let's count minus one because it's it is zero based index and two column index should be zero because we'll only use the first column so now we have all the view cells here in a Cell selection and now we can go and make them bold by setting View cells and of course this should be title cells title cells dot set is bold and just passed through and here you can see we can add some other formatting like set four colors at font size at fail borders horizontal alignment we have a lot of different options that we can do with these cells but ball is good enough for us in this demo so we run that again so here we have Excel and now we can see that everything in this column is bold so that was the basics of exporting to excel now we are going to export the data to a PDF instead and for that we will use the other method that I prepared and for PDF we will use red fixed document and that will be the root object for the PDF file like we have workbook for the Excel document so we go and create one more document is equal to new rad fixed document now we need to add a new namespace to this file and from the document we can create a new page so our page is equal to document those pages dot add page and now we have a new page and we have it in a variable so now we can go and add some text to this one so let's go and add all the videos titles to it so we create a for each Loop for video in videos just like that and now we'll use something called a text fragment so we create one frag command is equal to new text fragment from teleric Windows documents fixed model dot text that and to a fragment we can add a text so video dot title just like that and now when we have that fragment we can add it to the page so page dot content dot add fragment so let's run the app and try to export this to PDF no we cannot do that we of course need to save the PDF file too and that is very similar to what we did with the Excel file so we go copy that code but we will of course not use the xlsx format provider we will use a PDF provider instead so we just change the PDF format provider and here we can see that we have multiple ones so we will use this tell Eric Windows documents fixed dot format providers.pdf because this is a fixed document so and now we can go and install workbook say document here and we're done you should of course change the file name to dot pdf2 I see one thing I forgot here when I said that we can use using another way in newer version of C sharp you of course need to add using here too we cannot just remove it we need it here so using more so it worked anyway but it's good as I have this stream disposed when it's done and here we have the PDF and maybe you can see that we have some text here in the top of the document and the reason for that is that we also need to set the position for the text fragment so we go back to the code and we'll fix that so in here in the document service we will use something called Simple position and we can create a simple position by doing this so VAR text position is equal to new simple position and now we will use text position dot translate then we can say x offset will be 50 and I offset will be hundred and then we need to assign that position to the fragment so fragment of position is equal to text position and now we can run that okay it's a bit better it's not hide on top of the document but all the texts are on the same place and that means that we need update position in the loop so let's do that so we create a new start variable outside of the loop I is equal to zero and then here we say this will be I Plus 100. and in the end we update I plus c plus is equal to 150 for example yeah okay let's run the application again and there we have a lot of space here it's good because now we can add some images to it too but of course you can adapt this to how you want it to look so all YouTube videos have a thumbnail so we should add that to the PDF as well so close the app and we go and add that one so for that we need to fetch the image and we need it in the format of a stream so first we need a HTTP client is equal to new HTTP client and then we go and get the bytes from the thumbnail so War bytes is equal to http client dot get by three and why I have a byte here directly is because we have this method get byte racing as you maybe see also how this get stream I think but that is for asynchronous Operation so we will use get by 3 and we will put video dot thumbnail in here and that's just the string and we go and fetch those bytes and we need an await here and now we can convert this to stream more stream is equal to new memory stream and then it will pass the bytes in there just like that so now we can create a new image object or image is equal to New Image and now we have a problem as you can see this is a Microsoft malware controls image and that will not work with this because it should be a telework image so we're going at using at the top so we say using image is equal to tell Eric that Windows document.fixed models.obex.image oh that was a very long namespace so to the image we can now add we already have one with stream so let's say image stream instead and when we have the image we can say image dot image source is equal to new image source and here we can see the Complete namespace because also with image source we have a conflict with what we have in Dot and mouse we need to use the full name space here so we pause the Stream and then we can pause image quality here so image quality and here we also have the full name space and we set it to High and it should be image stream there of course so and now we have the image we can set image.width let's say 150 for example image dot height is equal to 100. and we can add it to Page page.content dot add image but if we want to have this image on the page we of course also need to set a position for it so we use Simple positioning and we copy this text position and we say instead image position and now we still have it and and we will still have an office of 54x and now we can say let's I dot 130 instead because we want to have it below the text so image position and we add that to the image so in method position is equal to image position so now we can run the app and see if this works and we have an Acrobat Reader and we can open this recent topic command and here we can see what it takes we have the image and now it's just for you to style your document how you want it to look and if you want to know more about this you can go to the official telework documentation because here you have a lot of good examples how to use this for example you have the developer Focus examples and that is a GitHub repository that you can download and you have Concepts we have colors clipping geometry all the features we have raw spread processing we have word processing we have zip Library a lot of great stuff that you can do with telrick but this was everything for this video now we have worked through the basics of creating an Excel document and a PDF document thank you very much for watching subscribe to the channel if you're not doing so press the like button to like this video and of course go and check out the teller components because they are awesome thank you very much for watching see you next time

Channel: Daniel Hindrikes

Views: 861

Keywords: telerik, pdf, excel, components, dotnet, maui, dotnetmaui, progress telerik, csharp, app development, cross-platform

Id: 37WwLzxfOyo

Length: 23min 56sec (1436 seconds)

Published: Wed Jun 07 2023