An Introduction to the Grid View Tool ASP.NET 4.0

Category: ASP.NET

There are many ways to show your database’s data, one way is by utilizing Microsoft Visual Studio’s GridView tool. It works by grabbing a SQLDataSource and automatically generating the fields into a table that you can modify afterwards. This type of data tool is best used to display tabular like data. For example we will be using a database that shows a food and the food group it is associated with. Let’s get started!

Download Assets

Getting Started

  1. Create a Web Form in Microsoft Visual Studio, use the default name. Import the database included with this tutorial (grocery.mdf).
  2. Switch to Design mode in the document. We must first have data to populate our GridView with, so we will click and drag out a SQLDataSource. This is located underneath the data tab in your ToolBox.
  3. Let’s set up our SQLDataSource. Click the smart tag on the right of the SQLDataSource, and select Configure Data Source…
  1. In the dropdown box select “grocery.mdf”, then click Next. Click Next a second time to accept “ConnectionString” as the name for our connection string. You should now be looking at the Configure The Select Statement Window.
  2. Once here, Click the “Advanced” button. A new dialog box will appear, the first one will allow you to automatically generate Insert, Update & Delete functions which we will come in handy at a later point. Check the first check box and hit OK.
  1. Make sure “Food” is the selected table with the asterisk checkbox selected. Once that is done click the Next button, Click “Test Query”, the database should appear. Click Finish.

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!

Creating the Gridview

Now that we have a data source we can go about connecting it to the GridView tool to that data. In Microsoft Visual Studio this is made very easy for us. Shall we?

  1. While in Design mode, move to the toolbox and navigate down to the Data tab. Here you will see the GridView item. Click and Drag the item to our “default.aspx” page.
  2. Initially the view populates with default values, let’s change that. By default the smart tab on the right should automatically open if it does not, Click it.
  3. Within the smart tab choose SQLDataSource1 in the drop down menu next to Choose Data Source. The GridView auto populates with your tables selectors. (id,food,foodgroup).
  4. In the smart tag you will notice there are several checkboxes two of which state Enabling Editing and Enabling Deleting. Check both of those boxes and you will notice it adds an Editing and Delete link to every table entry. You can now edit and delete items from your database via your GridView.

Customizing the GridView

So now we have a GridView pulling in our data without a big mess of code! Now we will format our Grid View and go through how to edit its look and feel and change the way our automated columns are shown.

  1. First off, how about some color? Under the smart tab click the Auto Format button and select a theme that you enjoy. Click okay once you have found a theme you like. Pretty cool huh?

Grid Views are table based so if you want to really customize how it looks give it a CSS class in the properties window and edit it as a table in your style sheet!

  1. Next we will modify the way our columns are displayed. In the Smart Tab, Click Edit Columns. This dialog box controls all of the fields in your grid view, the order they are in, and how they are displayed. Let’s walk through the different areas in this dialog box.

  • The Blue box shows the fields that you can add to your GridView. For example you could add a Hyperlink to your GridView and each column will have that link, or maybe a new CommandField such as the Select field to trigger a Details View.
  • The Green box shows the current fields in your GridView. Using the two arrows you can rearrange the order they are displayed in or delete them all together.
  • The Red box shows the properties of the item you currently have selected in. Most everything you would want to do with your column text is available here. Changing the way it’s displayed aesthetically and also how it behaves.

Inside the Command Field properties you can change their “Type” to Images and add your own custom Image URL for your delete and edit buttons!

  1. Let’s go ahead and remove the ID field as that isn’t as important to the user, add a space to the Food Group header text, and move the CommandField to the bottom of the list, so that it appears at the end of the GridView.
  2. Now run the application. It will render out the table data and you can modify it by clicking the Edit Link or remove it from your database with the Delete link. The reason we can edit and delete is because when we created our SQLDataSource we allowed it to generate the Insert, Update, and Delete statements.

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

Success!

Congratulations! You should now feel comfortable using the GridView tool to display your data. On top of that we covered how to modify, how and what the GridView tool displays. If you have any questions regarding the subject please leave a comment. Have a great day!

Ready for Round2?

Breeze through this like a champ? Feel like you need more GridView? Click here for the Advanced GridView Tutorial