Video: Working with the GridView and FormView C#

Presenter:Bob Tabor (from LearnVisualStudio.NET)

In this lesson, you will learn about the GridView and FormView controls and how you can use some of the features of these controls to make editing and displaying of database content easier.


Click here to go to original video page

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video

Minute 0
Bullion in this video were going to talk about the great view in the form who controls avoid tough little bit about the basic features of the grid view boredom expand on that quite a bit in this lesson were going to for small and naval paging and demonstrate how to set some paging feature so that we can customize the way paging works with interapplication also enable sorting through that does for us but they really get to the real important media of our lesson that is demonstrating how to enable in line editing inserting and deleting of data to save those changes back to the original data source this is where the interactivity of your applications is going to give the sore and then we re going to move on to looking at the form view windows from the previous lesson that the forms you is exactly like the details view but the big difference is that the form view allows your user to edit the values instead of just view the values from the database will be will add
Minute 1
Delete insert new values and save those voters back in the database but please know that portions of this video were originally recorded using the Visual Basic programming language options however due to the nature of the topic matter that should really interfere in any way with your understanding of the material in other words although you see references Visual Basic ties rock this video is nothing specific to Visual Basic or CHR so please don t be alarmed for this particular lesson the functionality that on the demonstrate is exactly the same for both the sharp Visual Basic is going to started as you see here I ve taken liberty of creating a new website called lessons are away and I have added a database call customers MDF and this is identical to the customers table to our database that we used in the previous lesson we go over here to the database Explorer you can see that I have one table is the customer table
Minute 2
It s exactly the same as layout and let it differently was I added a couple more rows so have about 12 rows of data I did this so we could demonstrate how to use the paging option Audi within the grid view so if you want take a moment own ads more data to your table please do that this time okay so let s move on I m going to drag and drop the grid view control on our designer surface atoms moving into position that I m going to select a quick tasks menu and or here to choose data source and selection to a source select database as a group in the previous lessons and now will ask what connection we should use to our database Remus let the customers MDF file and click the next on this is you run the same connection string for this database into your application configuration file the web config
Minute 3
So we ll go believe that named to the full name click the next button okay this is those who attack the wizard that is going to look cool the different organs like slightly different this time and what I do is select the cycle didn t previously be so they were grabbing all columns from the customer database from also click is little advanced button here in the right hand side and this brings up the advanced SQL generation options and what click insert generate insert update and delete statements and it also use optimistic concurrency that can read the descriptions of these were based with his first checkbox will enable three more SQL statements from within our own our data source to allow the assertion of new records the updating of existing records and the deletion of existing records and pay the second checkbox is use optimistic and current
Minute 4
He is just a preventative measure to make sure that whatever we do within the database does not concurrency problem concurrency happens whenever two users are looking at the exact same record and by virtue the fact that user B makes a change and save those changes back to the database that user a 10 minutes later tries to make different changes to that same road data in the database but they don t collide in cause it was called a doubt collision therefore the law suggest what will happen is that but the second person who tries to save data back in the database will be notified that look the data changed out from under you if you d change now you can hit the save button now the problem will be that we ll lose a change to the previous user made and you have even had a chance to review those changes so we ll talk about optimistic concurrency in other videos is not really the form for that but for
Minute 5
Now to be on them safe side always select use optimistic concurrency almost you have a reason not to okay this is role from Oakland are OK button and will put our next button back on the configure data source Wizard would contest or will select query we know that that works sort afterward about that and what our finish button okay so let s do this now that we serve our data source let us enable paging and will do that by simple clicking the little checkbox enable paging and less water applications with it does for us yes we want to add the ability to debug or application without config file so as usual press located at after owner so we re going to see the data from our database displayed in our grid view in the summer going to will navigation bar at the bottom that allows us to navigate through via
Minute 6
Rows that are on pace to soak you ever used a search engine like MSN search for example you will see that there is a the ability to page of results may get 20 results from the first page and 20 results for the second page is so once we can do all the results of the one look at millions of results okay so that s all well and good but what if we want to expand his number from 10 rows which is the default to 20 rows or were contracted to five rows how can we do that hot wheels of change was displayed here I can go to the the end or the beginning if I have a very long set of data verdict set of data rather properly modified hosts those kinds of settings in the navigation bar at the bottom well with the grid view there are a number of options here or at the very bottom called paging single painting section or properties window you see that allow paging is ordered and set to true and the page size will allow us to change from 10 rows displayed at one time to does five road
Minute 7
Or whatever value that we filled a series it reflected here in our preview and also there s this drill down pager settings option within the properties window of and to listen to conceal more of this allows us to do is replace the text that we will we use to use like the arrow button like there is arrow pointing laughed typically in order to go to the previous page and then there is an arrow pointing to the right to go to the next page and it would also enable the going to the first page last page by using double arrows by default to the right or arms are too often in double arrows to go to vote to the right and change all that by changing the best the first page tax receipt arrow arrow or the last page text arrow arrow to the right and the same would be true for the next page to a single arrow to the left arm and turn the right and
Minute 8
In his face with a single arrow to lots node in change that by using different HTML encoded strings that represent arrows or whatever the case might be my one use is or some other carrot mirrors a next or previous week actually did hear solicits to this and said previous and next and how we d get those actually display on screen while we do that using this old mode property of the next previous OK so as to save this and run it and notice now that I get in next and previous buttons instead of a numeric buttons because I change the mode and I can change it once again to be of new next previous first last
Minute 9
Text or last produced her first kiss in next next and yet you because we have a lot of options as far as that s concerned I does leave those for right now and say we have and like I said before if you don t want to use text in order to new legal links you can use images and we can quickly and choose some tougher resources available on on our computer of so let s move on to talk about sorting and sorting is enable very easily by checking the little sorting box that s next to the enable paging box below it that s all I need to know school hadn t disabled we have here and click the startling button and notice now that the titles I had at the very top have been changed to be hyperlinks and so by clicking on a hyperlink for sample followed a sword all the records in my
Minute 10
Data bought in my record set by last name on you do is click once and you lose all the bees appear first be thin and so on if I click a second time notice that its source in descending order so the first click is ascending a second click is descending them do that on all our rows of sending from 3500 to 10 000 or from 10 000 to 3500 and ahead and shut that down because sorting used to be something that again took several lines of code in previous versions of ASP net it took several lines of code previously to enable paging as well but now all that is taken care of automatically for us by ASP net 2 0 is a beautiful thing now something else as to before we get into own some of the cooler functionality here is to edit the columns because I want to add remove columns that are displayed here
Minute 11
And I might want to change the way those columns are displayed for sample the titles I may want to give a different name to customer needs or remove that calm altogether a pay and how would I go about doing that well what s go ahead and select edit columns and at the very top you can see here are all the available fields at the bottom here are the fields that are currently selected and used within my little of review if they so follow to remove a field all I would need to do is select it and click the Xbox I can move some fields higher than others are in it so I can change the order in which the fields are represented such a move are limited for customer since I to Luke move lass named before first name if I want to cut and in more fancier shows I can add a checkbox hyperlink field and image field of Bottenfield and can
Minute 12
And fields and we would use some of these command fields in just a few moments may not use it from this particular face but will use them in just a moment knell essay for sample that I want to change the title of the last name field because this is pulled directly from the database definition but we want something that s long with more aesthetically pleasing so we may want to put the space in between last name so if you go here to the header text property of my selected fields on Oscar server between last in name and address space I can name a something completely different if I wanted to pay and zone was just considering show you some more best of what combined the first lasting together on the could do that for right now but I will just go in and change
Minute 13
Some of these rows for example get rid of the word limits and customer since August and now the shoe look dramatically different as you can see here a pet Palos move on now to enable some of the cooler functionality within the review that of an promising and all they do is select the enable editing and notice now that I get a new column over to the left hand side which says that it s so by clicking this escort allows to edit that current world data try to sell and see if we have everything we need to do is work appraisal is in the case of Chuck Rivette oh was go ahead at him and changed his name to Shah rolls rebuttal in his credit limit to 4000
Minute 14
Okay let s could expand this window of the art Internet Explorer so we can see the entire row noticed that next to Charles Rivette oh I now have the ability to either cancel the changes that I just made or click update to save and propagate them back into the original data source only do this now quick update button and notice now that it s a truck whereby we have Charles rebuttal in his credit limit has been improved okay so notice all of Ocean Elio z didn t enable by simply checking facts enable editing button on our call on our QuickView are quick tasks menu will take us to the same thing for deletion still ahead and run this and this time was go ahead in
Minute 15
Delete Chuck Rivette oh from our database marketing on the delete button and now he s thoughtless when sort by last name and notice that we re sorting in no percent are descending order that there s no rebuttal between 10 and star in so again able to create a very nice user interface on top of the database of very quickly by just a couple clicks now for you who are just starting this may not be such a revolutionary thing however for those of us who have been building web applications for a long time and had to repetitively write the same of code each average I wanted a enable this functionality and this is a godsend because the beauty of this is that I still have the ability to go behind the scenes in the source
Minute 16
Be things that Microsoft now has made it so easy to do by including a functionality by default in its controls so guests will have deleted to model finds him up around with all this of with all the settings however I did have a writing code and I was able to new old literally hundreds of lines of code for the functionality despite dragging dropping clicking options and things that nature is very cool a peso next to let us add another page to our website will you default to that leads us find women to design view and this time I want to drag drop a form viewer for my design surface and pay it says right click and choose edit templates task war at a temple content the item template is required to was so worried about that just at the moment was go ahead and selecting new data source database okay
Minute 17
To choose from our existing connection string next here we will all select all click advanced generate insert update delete statements use optimistic concurrency to a rates of the next button and contest the criminal boy that pronounced click the finish button up at some night to see the ads that little statement that we had before that Earl of little gray box it here has gone away now we ve configured this with some real data and several thousand things that nature noticed that by default edit delete and new have been a added to a our little view this looks much like the catalyst that we used I m sorry the details you to use the previous lesson but this time they re some of the extra functionality with the editing deleting and new functionality how we also click autoformat for something that ll more attractive for our particular tastes
Minute 18
Uncooked class and apply within also of click edit templates to change the way that the data is represented so notice that there s a bunch of different templates I have an item template which is kind of used in the view only mode but will be in by default wall were editing we can change the look of the template and removed the text boxes which are generated by default and we can change them up by using maybe drop down list boxes or specialized controls that we ride to only accept dates or whatever the case might be on the salute of advance orders wanted to show you that it exists that we can change the look of the fuel of every state of this control by modifying its template so for sample on let s go to edit mode and only change the font here does we can see that some on select
Minute 19
In syntax here and to change the font from Times Roman to aerosol and will make a bold okay but he do the same for a label control itself will change that from area to Ariel and make it bold as well in the safety changes in its comeback out and 10 template editing and so will this change back to the view the blues gone all of the changes I made this Monday at again this is because as the default template for the view only mode once I click the edit button will be will see the changes that I made because he ll be in the edit state and do the same for the new state and on for a though the headers and footers and everything else so Burkle also enable paging for this dissent we did in the previous lesson with our details view as it is all really need to do right now slows go ahead and get rid of that and say if right click and select
Minute 20
Jar page you are in the wrong are application okay so you can see here that we have the ability to move through each of the rows with our database and let s go back to oh it s fine Robert Penn lets changeless click the edit button to move from Robert to bother will changes credit limit as well could notice now that I m in edit mode that the font changes that I made the essay changes customer ID equals eight have are now represented on screen pen and notice that without having to do anything special that all my values here were present with text boxes and it explained again in the previous than just a moment ago whatever we re editing this template we can change these controls so we can I change it you know the entire layout of this of a list details area
Minute 21
And some immature hearts desire make the background white or black or whether the case would be the fonts different colors used as controls were wanted you we can do that or editing and zone changes to Bob Penn and change him to a 1000 or prevalence and click update and now notice that all 10 1000 credit limit the we also create new rows and click new and will put in here grants troops lesson in favor customer since 13 2510 can limit 50 and will quickly insert funny at the bottom enough we go all the way of very ends to have Grant Tabor and just so you know
Minute 22
And really talk about this but just a query would do with the grid view we can change the picture settings so we don t like the current mode which is numeric we can use the next previous on the metaphor instead effort to navigate between the rows or even set us out of master detail form like we did in the previous lesson where we combined the grid view in the details view we can do the same thing combined grid view in the form view so that you can see a large selection of rose and they click on one of those selected and then be able at it in the soul details view up a citizen noticed that I haven t written any Visual Basic code at all in in this lesson and I was able to kneel so much functionality here just amazing so again driven vehicle to get the speaker quickly write some really excellent dynamic applications a lot without having to write a lot of code and
Minute 23
And seizure be able to go finish them in very short order so is a very exciting time to start learning about developing web applications using visual Web developer 2005 express edition and hope you enjoy this video and learned a lot please visit www learnVisualStudio net to download and watch were former videos just like this one and all skill levels on many different topics related to see sharp Visual Basic ASP net and more thank you