Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The GridView control implements a number of features that allow you to customize the way your dynamic data is presented on the screen. For this demonstration, I'll use a file from the dynamic data website named AuthorsWithPaging.aspx and then click the Design button at the bottom of the Design View so you can see it's beginning appearance. In the beginning state of the file you will see a GridView. The GridView is displaying seven columns from the server-side authors table. Now to configure its behavior I'll click anywhere on the GridView control. You should see the tab appear above the GridView control indicating the kind of control asp:GridView and its ID GridView1.
Then at the top right corner of the control you will see an icon with a right pointing arrow. When you click on this icon that opens a set of tasks relating to the control. From there you can configure the control's data source, refresh its schema or the list of columns and data types, edit its columns and enable paging, sorting and other features. I will click on Edit Columns. From this screen you can add and remove columns to the Grid control and you can configure each column. I'll start with au_lname, the author's last name. I'll click on the item in the selected fields list and then take a look at its properties on the right.
If you scroll down to the Data Section of the BoundField properties, you will see the DataField property. This value must match the name of the column as it's known when it's retrieved from the server-side database. That's how the data is displayed in the control, but other values in these properties can be set arbitrarily. The HeaderText is one of these. The HeaderText property determines what the user sees at the top of each column. I'll select the text and type in instead Last Name. This is friendly text, text that the user can read directly. Within this properties list, each time you make a change just press the Tab key and that will save the change to the underlying code.
You will see that the value you type in is also reflected in the selected field's column on the left. Next I'll click on au_fname and I'll set its HeaderText to First Name and press Tab and then I'll go through and do the same thing for each of the other columns. For all the other columns I'm just going to change the first character to an uppercase character, making sure to press the Tab key after each change. If you forget to press the Tab key, in some conditions Visual Web Developer won't save your changes.
After I have changed the HeaderText for all of the columns, I'll click OK and take a look at the display in Design View. You should see that the names of the columns are reflected in Design View now. I'll save my changes with Ctrl+S and then run the page without debugging and you should see that the headers that you selected are displayed correctly. Now we'll close the browser and make sure other changes. With the GridView still selected I'll go back to the Task list and this time I'll choose AutoFormat. The AutoFormat selection allows you to set a number of visual properties all at the same time, with some predefined schemes. You can select Colorful, Classic, Simple and so on.
I will choose the Simple scheme, which reflects a background color in the header with a particular foreground color and then alternating row colors, and then I'll click OK. In Design View you should immediately see the scheme presented. You will see the same list of columns you saw before but now when you start the page in the browser you will see that the alternating row colors are implemented for you automatically. Finally I'll show one other capability of the grid control. I'll once again make sure that I have selected the control and now I'll go over to the Properties View and I'll double click the header of the Properties View to make it a floating panel and I'll drag it out and resize it so I can all of the panels of the GridView.
One of the features of the GridView is Automatic Paging. That is, the ability to show only a certain numbers of records at a time. This is extraordinarily easy to set up. Go to the Paging category in the Properties View and look for the property AllowPaging and set it to a value of True. Then go to the PageSize, which will default to a value of 10, and reduce it to 5. When you type in the value of 5 and then press the Tab key you should see that the Grid View is shrinking down to show only 5 rows in the Design View in the background.
Next click the icon next to PagerSettings. The Pager control is a set of hyperlinks that are generated automatically by the GridView as the user is browsing through the data. By default the pager settings mode is set to Numeric, which results in page numbers being displayed wherever you put the pager. If you change the mode from Numeric to one of the other modes, for example NextPreviousFirstLast, you will see that the numbers are replaced with caret icons or you can also do a combination of these settings, for example using NumericFirstLast. You can also position the pager by selecting the Position property and setting it to values of Bottom Top or TopAndBottom. I'll leave the Position property set at its initial value of Bottom.
Then I'll close the Properties View, I'll press Ctrl+S to save my changes and once again run the page. And the result will be that I see a list of the page numbers displayed below the GridView in the footer region. There are many other configurations that you can use with the GridView control. Explore the documentation and the properties list to see what's available and how you might be able to use this control to display your data.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101260 Viewers
61 Video lessons · 88019 Viewers
71 Video lessons · 71883 Viewers
56 Video lessons · 103720 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.